HTML5 语义化标签完全指南：header/nav/section/article/aside/footer
Introduction
HTML5 引入了一系列语义化标签，旨在让网页结构更加清晰、可读性更高，同时提升搜索引擎优化（SEO）效果和无障碍访问（Accessibility）体验。相比传统的 <div> 堆砌，使用语义化标签能够让你的代码"见名知意"，让开发者、浏览器和搜索引擎都能更好地理解页面内容。本指南将详细介绍每个语义化标签的用途、使用场景以及常见注意事项，帮助你构建结构清晰的现代网页。
基础语法
1. header — 头部区域
<header>
<h1>网站标题</h1>
<nav>导航内容</nav>
</header>2. nav — 导航链接
<nav class="main-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/contact">联系方式</a></li>
</ul>
</nav>3. section — 主题章节
<section>
<h2>产品特色</h2>
<p>介绍产品的核心功能和优势...</p>
</section>4. article — 独立文章
<article>
<header>
<h2>文章标题</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<p>文章正文内容...</p>
<footer>
<p>作者：张三</p>
</footer>
</article>5. aside — 侧边栏
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">相关文章1</a></li>
<li><a href="#">相关文章2</a></li>
</ul>
</aside>6. footer — 页脚区域
<footer>
<p>© 2024 公司名称. 保留所有权利.</p>
<address>联系邮箱: info@example.com</address>
</footer>7. main — 主体内容
<body>
<header>...</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签示例页面</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header { background: #333; color: #fff; padding: 20px; }
header h1 { margin: 0; }
nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
nav a { color: #fff; text-decoration: none; }
main { display: flex; padding: 20px; gap: 20px; }
article { flex: 3; background: #f9f9f9; padding: 20px; }
aside { flex: 1; background: #eee; padding: 20px; }
footer { background: #333; color: #fff; padding: 20px; text-align: center; }
</style>
</head>
<body>
<header>
<h1>我的技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/tutorials">教程</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>HTML5语义化标签完全指南</h2>
<time datetime="2024-01-15">发布于 2024年1月15日</time>
</header>
<p>本文详细介绍HTML5语义化标签的使用方法和最佳实践...</p>
<section>
<h3>为什么需要语义化标签？</h3>
<p>语义化标签可以让代码更易读、维护性更高，同时有助于SEO和无障碍访问。</p>
</section>
<footer>
<p>作者：开发者小明 | 阅读量：1234</p>
</footer>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">CSS3 Flexbox 布局</a></li>
<li><a href="#">JavaScript ES6+ 特性</a></li>
<li><a href="#">正则表达式入门</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 我的技术博客. All rights reserved.</p>
<p><a href="/privacy">隐私政策</a> | <a href="/terms">使用条款</a></p>
</footer>
</body>
</html>常见问题
- 一个页面可以用多个 header 吗？ 可以。header 不仅可以用在 body 级别表示页面头部，也可以用在 article 或 section 内表示该区域的标题。
- section 和 div 有什么区别？ section 是语义化标签，表示文档中的一个独立章节，通常应该有标题；div 是无语义的容器，仅用于样式或脚本绑定。
- article 和 section 何时互用？ article 表示独立可分发的内容（如博客正文），section 表示主题相关的分组。article 可以包含多个 section，反之亦可。
- aside 一定在侧边吗？ 不一定。aside 表示与周围内容间接相关的部分，可以是侧边栏、广告、引述等，位置由 CSS 决定。