什么是语义化 HTML？无障碍与 SEO 基础

语义化 HTML 是按照元素本身的含义来使用它们。<nav> 表示导航，<main> 标记主要内容，标题表达层级，<button> 表示操作。这种结构比只用通用容器搭建的页面更可靠，方便浏览器、辅助技术和后续维护代码的人理解。

语义元素可以说明内容是什么，以及控件如何工作。但它们本身不会自动让网站变得无障碍，也不会自动提高搜索排名。文字、交互、视觉呈现和技术行为仍需正确实现。

语义元素与通用容器

<header>、<nav>、<main>、<article>、<section>、<aside> 和 <footer> 等元素描述常见页面区域。<h1> 到 <h6> 表示嵌套主题。列表用于组织相关项目，<figure> 和 `

搜索引擎与结构化内容

搜索系统可以利用页面内容、链接和结构来理解页面，但语义元素不是提高排名的捷径。应使用标题组织真实主题，而不是只用来改变文字样式。提供清楚的链接文字和页面标题。结构化数据必须准确对应页面上可见的内容；添加 schema 无法补足模糊或缺失的信息。

博客文章可以用 <article> 标记独立内容，用 <time datetime="..."> 表示机器可读的日期。同时也应向读者显示容易理解的日期。不要添加元素或隐藏文字，暗示页面可见内容并不支持的含义。

语义标记示例

<header>
  <a href="/">Ulement</a>
  <nav aria-label="Main navigation">
    <a href="/zh-cn/services/">Services</a>
    <a href="/zh-cn/contact/">Contact</a>
  </nav>
</header>
<main>
  <article>
    <h1>Choosing a website platform</h1>
    <p>Start with the publishing and operating requirements.</p>
    <figure>
      <img src="platforms.webp" alt="A diagram comparing platform responsibilities">
      <figcaption>Responsibilities differ between platforms.</figcaption>
    </figure>
  </article>
</main>

只有当标签和替代文本准确描述界面及内容时，这些标记才有帮助。导航标签应说明其用途，图片替代文本则应描述有用信息，而不是重复附近文字。

页面检查方法

1. 确认页面有明确的标题和主标题。
2. 检查标题层级和页面区域是否形成合理结构。
3. 确认链接能正确跳转，按钮能执行操作，键盘也可以使用。
4. 检查表单字段是否有标签，错误信息是否关联到正确字段。
5. 结合实际上下文检查图片、说明文字、表格和互动组件。
6. 使用键盘及适当的辅助技术测试；自动化工具只能辅助检查，不能替代完整审计。

常见问题

语义化 HTML 能提升 SEO 吗？

它可以让软件更清楚地理解结构和关系，但语义标签本身不保证排名提升。实用内容、可抓取性、链接和可靠的技术实现仍然重要。

<div> 算非语义 HTML 吗？

<div> 没有特定的内容含义，但当其他描述性元素都不适用时，它是有效的通用容器。只有在原生元素更能表达内容或行为时仍使用 <div>，才会造成问题。

语义化 HTML 能自动让网站变得无障碍吗？

不能。它提供更好的基础，但无障碍还取决于内容、视觉设计、键盘行为、动态状态、测试和实际用户需求。

资料核对日期：2026 年 10 月 20 日：WHATWG HTML 标准、W3C WAI 页面结构教程及 web.dev 语义化 HTML。