HTML Elements
Understand the difference between block-level and inline elements, and master the correct way to nest tags.
What Are HTML Elements
In HTML, an element refers to the complete structure from the opening tag to the closing tag, including both the tags themselves and the wrapped content. The browser parses each element into a node in the DOM tree, forming the page's hierarchical structure.
A complete HTML element consists of three parts:
Example
<p>This is a paragraph element</p>
<!-- opening tag + content + closing tag = complete element -->
<a href="https://example.com">Click here</a>
<!-- element can contain attributes (href), written in the opening tag -->
However, not all elements contain content. Some elements have no content and do not need a closing tag; they are called void elements.
Example
<br> <!-- line break element: no content, no closing tag -->
<hr> <!-- horizontal rule: also a void element -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="A sample photo"> <!-- image element: only attributes, no content -->
<input type="text" name="username"> <!-- input element -->
The key difference: regular elements have an opening tag, content, and a closing tag; void elements only have an opening tag (usually carrying attributes), with no content and no closing tag.
<html> is the root node, with <body> and <head> as its child nodes. The nesting relationships between elements determine the parent-child and sibling relationships between nodes. You can revisit the HTML Basics chapter to review the DOM concept.
Block-level Elements vs Inline Elements
HTML elements are divided into two categories based on how they arrange on the page: block-level elements and inline elements. Understanding their differences is the first step to mastering page layout.
Block-level Elements
Block-level elements are characterized by occupying the full width of their parent. No matter how narrow their content, they always take up the full row width, and elements before and after them will appear on separate lines.
Common block-level elements are shown in the table below:
| Tag | Description | Tag | Description | Tag | Description |
|---|---|---|---|---|---|
<h1>~<h6> |
Headings 1-6 | <dl> |
Description list | <article> |
Article |
<p> |
Paragraph | <dt> |
Description term | <aside> |
Sidebar |
<fieldset> |
Field group | <dd> |
Description details | <footer> |
Footer |
<hr> |
Horizontal rule | <header> |
Header | <table> |
Table |
<ol> |
Ordered list | <nav> |
Navigation | <div> |
Block container |
<ul> |
Unordered list | <main> |
Main content | <form> |
Form |
<li> |
List item | <section> |
Section |
Example
<p>This is the first paragraph, occupying a full row</p>
<p>This is the second paragraph, starting on a new line</p>
<div>
<h2>Headings are also on their own line</h2>
<p>Paragraphs inside a div are also on separate lines</p>
</div>
Inline Elements
Inline elements are characterized by not occupying a full row. They only take up the width of their content and are arranged left to right within a line, automatically wrapping to the next line when the width is insufficient.
Common inline elements are shown in the table below:
| Tag | Description | Tag | Description |
|---|---|---|---|
<a> |
Hyperlink | <ins> |
Inserted text |
<b> |
Bold | <del> |
Deleted text |
<strong> |
Important text | <button> |
Button |
<em> |
Emphasized (italic) | <input> |
Form input |
<i> |
Italic | <img> |
Image |
<small> |
Small text | <span> |
Inline container |
<sub> |
Subscript | <sup> |
Superscript |
Example
<p>This text contains <strong>bold portions</strong> and <em>italic portions</em>, which are displayed <span style="color: red">on the same line</span>.</p>
Core Differences Between the Two
Example
<!-- Block-level comparison -->
<div style="border: 1px solid #e74c3c; padding: 4px;">Block 1</div>
<div style="border: 1px solid #e74c3c; padding: 4px;">Block 2</div>
<!-- Each div occupies its own row, stacked vertically -->
<!-- Inline comparison -->
<span style="border: 1px solid #3498db; padding: 4px;">Inline 1</span>
<span style="border: 1px solid #3498db; padding: 4px;">Inline 2</span>
<!-- The two spans are on the same line, arranged horizontally -->
- Block-level elements can contain inline elements and other block-level elements.
- Inline elements can only contain inline elements (or text); they cannot directly contain block-level elements.
- Exception: In HTML5, the
<a>tag can wrap block-level elements, such as turning an entire card into a clickable link.
Element Nesting and Hierarchy
HTML elements can wrap one another like Russian nesting dolls. This relationship is called nesting. The nesting structure determines the hierarchical relationships of elements in the DOM tree.
DOM Tree Node Relationships
When elements are nested within each other, three types of relationships form between them:
- Parent-child relationship: The outer element is the "parent node" of the inner element. For example,
<body>is the parent node of<p>. - Sibling relationship: Multiple child elements under the same parent are "sibling nodes" to each other. For example,
<h1>and<p>are siblings when both are children of<body>. - Ancestor-descendant relationship: A relationship spanning multiple levels of nesting. For example,
<html>is the ancestor node of all elements.
The following nesting structure clearly shows the hierarchical relationships between elements:
Example
<body> <!-- parent node -->
<h1>Page Title</h1> <!-- child node + sibling #1 -->
<p> <!-- child node + sibling #2 -->
This paragraph contains <strong>emphasized text</strong> <!-- grandchild node (child of p) -->
within it.
</p>
</body>
The corresponding DOM tree structure is as follows:
body
├── h1 ("Page Title")
└── p
├── text: "This paragraph contains "
├── strong
— └── text: "emphasized text"
└── text: " within it."
Correct Nesting vs Incorrect Nesting
Nesting must follow the "last in, first out" (LIFO) principle — the innermost element opened first must be closed last. If tags are closed in a crossed manner, it results in incorrect nesting:
Example
<!-- Correct nesting: first opened, last closed -->
<div>
<p><strong>Important text</strong> followed by normal text.</p>
</div>
<!-- Incorrect nesting: tags crossed -->
<div>
<p><strong>Important text</p></strong>
</div>
<!-- The browser will try to correct this error, but it may cause unexpected layout issues -->
- Inline elements (e.g.,
<span>,<strong>) cannot nest block-level elements (e.g.,<div>,<p>). - The
<p>tag cannot nest other block-level elements inside it, such as<div>or another<p>. - Deep nesting, while syntactically valid, reduces readability and maintainability. It's recommended to keep nesting within 3~4 levels.
- Use the browser's "Inspect" feature (F12) to visually explore the DOM tree structure — an excellent learning method.
❓ FAQ
div, section, article); inline elements (strong, em, a) are only for text-level styling.<a> tag, which can wrap block-level elements to make an entire card clickable.<strong> and <b> both create bold text, <em> and <i> both create italic — what's the difference?<strong> means "this text is important," and <em> means "this text needs emphasis" — they convey meaning. <b> just "makes text bold," and <i> just "makes text italic" — they only affect appearance. Search engines and screen readers recognize the semantics of <strong> and <em> but ignore <b> and <i>. Rule of thumb: use <strong>/<em> for meaningful emphasis; use <b>/<i> or CSS for purely visual styling.📖 Summary
- Element = opening tag + content + closing tag (regular element), or just an opening tag (void element).
- Block-level elements occupy full rows and can contain other block-level and inline elements; inline elements stay on the same line and can only contain text or inline elements.
- Nesting must follow the "last in, first out" principle; do not cross-nest.
- In the DOM tree, elements form three types of relationships: parent-child, sibling, and ancestor-descendant.
📝 Exercises
- Block vs Inline Experiment: Create a page using two
<div>(block-level) and two<span>(inline) with the same content. Add a border stylestyle="border:1px solid red"and observe how they arrange differently in the browser. - DOM Tree Exercise: Write out the DOM tree structure for the following code (draw the tree diagram manually):
<div><h2>Title</h2><p>Text<strong>Emphasis</strong>End</p></div>