HTML elements are the building blocks of HTML pages. 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:
<tagname>Content goes here...</tagname>Some HTML elements have no content (like the <br> element). These elements are called empty elements or void elements.
Nested HTML Elements
HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>HTML Element Types
Block-level Elements
Block-level elements always start on a new line and take up the full width available.
<div>This is a block-level element</div>
<h1>This is also block-level</h1>
<p>And this too</p>Inline Elements
Inline elements do not start on a new line and only take up as much width as necessary.
<span>This is an inline element</span>
<a href="#">This is also inline</a>
<strong>And this too</strong>Common HTML Elements
| Element | Description | Type |
|---|---|---|
| <div> | Generic container for flow content | Block |
| <span> | Generic inline container | Inline |
| <p> | Paragraph | Block |
| <a> | Hyperlink | Inline |
| <img> | Image | Inline |
| <ul> | Unordered list | Block |
| <ol> | Ordered list | Block |
| <li> | List item | Block |
Element Attributes
HTML elements can have attributes that provide additional information about the element. Attributes are always specified in the start tag.
<a href="https://www.example.com">Link</a>
<img src="image.jpg" alt="Description">
<div class="container">Content</div>Empty Elements
Empty elements are elements that don't have a closing tag. They are also called void elements.
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
<img src="image.jpg" alt="Description"> <!-- Image -->
<input type="text"> <!-- Input field -->
<link href="styles.css"> <!-- Link to external resource -->
<meta name="description" content="Description"> <!-- Metadata -->Best Practices
✓ Do:
- Always close your tags (except for empty elements)
- Nest elements properly
- Use semantic elements for their intended purpose
- Keep your HTML well-structured and readable
- Use lowercase for tag names
✗ Don't:
- Forget to close tags
- Nest elements incorrectly
- Use block elements inside inline elements
- Use deprecated elements when better alternatives exist
- Use uppercase for tag names