HTML: HTML 语义化标签
最后更新：2026-10-13
语义标签为您的网页结构赋予了意义——它们不仅告诉浏览器如何展示内容，还明确“这一部分是什么”。这在搜索引擎优化、网站可访问性和代码可读性方面都大有裨益。
1. 什么是语义化
"语义"就是"含义"。用 <div> 也能搭出任何布局，但浏览器看不懂容器的含义。语义化标签用名字直接说明用途：
▶ 示例
▶ 试一试📌 常用标签：
<header> 页眉、<nav>导航、<main>主体、<section> 区块、<article> 文章、<aside> 侧栏、<footer> 页脚。它们都是块级容器，作用和 <div> 一样，但名字说明了用途。
2. 语义化的好处
语义化有三个直接好处：搜索引擎更准确理解页面结构；屏幕阅读器可跳转到特定区域；开发者看代码就知道布局，无需猜 <div> 的 class 含义。
3. 图文容器：<figure> 与<figcaption>
<figure> 用于包裹图片、代码块、图表等独立内容，<figcaption> 为其添加标题说明：
▶ 示例
▶ 试一试4. 时间与标记：<time> 与 <mark>
▶ 示例
<time> 让机器可读的日期时间，<mark> 高亮显示搜索关键词或重要文本：
5. 可折叠内容：<details>与 <summary>
<details> 创建一个可展开/折叠的交互组件，<summary> 定义其可见标题。纯 HTML 实现，不需要 JavaScript：
▶ 示例
▶ 试一试❓ 常见问题
Q 语义化标签对SEO有什么影响？
A 搜索引擎通过语义化标签理解页面结构和内容重要性。
<header>告诉搜索引擎"这是页眉"，<main>表示"这是核心内容"，<article>表示"这是一篇独立文章"。搜索引擎会给予<main>和<article>中的内容更高的权重。此外，语义化标签有助于搜索引擎生成更准确的搜索结果摘要（如显示文章标题、作者、发布时间）。Q
<section>和<article>有什么区别？A
<article>是独立的、完整的内容块，可以单独发布或复用（如博客文章、新闻报道、评论）；<section>是内容的分组，通常有标题，但不是独立的内容（如章节、标签页、产品特性）。判断标准：如果这个内容块脱离上下文仍然有意义，用<article>；如果需要依赖上下文才能理解，用<section>。Q 什么时候用
<div>？A
<div>只在没有合适的语义化标签时使用。常见场景：1）纯粹的样式容器（如包裹一组元素方便Flexbox布局）；2）JavaScript操作的钩子（如模态框、弹窗）；3）没有语义含义的分组。原则：先找语义化标签（header/nav/main/section/article/aside/footer），找不到时再用div。Q
<details>和<summary>的兼容性如何？A
<details>和<summary>是HTML5原生折叠面板，现代浏览器（Chrome、Firefox、Safari、Edge）都支持，兼容性很好。好处：无需JavaScript就能实现折叠效果，支持键盘导航和屏幕阅读器。局限：样式自定义能力有限（如箭头图标），复杂交互仍需JavaScript。IE不支持，但IE已停止维护，无需考虑。📖 小节
- 核心语义标签：
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> <figure>+<figcaption>包裹图片/代码并加标题<time>标记机器可读时间，<mark>高亮文本<details>+<summary>纯HTML折叠面板- 语义化提升 SEO、无障碍和代码可读性
<div>和<span>没有语义，只在没有合适标签时使用
📝 作业
- 搭建骨架：用语义化标签搭建一个博客页面结构，填充一些占位文字。
- 对比体验：分别用屏幕阅读器朗读纯
<div>页面和语义化页面，感受差异。
