语义化 HTML：该用哪些标签，以及它们为何对无障碍访问、Google 和 AI 都很重要

浏览器显示 <div> 和 <nav> 的方式相同，区别在于含义：语义化 HTML 告诉每个读取页面的程序，每个区块承担什么角色。MDN 将其定义为按照元素的含义而非默认外观来使用元素。搜索引擎、辅助技术以及为 AI 模型提供数据的爬虫，都能从这种含义中受益。

主要的语义化 HTML 标签有哪些？

HTML 标准定义了数十个元素。以下是几乎所有内容页面都会用到的结构元素：

文本级标签同样带有含义：<strong> 表示重要，<em> 表示强调，<blockquote> 和 <cite> 用于引用，<ul> 和 <ol> 用于列表，<a> 用于链接，<button> 用于操作。

为什么语义化 HTML 对无障碍访问很重要？

屏幕阅读器会根据标签构建页面地图。<header>、<nav>、<main>、<aside> 和 <footer> 这些区域让用户可以直接跳到菜单或正文，标题列表则相当于目录。正因如此，W3C 关于页面结构的无障碍教程推荐使用这些区域，并保持合理的标题顺序。

一个可点击的 <div> 对键盘不可见，对屏幕阅读器也毫无声息，除非您手动重建原生 <button> 免费提供的一切。原生元素自带角色、键盘焦点和预期行为。在许多国家，公共网站和商业网站的无障碍访问还是法律要求，因此规范的标记也关系到合规。

语义化 HTML 对 SEO 有帮助吗？

Google 从未把语义标签说成直接的排名因素，完全用 <div> 搭建的页面也能获得排名。它的价值是间接的，但确实存在：

• 识别主要内容：<main> 和 <article> 有助于把重要文本与每页重复出现的菜单、侧栏和页脚区分开。
• 主题结构：有序的标题层级展示页面涵盖了什么、各部分之间如何关联，有助于提升长尾查询的相关性。
• 准确理解元素：真正的表格、列表和日期，比用样式区块模拟出来的视觉效果更容易读取。
• 与结构化数据保持一致：语义化标记和 JSON-LD 从两个角度描述同一个页面。我们的词条结构化内容说明了二者如何配合。

语义化 HTML 与干净的 URL、快速的页面一样，属于技术 SEO 的一部分：它是让内容被正确读取的基础。

AI 助手如何利用页面结构？

ChatGPT、Gemini、Perplexity 和 Google AI Overviews 不会引用整个页面，而是挑选段落。抓取您页面的爬虫通常会去掉导航和重复元素，再把文本切分成块。一个以清晰的 <h2> 开头、在第一段就回答问题、并且完整位于一个 <section> 内的部分，会生成一个干净的内容块。同样的内容如果分散在层层嵌套的 <div> 中，用加粗文字冒充标题，就会生成夹杂菜单项的碎片。我们的词条内容分块介绍了如何写出经得起这种切分的章节。

结构良好的文章页面是什么样的？

下面逐个标签描述一篇博客文章的骨架：

1. <header> 包含 Logo 和带主菜单的 <nav>。这个区块在每页重复出现，爬虫会学会忽略它。

2. <main> 紧随其后，其中只包含一个 <article>，也就是您希望被索引和引用的内容。

3. 在 <article> 内部，一个 <header> 汇集 <h1>（页面主题）、作者姓名，以及一个 <time datetime="2026-10-18"> 元素，用机器可读的格式标注发布日期。

4. 文章的每个部分都是一个 <section>，以一个按其所回答问题来措辞的 <h2> 开头，后接 <p> 段落、<ul> 列表或带 <th> 表头的 <table>。

5. 图表放在 <figure> 中，包含带描述性替代文本的 <img>，以及说明图表内容的 <figcaption>。

6. 相关链接放在 <aside> 中，位于文章主流程之外。

7. <footer> 以法律链接和联系链接结束页面。

有了这个骨架，屏幕阅读器用户按一个键就能到达正文，Google 能看到一篇结构清晰的主文章，AI 爬虫也可以把任何一个 <section> 当作独立答案提取。

最常见的语义化 HTML 错误有哪些？

• 到处都是 div：页面搭建工具常常生成层层 <div>，没有任何区域标记。至少要确认存在一个包裹正文的 <main>。
• 标题跳级或误用：从 <h2> 直接跳到 <h4>，用标题来放大文字，或把加粗段落当作假标题。应按结构选择标题级别，再用 CSS 设置样式。
• 多个相互竞争的 <h1>：HTML 允许这样做，但一个描述页面主题的 <h1>，对用户和搜索引擎来说仍是最清晰的信号。
• 可点击的 <div> 和 <span>：导航用 <a>，操作用 <button>。
• 布局表格和假表格：表格用于数据；用样式区块展示的数据会失去行列关系。
• 图片中的文字：图片里的标题或价格，爬虫和屏幕阅读器都无法读取。
• 日期只写成纯文本：加上带 datetime 属性的 <time>，让日期没有歧义。

如何检查页面的语义结构？

三项快速检查就能覆盖大部分问题。第一，显示页面的标题大纲并单独阅读：它应该能讲清内容。第二，在源代码中查找 <main>、<nav> 和 <article>。第三，只用键盘浏览页面，确认每个链接和按钮都能到达。我们的页面 SEO 审计可以列出任意 URL 的标题和标记问题，Sorank 免费 Chrome 扩展则会显示您正在浏览的页面的标题结构。

按含义使用每个标签：一个 <main>、一个 <h1>、有序的章节和真正的表格，能让访客、Google 和 AI 获得同一张清晰的页面地图。结构理顺之后，还需要定期撰写和发布内容：Sorank 以 autopilot 模式撰写并发布针对 Google 和 AI 优化的文章。