HTML Elements
An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag, including the content in between.
HTML elements are the building blocks of HTML pages. They tell the browser how to display the content.
HTML Element Syntax
The syntax of an HTML element consists of three parts:
- Start tag (Opening tag): <tagname> - Marks the beginning of the element
- Element content: The content between the opening and closing tags
- End tag (Closing tag): </tagname> - Marks the end of the element
Examples of HTML Elements
Breaking Down an Element
Let's break down a paragraph element:
| Part | Code | Description |
|---|---|---|
| Start Tag | <p> | Opens the paragraph element |
| Content | This is a paragraph. | The text content |
| End Tag | </p> | Closes the paragraph element |
Nested HTML Elements
HTML elements can be nested, which means elements can contain other elements. All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1>, and <p>):
Example Explained
- The <html> element is the root element and it defines the whole HTML document. It has a start tag <html> and an end tag </html>.
- Inside the <html> element there is a <body> element that defines the document's body.
- Inside the <body> element there are two other elements: <h1> and <p>.
- The <h1> element defines a heading.
- The <p> element defines a paragraph.
More Complex Nesting Example
In this example, we have multiple levels of nesting. The <div> contains an <h2>, a <p>, and a <ul>. The <p> contains <strong> and <em> elements. The <ul> contains three <li> elements.
Empty HTML Elements
HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).
Other common empty elements include:
- <br> - Line break
- <hr> - Horizontal rule (creates a horizontal line)
- <img> - Image
- <input> - Input field
- <meta> - Metadata
- <link> - Link to external resources (like CSS files)
Example of Empty Elements
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
| Valid | Also Valid | Recommended |
|---|---|---|
| <p>Text</p> | <P>Text</P> | <p>Text</p> |
| <div>Content</div> | <DIV>Content</DIV> | <div>Content</div> |
| <h1>Heading</h1> | <H1>Heading</H1> | <h1>Heading</h1> |
At Coding Ninjas, we always use lowercase tag names for consistency and better readability.
Never Skip the End Tag
Some HTML elements will display correctly even if you forget the end tag. However, never rely on this! Unexpected results and errors may occur if you forget the end tag.
Block-Level vs Inline Elements
HTML elements are divided into two categories:
- Block-level elements: Always start on a new line and take up the full width available. Examples: <div>, <h1>-<h6>, <p>, <form>, <header>, <footer>, <section>
- Inline elements: Do not start on a new line and only take up as much width as necessary. Examples: <span>, <a>, <img>, <strong>, <em>, <br>
- Always close your HTML tags properly
- Use lowercase for tag names
- Nest elements correctly - close them in reverse order
- Understand the difference between block and inline elements
- Empty elements don't need closing tags
Understanding HTML elements is fundamental to web development. Master these concepts before moving forward!
Practice Exercises
Complete these exercises to reinforce your learning and earn XP