什么是语义化？
语义化是指使用具有明确含义的 HTML 标签来构建页面结构，让代码本身就能表达内容的含义，而不仅仅依赖 class 和 id。
为什么要语义化？
1. SEO 优化
搜索引擎能更好地理解页面结构：
<article>告诉搜索引擎这是独立内容<nav>标识导航区域<header>/<footer>明确页面边界
2. 可访问性
屏幕阅读器能更准确地解读页面：
- 视障用户可以快速跳转到主要内容
- 辅助技术能识别页面各部分的功能
3. 代码可维护性
语义化标签让代码自解释，降低理解成本。
HTML5 语义化标签一览
页面结构标签
| 标签 | 用途 | 使用场景 |
|---|---|---|
<header> | 页面/区块头部 | Logo、标题、导航 |
<nav> | 导航区域 | 主导航、面包屑 |
<main> | 页面主要内容 | 每页仅一个 |
<article> | 独立内容块 | 文章、评论、帖子 |
<section> | 内容分区 | 章节、标签页内容 |
<aside> | 辅助内容 | 侧边栏、广告 |
<footer> | 页面/区块底部 | 版权信息、链接 |
文本语义标签
| 标签 | 用途 |
|---|---|
<h1>~<h6> | 标题层级 |
<p> | 段落 |
<strong> | 重要内容 |
<em> | 强调内容 |
<mark> | 高亮标记 |
<time> | 时间日期 |
<address> | 联系信息 |
最佳实践
1. 标题层级不跳级
<!-- 正确 -->
<h1>主标题</h1>
<h2>副标题</h2>
<h3>小标题</h3>
<!-- 错误 -->
<h1>主标题</h1>
<h3>跳级了</h3>
2. main 标签唯一性
每个页面只应有一个 <main> 标签，且不应嵌套在 <article>、<aside>、<header>、<footer>、<nav> 内。
3. article 的独立性
<article> 内的内容应能独立存在，即使脱离上下文也能被理解。
4. 合理使用 section
<section> 通常应有标题，用于将相关内容分组。
常见误区
误区一：滥用 div
<!-- 不推荐 -->
<div class="header">...</div>
<div class="nav">...</div>
<!-- 推荐 -->
<header>...</header>
<nav>...</nav>
误区二：忽略嵌套语义
<!-- article 内可以有独立的 header/footer -->
<article>
<header>
<h2>文章标题</h2>
</header>
<p>文章内容...</p>
<footer>
<p>作者：张三</p>
</footer>
</article>
总结
语义化不是额外的负担，而是让代码更优雅、更专业的必经之路。从今天开始，让你的 HTML 标签"说话"。