什么是语义化？为什么重要？
语义化HTML意味着使用具有明确含义的HTML标签来构建页面结构，而不是滥用无意义的 <div> 和 <span>。语义化的核心价值体现在三个方面：
- 可访问性：屏幕阅读器等辅助技术依赖语义化标签来解读页面结构
- SEO：搜索引擎通过语义化标签理解内容的层次和重要性
- 可维护性：语义化的代码更易读、更易理解和维护
正确使用语义化标签是前端开发的基本功，它让你的代码"说话"——不仅告诉浏览器如何渲染，还告诉其他开发者和机器这段内容是什么。
文档结构标签
header — 页头/区域头部
<!-- 页面级头部 -->
<header>
<nav aria-label="主导航">
<!-- 导航内容 -->
</nav>
</header>
<!-- 文章级别的头部 -->
<article>
<header>
<h1>文章标题</h1>
<p>
<time datetime="2026-07-07">2026年7月7日</time>
<span>作者：张三</span>
</p>
</header>
<p>文章正文...</p>
</article>nav — 导航
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
<!-- 面包屑导航 -->
<nav aria-label="面包屑导航">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/blog">博客</a></li>
<li aria-current="page">当前文章</li>
</ol>
</nav>
<!-- 文章目录 -->
<nav aria-label="文章目录">
<h2>目录</h2>
<ol>
<li><a href="#section-1">第一章</a></li>
<li><a href="#section-2">第二章</a></li>
</ol>
</nav>main — 主要内容
每个页面只应有一个 <main> 元素，代表页面的核心内容区域（排除导航、页脚等辅助内容）。
<main id="main-content">
<!-- 页面核心内容 -->
</main>
<!-- 跳转链接配合使用 -->
<a href="#main-content" class="skip-link">跳转到主要内容</a>article — 独立内容块
<article> 表示文档中一个独立的、完整的内容块，可以独立分发和复用。
<!-- 博客文章 -->
<article>
<header>
<h2>文章标题</h2>
<p>发布于 <time datetime="2026-07-07">2026-07-07</time></p>
</header>
<p>文章正文...</p>
<footer>
<p>标签：<a href="/tags/css">CSS</a>, <a href="/tags/html">HTML</a></p>
</footer>
</article>
<!-- 嵌套article -->
<article>
<h2>论坛帖子</h2>
<p>帖子内容...</p>
<article>
<h3>回复1</h3>
<p>回复内容...</p>
</article>
<article>
<h3>回复2</h3>
<p>回复内容...</p>
</article>
</article>section — 文档分区
<section> 表示文档中的一个主题分区，通常包含一个标题。
<article>
<h1>Web开发指南</h1>
<section aria-labelledby="html-section">
<h2 id="html-section">HTML基础</h2>
<p>HTML是网页的结构层...</p>
</section>
<section aria-labelledby="css-section">
<h2 id="css-section">CSS样式</h2>
<p>CSS是网页的表现层...</p>
</section>
<section aria-labelledby="js-section">
<h2 id="js-section">JavaScript行为</h2>
<p>JavaScript是网页的行为层...</p>
</section>
</article>aside — 侧边内容
<!-- 侧边栏 -->
<aside aria-label="侧边栏">
<h2>相关文章</h2>
<ul>
<li><a href="/blog/1">文章一</a></li>
<li><a href="/blog/2">文章二</a></li>
</ul>
</aside>
<!-- 内联补充内容 -->
<p>CSS Grid是强大的布局工具。</p>
<aside>
<h3>小贴士</h3>
<p>Grid和Flexbox可以配合使用：Grid负责整体布局，Flexbox负责组件内部对齐。</p>
</aside>footer — 页脚/区域底部
<!-- 页面级页脚 -->
<footer>
<div>
<h3>关于我们</h3>
<p>公司简介...</p>
</div>
<div>
<h3>联系方式</h3>
<p>邮箱：[email protected]</p>
</div>
<p>© 2026 公司名称. 保留所有权利.</p>
</footer>
<!-- 文章级页脚 -->
<article>
<p>文章正文...</p>
<footer>
<p>作者：张三 | 发布于 2026-07-07 | 阅读：128次</p>
</footer>
</article>完整的页面结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 - 网站名称</title>
</head>
<body>
<a href="#main-content" class="skip-link">跳转到主要内容</a>
<header>
<nav aria-label="主导航">
<!-- 主导航 -->
</nav>
</header>
<main id="main-content">
<nav aria-label="面包屑导航">
<!-- 面包屑 -->
</nav>
<article>
<header>
<h1>文章标题</h1>
</header>
<section aria-labelledby="intro">
<h2 id="intro">简介</h2>
<p>...</p>
</section>
<section aria-labelledby="main">
<h2 id="main">主要内容</h2>
<p>...</p>
</section>
<footer>
<p>发布信息...</p>
</footer>
</article>
</main>
<aside aria-label="侧边栏">
<!-- 侧边栏内容 -->
</aside>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>表单元素增强
HTML5引入了多个新的表单元素和属性，提升了用户体验和数据有效性。
<!-- datalist — 输入建议 -->
<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<!-- output — 计算结果输出 -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>
<!-- progress — 进度条 -->
<progress value="70" max="100">70%</progress>
<!-- meter — 度量器 -->
<meter min="0" max="100" low="30" high="70" value="65">
65分
</meter>
<!-- 新的input类型 -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="email">
<input type="url">
<input type="tel">
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100">
<input type="color">
<input type="search">多媒体标签
<!-- audio 音频播放 -->
<audio controls preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>您的浏览器不支持音频播放。
<a href="audio.mp3">下载音频</a>
</p>
</audio>
<!-- video 视频播放 -->
<video controls preload="metadata" width="720"
poster="video-poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track kind="subtitles" src="sub-zh.vtt"
srclang="zh" label="中文字幕" default>
<p>您的浏览器不支持视频播放。
<a href="video.mp4">下载视频</a>
</p>
</video>
<!-- figure 和 figcaption -->
<figure>
<img src="diagram.png" alt="系统架构图">
<figcaption>图1：系统整体架构设计</figcaption>
</figure>其他语义化元素
<!-- time — 时间标记 -->
<p>发布于 <time datetime="2026-07-07T14:30:00+08:00">
2026年7月7日下午2:30
</time></p>
<!-- mark — 高亮文本 -->
<p>这是<mark>重点内容</mark>需要特别注意。</p>
<!-- details/summary — 折叠面板 -->
<details>
<summary>点击查看详细信息</summary>
<p>这里是折叠的内容，可以包含任何HTML元素。</p>
</details>
<!-- kbd — 键盘输入 -->
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件</p>
<!-- dfn — 术语定义 -->
<p><dfn id="html">HTML</dfn>（超文本标记语言）是构建网页的标准语言。</p>
<!--abbr — 缩写 -->
<p>我们使用<abbr title="Cascading Style Sheets">CSS</abbr>来设计样式。</p>语义化 vs 非语义化对比
| 非语义化（避免） | 语义化（推荐） |
|---|---|
<div class="header"> |
<header> |
<div class="nav"> |
<nav> |
<div class="main"> |
<main> |
<div class="article"> |
<article> |
<div class="sidebar"> |
<aside> |
<div class="footer"> |
<footer> |
<b>重要文字</b> |
<strong>重要文字</strong> |
<i>斜体</i> |
<em>强调</em> |
最佳实践总结
- 始终使用
<html lang="zh-CN">声明页面语言 - 每个页面只有一个
<main>元素 - 使用
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>构建页面骨架 - 为每个
<section>和<article>添加标题 - 使用
<time datetime="...">标记时间 - 使用
<figure>+<figcaption>包裹图片和说明 - 用
<details>+<summary>实现无需JS的折叠面板 - 避免滥用
<div>和<span>，优先选择语义化标签