Are you an LLM? You can read better optimized documentation at /en\html\semantic-tags.md for this page in Markdown format
HTML5 Semantic Tags: Building Clear and Maintainable Web Page Structures â
What are Semantic Tags? â
Semantic tags are HTML tags that clearly describe the meaning of their content. They not only tell the browser how to display content but, more importantly, convey the structure and meaning of the content.
The Importance of Semantics â
Imagine you are looking for a restaurant in a strange city. If all the buildings on the street look the same without any signs, it would be hard to find your destination. But if every building has a clear sign ("Restaurant", "Bank", "Post Office"), finding it becomes a breeze.
HTML semantic tags are like these signs; they help:
1. Developers Understand Code
html
<!-- â Non-semantic: Hard to understand the role of each part -->
<div class="top">
<div class="menu">
<div class="items">...</div>
</div>
</div>
<div class="middle">
<div class="content">...</div>
<div class="extra">...</div>
</div>
<div class="bottom">...</div>
<!-- â
Semantic: Clear at a glance -->
<header>
<nav>
<ul>
...
</ul>
</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2. Search Engine Optimization (SEO)
Search engine crawlers can better understand the page structure, improving the indexing quality of content. For example, search engines know that <nav> contains navigation links and <article> contains the main article content.
3. Accessibility
Assistive technologies like screen readers can more accurately guide visually impaired users through page content.
html
<!-- Screen reader will tell the user: "Entering navigation region" -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
</ul>
</nav>1
2
3
4
5
6
7
2
3
4
5
6
7
4. Code Maintainability
When collaborating in a team, other developers can quickly understand the page structure, reducing maintenance costs.
HTML5 Core Semantic Tags â
1. <header> - Header â
<header> is used to define the header area of a document or section, usually containing the website logo, title, navigation, etc.
html
<!-- Document-level header -->
<header>
<img src="logo.png" alt="TechBlog Logo" />
<h1>TechBlog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- Article-level header -->
<article>
<header>
<h2>Exploring HTML5 Semantic Tags</h2>
<p>
Author: <span>Sarah Miller</span> | Published:
<time datetime="2025-11-30">November 30, 2025</time>
</p>
</header>
<p>Article content...</p>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Key Points:
- A page can have multiple
<header>elements (document-level, article-level, section-level). - Cannot be nested within
<footer>,<address>, or another<header>.
2. <nav> - Navigation â
<nav> is used to define a collection of navigation links, usually for the website's main navigation or important navigation areas.
html
<!-- Main Navigation -->
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
<!-- Breadcrumb Navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/laptops">Laptops</a></li>
<li aria-current="page">MacBook Pro 2025</li>
</ol>
</nav>
<!-- In-article Navigation (Table of Contents) -->
<nav aria-label="Table of Contents">
<h2>Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
</nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Notes:
- Not all links need to be placed in
<nav>; use it only for major navigation areas. - Some secondary links in the footer usually do not need
<nav>.
3. <main> - Main Content â
<main> is used to identify the main content area of the document. Each page can have only one <main>.
html
<body>
<header>
<h1>My Blog</h1>
<nav>...</nav>
</header>
<!-- Main content of the page -->
<main>
<h2>Welcome to My Blog</h2>
<p>Sharing technical articles on frontend development...</p>
<article>
<h3>Latest Article: HTML5 Semantics</h3>
<p>Article content...</p>
</article>
</main>
<footer>
<p>© 2025 MyBlog</p>
</footer>
</body>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Key Rules:
- Only one per page.
- Cannot be a descendant of
<article>,<aside>,<header>,<footer>, or<nav>. - Represents the core content of the page, the main body seen after skipping navigation and footer.
4. <article> - Independent Article â
<article> represents an independent, self-contained content unit that can be distributed or reused separately.
html
<!-- Blog Article -->
<article>
<header>
<h2>Understanding JavaScript Closures</h2>
<p>
Author: Alex Johnson |
<time datetime="2025-11-28">November 28, 2025</time>
</p>
</header>
<p>Closures are an important concept in JavaScript...</p>
<section>
<h3>What is a Closure?</h3>
<p>
A closure allows a function to access variables from its outer scope...
</p>
</section>
<section>
<h3>Applications of Closures</h3>
<p>Closures are very useful in data privacy, callback functions...</p>
</section>
<footer>
<p>
Tags: <a href="/tags/javascript">JavaScript</a>,
<a href="/tags/closures">Closures</a>
</p>
</footer>
</article>
<!-- Product Card -->
<article class="product-card">
<img src="laptop.jpg" alt="High Performance Laptop" />
<h3>UltraBook Pro 15</h3>
<p>Thin, light, and high performance, suitable for professional developers</p>
<p class="price">$1,299</p>
<button>View Details</button>
</article>
<!-- Comment -->
<article class="comment">
<header>
<img src="avatar.jpg" alt="User Avatar" />
<p>
<strong>Emily Chen</strong> âĸ
<time datetime="2025-11-30T10:30:00">2 hours ago</time>
</p>
</header>
<p>
This article is very well written and helped me understand the essence of
closures!
</p>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Criterion: If this content can be taken out separately and put into an RSS feed, social media, or other websites, it is suitable for <article>.
5. <section> - Content Section â
<section> is used to divide the document into themed blocks, usually with a heading.
html
<article>
<h1>Frontend Learning Roadmap</h1>
<!-- First Chapter -->
<section>
<h2>Basics Phase</h2>
<p>Learn HTML, CSS, and JavaScript basics...</p>
</section>
<!-- Second Chapter -->
<section>
<h2>Framework Learning</h2>
<p>Master React, Vue, or Angular...</p>
</section>
<!-- Third Chapter -->
<section>
<h2>Advanced Skills</h2>
<p>Learn build tools, testing, performance optimization...</p>
</section>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<section> vs <div>:
- Use
<section>: When the content has a clear theme and usually contains a heading. - Use
<div>: Only for styling or layout purposes, without semantic meaning.
html
<!-- â
Correct Usage -->
<section>
<h2>User Reviews</h2>
<p>See what customers say about our products...</p>
</section>
<!-- â Not Recommended: Section without a heading -->
<section>
<p>Some random content...</p>
</section>
<!-- â
Should use div -->
<div class="wrapper">
<p>Some random content...</p>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
6. <aside> - Sidebar/Related Content â
<aside> is used for ancillary information related to the main content but independent, such as sidebars, ads, related links, etc.
html
<main>
<article>
<h1>Deep Dive into CSS Grid Layout</h1>
<p>Grid is the most powerful layout system in CSS...</p>
</article>
<!-- Sidebar -->
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="/flexbox">Flexbox Complete Guide</a></li>
<li><a href="/responsive">Responsive Design Principles</a></li>
<li><a href="/css-tricks">Practical CSS Tricks</a></li>
</ul>
<h2>Popular Tags</h2>
<p>
<a href="/tags/css">#CSS</a>
<a href="/tags/layout">#Layout</a>
<a href="/tags/grid">#Grid</a>
</p>
</aside>
</main>
<!-- Supplementary Note within Article -->
<article>
<h2>JavaScript Asynchronous Programming</h2>
<p>Asynchronous programming is the core of modern JavaScript...</p>
<aside class="note">
<h3>Tip</h3>
<p>
Before learning asynchronous programming, it is recommended to master the
execution flow of synchronous code.
</p>
</aside>
<p>Let's first understand Promises...</p>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
7. <footer> - Footer â
<footer> defines the footer of a document or section, usually containing copyright information, contact details, related links, etc.
html
<!-- Document-level footer -->
<footer>
<div class="footer-content">
<section>
<h3>About Us</h3>
<p>TechCorp is dedicated to providing quality technical services</p>
</section>
<section>
<h3>Quick Links</h3>
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Use</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</section>
<section>
<h3>Follow Us</h3>
<ul class="social-links">
<li><a href="https://twitter.com/techcorp">Twitter</a></li>
<li><a href="https://github.com/techcorp">GitHub</a></li>
<li><a href="https://linkedin.com/company/techcorp">LinkedIn</a></li>
</ul>
</section>
</div>
<p class="copyright">© 2025 TechCorp. All rights reserved.</p>
</footer>
<!-- Article-level footer -->
<article>
<h2>Mastering TypeScript Type System</h2>
<p>Article content...</p>
<footer>
<p>Author: Michael Davis</p>
<p>First Published: <time datetime="2025-11-25">November 25, 2025</time></p>
<p>Last Updated: <time datetime="2025-11-30">November 30, 2025</time></p>
</footer>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
8. Other Important Semantic Tags â
<figure> and <figcaption> â
Used to wrap independent content like images, charts, code snippets, and their captions.
html
<figure>
<img src="architecture-diagram.png" alt="System Architecture Diagram" />
<figcaption>Figure 1: Micro-frontend Architecture Diagram</figcaption>
</figure>
<figure>
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
</code></pre>
<figcaption>Code Example: ES6 Template String</figcaption>
</figure>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<time> â
Represents time or date.
html
<p>
Published:
<time datetime="2025-11-30T14:30:00+08:00">November 30, 2025 2:30 PM</time>
</p>
<p>Event Date: <time datetime="2025-12-25">Christmas</time></p>1
2
3
4
5
6
2
3
4
5
6
<mark> â
Marks highlighted text.
html
<p>Search results for <mark>HTML5</mark> related content</p>1
<address> â
Defines contact information.
html
<footer>
<address>
Contact Us:<br />
Email: <a href="mailto:[email protected]">[email protected]</a><br />
Address: 123 Tech Street, San Francisco, CA 94105, USA
</address>
</footer>1
2
3
4
5
6
7
2
3
4
5
6
7
Complete Page Example â
Here is a complete blog page built using semantic tags:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Understanding HTML5 Semantics - TechBlog</title>
</head>
<body>
<!-- Header -->
<header>
<img src="logo.png" alt="TechBlog Logo" />
<h1>TechBlog</h1>
<!-- Main Navigation -->
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/articles">Articles</a></li>
<li aria-current="page">Understanding HTML5 Semantics</li>
</ol>
</nav>
<!-- Main Article -->
<article>
<header>
<h2>Understanding HTML5 Semantic Tags</h2>
<p>
Author: <span>David Martinez</span> | Published:
<time datetime="2025-11-30">November 30, 2025</time>
</p>
</header>
<!-- Article Sections -->
<section id="intro">
<h3>What is Semantics?</h3>
<p>
Semantics refers to using appropriate tags to express the meaning of
content...
</p>
</section>
<section id="benefits">
<h3>Benefits of Semantics</h3>
<p>Using semantic tags can improve SEO, enhance accessibility...</p>
<aside class="tip">
<h4>Tip</h4>
<p>
Reasonable use of semantic tags can significantly improve code
quality.
</p>
</aside>
</section>
<section id="examples">
<h3>Common Examples</h3>
<figure>
<img
src="semantic-structure.png"
alt="Semantic Structure Diagram"
/>
<figcaption>Figure 1: HTML5 Semantic Page Structure</figcaption>
</figure>
</section>
<!-- Article Footer -->
<footer>
<p>
Tags:
<a href="/tags/html5">#HTML5</a>
<a href="/tags/semantic">#Semantics</a>
<a href="/tags/best-practices">#BestPractices</a>
</p>
</footer>
</article>
<!-- Sidebar -->
<aside>
<section>
<h3>Latest Articles</h3>
<ul>
<li><a href="/css-grid">CSS Grid Complete Guide</a></li>
<li><a href="/js-async">JavaScript Asynchronous Programming</a></li>
<li><a href="/react-hooks">React Hooks Deep Dive</a></li>
</ul>
</section>
<section>
<h3>Popular Tags</h3>
<p>
<a href="/tags/html5">#HTML5</a>
<a href="/tags/css">#CSS</a>
<a href="/tags/javascript">#JavaScript</a>
</p>
</section>
</aside>
</main>
<!-- Footer -->
<footer>
<section>
<h3>About TechBlog</h3>
<p>A blog platform focused on sharing frontend technology</p>
</section>
<section>
<h3>Contact</h3>
<address>
Email: <a href="mailto:[email protected]">[email protected]</a>
</address>
</section>
<p>© 2025 TechBlog. All rights reserved.</p>
</footer>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
Best Practices â
1. Choose Appropriate Tags â
html
<!-- â Overuse of section -->
<section>
<section>
<section>
<p>Content</p>
</section>
</section>
</section>
<!-- â
Reasonable Usage -->
<article>
<section>
<h2>Section Title</h2>
<p>Content</p>
</section>
</article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2. Avoid Misuse of Semantic Tags â
Do not use semantic tags just for the sake of using them; ensure the tags truly fit their semantics.
html
<!-- â Misuse of article -->
<article>
<button>Click Here</button>
</article>
<!-- â
Correct Usage -->
<div>
<button>Click Here</button>
</div>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
3. Combine with ARIA to Enhance Accessibility â
html
<nav aria-label="Main Navigation">
<ul>
...
</ul>
</nav>
<main aria-label="Main Content">
<article>...</article>
</main>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
4. Maintain Clear Hierarchy â
html
<!-- â
Clear Hierarchy -->
<article>
<h1>Main Title</h1>
<section>
<h2>Subsection Title</h2>
<p>Content</p>
</section>
<section>
<h2>Another Subsection</h2>
<p>Content</p>
</section>
</article>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Summary â
HTML5 semantic tags bring the following advantages to Web development:
- â Better Code Readability: More efficient team collaboration
- â SEO Optimization: Search engines easier to understand page structure
- â Accessibility: Assistive technologies better serve disabled users
- â Maintainability: Reduced code maintenance costs
- â Future-Proof: Compliant with Web standards, ensuring long-term compatibility