Frontend Academy · 课时

语义化 HTML5：语义化元素与 div 堆砌

Q: 「语义化 HTML5：语义化元素与 div 堆砌」这节课中我会学到什么？

用语义化元素替代没有意义的包装 div，并了解文档大纲算法和标题层级。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

用语义化元素替代没有意义的包装 div，并了解文档大纲算法和标题层级。

语义化 HTML5：语义化元素与 div 堆砌 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Div 大杂烩——问题所在

Div 大杂烩指完全由 <div> 和 <span> 元素构成的页面。它需要依靠 class 名称传达结构；没有这些 class，屏幕阅读器无法理解页面结构，也无法向搜索引擎传达任何含义。

<!-- Div soup (avoid) -->
<div class="container">
  <div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
  </div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

语义化替代方案

用能够传达用途的语义化元素替换没有意义的 div。这样，结构就能自我说明，即使没有任何 CSS 也易于理解。

<!-- Semantic HTML (preferred) -->
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Brand"></a>
    <nav>...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</body>

文档大纲算法

标题元素（h1-h6）会创建文档大纲。屏幕阅读器用户可以按标题导航。辅助技术会播报大纲层级。请保持层级合理：h1 用于页面标题，h2 用于主要部分，h3 用于子部分。

<time> — 机器可读的日期

<time> 元素使用机器可读的 datetime 属性标记日期和时间。搜索引擎可以理解活动日期；屏幕阅读器也能播报格式化后的日期。

<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time>

<address>

<address> 元素用于包裹与最近的文章或文档相关的联系信息。它不一定是邮政地址，电子邮件、电话和社交账号也算。

<address>
  <a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
  <a href="https://twitter.com/coddykit">@coddykit</a>
</address>

<figure> 和 <figcaption>

<figure> 用于包裹图像、图表、代码示例或视频等自包含内容。<figcaption> 提供与 figure 在语义上关联的说明文字。

<figure>
  <img src="chart.png" alt="Monthly active users 2025">
  <figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure>

<blockquote> 和 <cite>

<blockquote> 用于标记较长的引用。请使用 cite 属性指定来源 URL。<cite> 元素用于标记创作作品（书籍、文章、电影）的标题。

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the standard markup language for creating web pages.</p>
  <footer>—<cite>MDN Web Docs</cite></footer>
</blockquote>

<details> 和 <summary>

<details> + <summary> 组合可以在不使用 JavaScript 的情况下创建原生手风琴或披露控件。浏览器会自动处理展开与收起、键盘交互以及无障碍支持。

<details>
  <summary>What is the refund policy?</summary>
  <p>We offer a 30-day money-back guarantee on all plans.</p>
</details>

<mark> — 突出显示的文本

<mark> 表示为了便于参考而突出显示的文本，例如搜索结果中的匹配内容。它在语义上不同于使用 CSS 将文本设置为黄色。

<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p>

<abbr> — 缩写

请使用 <abbr> 包裹缩写词和首字母缩略词，并在 title 属性中提供完整术语。屏幕阅读器和浏览器会在用户悬停时向其展示完整形式。

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

何时使用 <div> 和 <span>

这两个元素仍然很有用。对于没有语义含义的通用块级容器（例如布局容器、React 中的组件根节点），<div> 是正确的选择。对于没有语义含义的行内样式挂钩，请使用 <span>。

快速检查

哪个 HTML 元素可以在无需 JavaScript 的情况下创建原生可折叠披露控件？

回顾：语义化 HTML5

用语义化元素替代 div 大杂烩：header、nav、main、article、section、aside、footer。日期使用 time，媒体使用 figure/figcaption，手风琴使用 details/summary，突出显示内容使用 mark。仅在没有语义含义的布局容器中使用 div 和 span。

常见问题解答