HTML 语义化元素

是什么，为什么存在

语义化 HTML 使用元素表达内容是什么、各部分怎样关联，以及某个控件能做什么。<nav> 表示主要导航，<article> 表示可独立复用的内容，<button> 表示可触发操作的控件。相反，<div> 与 <span> 是没有额外含义的通用容器。

语义不是外观。一个 <h2> 可以被 CSS 画得比正文更小，它仍是二级标题；一个带有按钮样式的 <div> 仍不是按钮。样式类可以说明设计系统中的角色，但浏览器不会因为类名是 card-title 或 primary-nav 就获得对应的 HTML 契约。

浏览器解析标记后构建 文档对象模型（Document Object Model，DOM） 。元素名称、嵌套关系和属性随后参与表单提交、键盘交互、页面导航与可访问性 API 映射。语义化标记把这些能力放在同一个声明中，减少脚本重复实现浏览器行为的需要。

辅助技术可以借助标题、控件名称和 地标（landmark） 浏览页面。开发者也能从元素名称直接看出结构。不过，语义化元素不是 SEO 排名开关，也不会修复含糊的文案、错误的标题层级或缺失的表单标签。

你会在页面外壳、文章列表、导航、表单、披露控件和搜索结果中使用这些元素。选择元素时应从内容与行为开始，而不是从默认样式或希望出现的 ARIA 角色开始。

工作原理

HTML 解析器根据源码生成 DOM。有效的元素关系会成为树中的父子关系；无效嵌套则可能被解析器修正，实际 DOM 因而不同于源码。模板缩进不足以证明结构正确，语义审查必须查看浏览器生成的 DOM。

浏览器把 DOM 与 CSS 转换为视觉呈现，同时把相关节点映射到平台可访问性 API。后一个结果常被称为可访问性树。原生元素、可访问名称、状态和必要的 ARIA 会共同影响这棵树，但视觉位置不负责定义文档含义。

常用结构元素的职责如下。隐式角色描述常见映射，不等于每个同名元素都会成为地标；上下文与可访问名称会改变结果。

<header> 和 <footer> 的含义取决于最近的内容范围。页面级 <header> 可以是 banner 地标，而 <article> 内的 <header> 只是该文章的介绍部分。不要给每个局部页眉手工补 role="banner"，否则页面会出现一批错误的顶级地标。

<section> 与 <article> 的区别在内容所有权。可以脱离当前页面进入订阅源、搜索结果或另一个聚合页的内容适合 <article>；依赖当前文档主题的章节适合 <section>。只为布局包一层时，两者都不合适，使用 <div> 即可。

选择结构元素时，可以依次判断：

1. 这是整个文档独有的主体吗？使用一个可见的 <main>。
2. 这是主要导航，还是可独立复用的内容？分别考虑 <nav> 与 <article>。
3. 这是有名称、有主题的章节或补充内容吗？考虑 <section> 或 <aside>。
4. 这一层只服务于布局、样式或脚本挂载吗？保留 <div> 或 <span>。

标题元素表达层级，而不是字号。<h1> 到 <h6> 的级别应反映页面中的实际包含关系。浏览器没有实现一种会让每个嵌套 <section> 自动重置标题级别的通用大纲算法，因此不能在每个章节中机械地再写一个 <h1>。

交互元素还带有行为契约。<button> 进入顺序焦点、响应键盘激活、支持 disabled，并且在表单中有明确的 type；带 href 的 <a> 支持导航、复制地址和在新标签页打开。用 <div> 模拟这些能力需要重写一套容易遗漏边界情况的控件。

可访问名称（ accessible name ）回答“这个控件或区域叫什么”。名称可以来自元素文字、关联的 <label>、aria-labelledby，或在合适场景中来自 aria-label。名称来源有优先级，随意添加 ARIA 可能遮蔽本来清楚的可见文字。

示例

下面四个示例都在浏览器中运行，并把真实控制台输出列在代码之后。它们从页面结构逐步走到自动审计，但检查结果仍需结合内容意图解释。

建立页面地标

这个页面先提供跳过链接，再依次声明页眉、主导航、主体、补充内容和页脚。脚本读取浏览器实际生成的 DOM，而不是根据类名猜测结构。

跳过链接的目标是主体本身，因此键盘用户可以绕过重复导航。aria-label="Primary" 区分导航地标；aria-labelledby 则复用补充区域的可见标题，避免维护两份名称。

源码中只有一个可见 <main>，并且它没有嵌套在 <article>、<aside>、<header>、<footer> 或 <nav> 中。页面可以有其他带 hidden 属性的 <main>，但同时暴露多个主体会破坏页面导航。

表达独立内容与内部章节

每条发布记录可以脱离列表单独阅读，因此外层使用 <article>。第一条记录中的“Breaking changes”依赖该记录的上下文，所以它是带标题的 <section>。

<main>
  <h1>Release notes</h1>
  <article>
    <header>
      <h2>Reader 2.4</h2>
      <p>Published <time datetime="2026-09-04">4 September 2026</time></p>
    </header>
    <p>This release adds offline bookmarks.</p>
    <section aria-labelledby="breaking-title">
      <h3 id="breaking-title">Breaking changes</h3>
      <p>The export file now uses UTF-8.</p>
    </section>
    <footer><a href="/reader/2.4">Full release</a></footer>
  </article>
  <article>
    <h2>Reader 2.3</h2>
    <p>This release fixes duplicate highlights.</p>
  </article>
