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:

HTML

<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 -->

▶ Try It Yourself

However, not all elements contain content. Some elements have no content and do not need a closing tag; they are called void elements.

HTML

<br>        <!-- line break element: no content, no closing tag -->
<hr>        <!-- horizontal rule: also a void element -->
<img src="photo.jpg" alt="Photo">  <!-- image element: only attributes, no content -->
<input type="text" name="username">  <!-- input element -->

▶ Try It Yourself

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.

📌 Elements and DOM Nodes: In the DOM structure, each element corresponds to a node. <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

HTML

<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>

▶ Try It Yourself

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

HTML

<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>

▶ Try It Yourself

Core Differences Between the Two

Comparison

<!-- 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 -->

▶ Try It Yourself

📌 Key Rules:

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:

HTML

<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>

▶ Try It Yourself

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:

HTML

<!-- 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 -->

▶ Try It Yourself

⚠️ Nesting Precautions:

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.

📖 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 style style="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>

← Previous: HTML Basics Next: HTML Attributes →