语义化是指使用具有明确含义的 HTML 标签来描述内容的结构与目的，而非仅仅用于样式或布局。
语义化标签：<article>, <nav>, <header>, <footer> —— 明确表达“这是导航”、“这是文章”
非语义化标签：<div>, <span> —— 仅表示“一个块”或“一段内联内容”，无具体含义
核心价值：
对开发者：代码更易读、维护
对浏览器 / 搜索引擎：理解页面结构，提升 SEO
对辅助技术（如屏幕阅读器）：提升无障碍体验
<header>页面或区块的头部
通常包含 logo、标题、主导航等
可多次使用（每个 <article> 或 <section> 都可有自己的 <header>）
<header>
<h1>GeeksforGeeks</h1>
<p>计算机科学学习平台</p>
</header>注意：
<header>≠ 页面顶部！它表示“介绍性内容”。
<nav>导航链接集合
专用于主要导航区域（如顶部菜单、侧边栏导航）
不适用于页脚中的“友情链接”或文章内的“跳转链接”
<nav>
<a href="/">首页</a>
<a href="/courses">课程</a>
<a href="/practice">练习</a>
</nav>最佳实践：每个页面通常只有 1~2 个
<nav>（主菜单 + 次级导航）
<main>页面主内容
唯一性：每个页面应有且仅有一个 <main>
内容必须是独特、核心的（排除重复的导航、广告、页脚）
<main>
<h1>数据结构教程</h1>
<p>本文介绍链表、栈、队列...</p>
</main>规则：
<main>不能是<header>,<nav>,<aside>,<footer>的子元素。
<article>独立可分发的内容单元
内容自包含，可单独 syndicate（如 RSS 订阅）
常见场景：博客文章、新闻、产品卡片、用户评论
<article>
<h2>如何学习算法？</h2>
<p>算法是编程的核心...</p>
<footer>发布于 2025-12-29</footer>
</article>提示：
<article>可嵌套（如评论区中的每条评论）
<section>主题相关的通用区块
表示文档中的一个主题章节
通常带有标题（<h1>–<h6>）
若无法确定用 <article> 还是 <section>，问自己：“这段内容能独立发布吗？”
<section>
<h2>课程大纲</h2>
<ul>
<li>数组与字符串</li>
<li>递归与回溯</li>
</ul>
</section>区别：
<article>：独立内容（如一篇新闻）
<section>：文档的一部分（如“第一章：引言”）
<aside>与主内容间接相关的内容
表现为侧边栏，但语义上是“补充信息”
示例：相关文章推荐、作者简介、广告、术语解释
<aside>
<h3>推荐阅读</h3>
<ul>
<li><a href="/dsa">数据结构入门</a></li>
<li><a href="/system-design">系统设计指南</a></li>
</ul>
</aside>关键：
<aside>内容移除后不影响主内容理解
<footer>区块或页面的尾部
可包含版权信息、联系方式、相关链接
可多次使用（页面底部 + 每篇文章底部）
<footer>
<p>© 2025 Lusifer. All rights reserved.</p>
<address>Email: contact@example.com</address>
</footer>提示：在
<article>内的<footer>通常放作者、发布时间等元数据。
<figure> 与 <figcaption>带说明的媒体内容
用于图像、图表、代码片段、视频等
<figcaption> 必须是 <figure> 的第一个或最后一个子元素
<figure>
<img src="algorithm-tree.png" alt="二叉搜索树示意图">
<figcaption>图1：二叉搜索树的结构</figcaption>
</figure>优势：语义明确，屏幕阅读器会将图注与图像关联朗读。
<details> 与 <summary>可折叠内容
实现“点击展开 / 收起”交互，无需 JavaScript
<summary> 是用户可见的标题
<details>
<summary>点击查看答案</summary>
<p>时间复杂度为 O(n log n)。</p>
</details>应用场景：FAQ、提示、高级选项、代码解释
<mark>高亮文本
表示相关性高亮（非强调！）
默认样式：黄色背景
<p>搜索结果中包含关键词 <mark>算法</mark>。</p>不要用
<mark>替代<strong>或<em>！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化布局示例</title>
</head>
<body>
<!-- 主页头部 -->
<header>
<h1>码上会</h1>
<nav>
<a href="/">首页</a> | <a href="/courses">课程</a>
</nav>
</header>
<!-- 主内容区 -->
<main>
<article>
<header>
<h2>HTML5 语义化指南</h2>
<p>发布于 <time datetime="2025-12-29">2025年12月29日</time></p>
</header>
<p>语义化让网页更有意义...</p>
<figure>
<img src="semantic-structure.png" alt="HTML5 语义结构图">
<figcaption>图：HTML5 语义元素布局</figcaption>
</figure>
<footer>
<p>作者：<a href="/author/lusifer">Lusifer</a></p>
</footer>
</article>
</main>
<!-- 侧边栏 -->
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="/css-grid">CSS Grid 布局</a></li>
</ul>
</aside>
<!-- 页面底部 -->
<footer>
<p>© 2025 Lusifer</p>
</footer>
</body>
</html>WCAG 合规：语义化是满足 Web 内容无障碍指南（WCAG 2.1）的基础要求。
在一个电商产品详情页中，如何合理使用 <article>, <section>, <aside>？
为什么 <main> 不能嵌套在 <article> 中？请从语义角度解释。
如何用语义化标签构建一个“问答（Q&A）”页面，使其对屏幕阅读器友好？