HTML 语义化元素

用语义标签表达文档大纲与地标，提升可访问性、可维护性与 SEO，而不是用无意义 div 堆砌结构。

#type / concept #status / growing #tech / dev / frontend #resource / html

[!info] 关联笔记

所属：文档与语义 MOC · HTML MOC

路线：HTML 学习路线

前置：文档结构

后续：内容模型 · 可访问性基础 · ARIA

HTML 语义化元素

这个概念为什么出现

div 能包一切，但辅助技术、阅读模式与维护者无法从 div.box27 知道“这是导航还是广告”。语义元素把角色写进 HTML，让结构和意义可被机器与人共享。

[!abstract] 一句话理解语义标签描述内容是什么；class 与 CSS 描述它长什么样。

最小可运行示例

场景：仓储门户首页既要好看，也要读屏可跳转

<body>
  <header>
    <p>华东仓储门户</p>
    <nav aria-label="主导航">
      <a href="/inbound">入库</a>
      <a href="/outbound">出库</a>
      <a href="/inventory">库存</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>今日低库存预警</h1>
      <p>以下 SKU 低于安全库存，请优先补货。</p>
      <section aria-labelledby="warehouse-a">
        <h2 id="warehouse-a">A 仓</h2>
        <p>12 个 SKU 低于阈值。</p>
      </section>
    </article>
  </main>

  <aside>
    <h2>快捷操作</h2>
    <a href="/counts/new">新建盘点</a>
  </aside>

  <footer>
    <p>内部系统 · 仅员工访问</p>
  </footer>
</body>

建议验证：DevTools Accessibility / 标题大纲；读屏地标列表应出现 banner/navigation/main/complementary/contentinfo（具体命名因平台而异）。

结合场景关注点

main 通常一页一个，承载主任务。
nav 需要可区分的名字（多个 nav 时 aria-label）。
section 应有标题，否则常常只是无意义分组。
article 表示可独立理解的内容单元（条目、卡片级故事）。

核心概念与准确模型

常用地标/分组

元素	典型角色	使用提示
`header`	页或区块页眉	可出现在 body 或 sectioning 内
`nav`	导航链接组	不要把整页链接都塞一个 nav
`main`	主内容	跳过重复到主内容的关键目标
`article`	独立内容	可联合 syndication/重用直觉
`section`	主题分组	有标题再 section
`aside`	侧支信息	与主文相关但可分离
`footer`	页或区块页脚	版权、次要链接等

文本语义（常被忽略）

h1-h6：大纲，不靠字号假装层级
p、ul/ol、figure/figcaption、time、strong/em：意义不同于粗体斜体

设计动机

HTML 一开始就是超文本文档语言。CSS 崛起后，若人人只用 div，文档又退化成“画布指令”。语义化是把文档能力要回来：可访问、可样式、可抓取。

边界与反直觉

不是“标签越多越语义”，错误标签比 div 更糟。
视觉上的“卡片”不一定是 article；看它是否独立完整。
布局用 CSS Grid/Flex，不靠 table/嵌套 div 硬掰。

常见误区

[!warning] 常见误区：用 section 代替 div 当通用盒子没有标题与主题的 section 往往不增加意义。通用容器继续用 div。

[!warning] 常见误区：靠字体大小制造标题大纲和 SEO/a11y 看的是 heading 元素，不是 font-size: 32px 的 div。

与相邻概念

概念	关系
内容模型	决定能否嵌套
ARIA	原生语义不足时再补
CSS	改变外观不该逼你改坏语义

工程实践

设计评审输出“标题层级与地标”，不只是色板。
组件 API 允许传入 heading level（h2/h3）避免卡片组件写死 h1。
禁止 div onClick 当按钮；用 button/a。

本节总结

语义化是可访问性与可维护性的低成本杠杆：先选对角色，再谈皮肤。

自测题

什么时候用 article 而不是 section？
为什么多个 nav 要加可区分名字？

参考答案

内容相对独立完整、可单独理解/复用时偏 article；只是文档内主题分组且依赖上下文时用 section。
辅助技术会列出导航地标；同名/无名会让用户无法分辨“主导航/页脚导航”。

延伸阅读

资料	类型	支撑内容
MDN: Sections and outlines	文档	分区元素
HTML spec: sections	规范	定义