</main>

<script>
  const articles = document.querySelectorAll('article');
  const sections = articles[0].querySelectorAll(':scope > section');
  const published = document.querySelector('time').dateTime;
  console.log(`articles: ${articles.length}`);
  console.log(`first article sections: ${sections.length}`);
  console.log(`machine date: ${published}`);
</script>

articles: 2
first article sections: 1
machine date: 2026-09-04

文章内的 <header> 和 <footer> 描述最近的 <article>，不是整页。<time datetime> 同时保留可读日期与机器可读值；它不会验证日期是否符合业务规则。

标题级别也反映嵌套：页面标题是 <h1>，每篇记录是 <h2>，记录内部章节是 <h3>。把内部标题改成另一个 <h1> 不会由 <section> 自动修正。

使用原生交互行为

表单操作使用 <button>，补充信息使用 <details> 与 <summary>。脚本触发按钮并切换披露控件，输出来自浏览器提供的原生属性与事件。

<form id="editor">
  <label for="title">Title</label>
  <input id="title" name="title" value="Semantic HTML" />
  <button type="submit">Save article</button>
</form>

<details id="help">
  <summary>Formatting help</summary>
  <p>Use a short, descriptive heading.</p>
</details>

<div class="status">Not saved</div>

<script>
  const form = document.querySelector('#editor');
  const button = form.querySelector('button');
  const status = document.querySelector('.status');
  const help = document.querySelector('#help');

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log(`submitted by: ${event.submitter.textContent}`);
  });

  console.log(`tab index: button=${button.tabIndex}, status=${status.tabIndex}`);
  button.click();
  help.open = true;
  console.log(`details open: ${help.open}`);
</script>

tab index: button=0, status=-1
submitted by: Save article
details open: true

按钮默认进入焦点顺序，普通状态容器不会。type="submit" 明确了按钮与表单的关系；组件库中的通用按钮若省略 type，放进表单后可能意外提交。

<details> 已提供展开状态和键盘操作，不需要先生成一个 <div role="button"> 再同步 aria-expanded。自定义样式仍然可以作用于原生元素，但要保留可见焦点与状态差异。

审查生成的标记

这段小型审计器检查四种常见的生成代码问题。它操作故意有缺陷的 DOM，并给出稳定输出，适合作为代码审查后的快速回归检查。

<nav><a href="/">Home</a></nav>
<nav><a href="/account">Account</a></nav>
<main>
  <section><div class="heading">News</div></section>
  <div onclick="saveDraft()">Save draft</div>
</main>
<main>Duplicate content</main>

<script>
  function saveDraft() {}

  const findings = [];
  const visibleMains = [...document.querySelectorAll('main')]
    .filter((element) => !element.hidden);
  if (visibleMains.length !== 1) {
    findings.push(`${visibleMains.length} visible main elements`);
  }

  const navigations = [...document.querySelectorAll('nav')];
  const unnamed = navigations.filter((element) =>
    !element.hasAttribute('aria-label') &&
    !element.hasAttribute('aria-labelledby'));
  if (navigations.length > 1 && unnamed.length > 0) {
    findings.push(`${unnamed.length} unnamed navigation regions`);
  }

  for (const section of document.querySelectorAll('section')) {
    if (!section.querySelector('h1, h2, h3, h4, h5, h6')) {
      findings.push('section missing a heading');
    }
  }

  if (document.querySelector('div[onclick]')) {
    findings.push('div handles click without native control semantics');
  }
  console.log(findings.join('\n'));
</script>

2 visible main elements
2 unnamed navigation regions
section missing a heading
div handles click without native control semantics

审计规则只能发现候选问题。例如，多个导航需要不同名称，但只有产品上下文能决定名称该是什么；某些没有标题的 <section> 实际上应该改成 <div>，而不是补一个隐藏标题。

自动检查之后还要查看浏览器的可访问性树，并只用键盘完成主要任务。脚本能证明 DOM 形状，不能代替对名称、角色、状态和操作结果的检查。

陷阱

修复方法： 操作使用 <button type="button"> 或明确的提交按钮，导航使用带 href 的 <a>。只有在平台没有合适原生元素时才创建自定义控件，并完整实现相应的 ARIA 模式与键盘交互。

修复方法： <section> 需要可说明的主题，通常还有可见标题；<article> 需要独立性。只负责网格、间距、脚本挂载或样式隔离的层继续使用 <div>。

修复方法： 先使用原生元素及其允许的属性，再添加确有缺口的名称、状态或关系。对照 ARIA in HTML 的允许规则，并在可访问性树中确认最终名称与角色。

修复方法： 按实际文档层级选择 <h1> 到 <h6>，不要按字号选。组件无法提前知道嵌套深度时，让调用方传入标题元素或级别，并在组合后的页面上审查标题列表。

修复方法： 用语义元素准确描述内容，并单独实现经过验证的结构化数据。通过抓取结果、索引工具和实际搜索表现检查 SEO，不要声称某个标签本身会提高排名。

延伸阅读

• HTML Living Standard：章节与结构
• W3C：ARIA in HTML
• WAI-ARIA APG：地标区域
• MDN：HTML 元素参考