14｜HTML 语义结构

本课目标： 用语义化 HTML 明确页面层级。

原文题名： 用 HTML 语义结构提供机器可读的信息层级

技术背景

AI 系统抓取网页后需要从 HTML 中理解页面的主题、结构和信息层级。HTML 语义标签提供了结构线索，帮助抓取系统、切块系统和生成系统识别信息层级。它们是结构线索，不是指令。

GEO 策略

网页结构要让抓取系统、切块系统和生成系统更容易识别信息层级。

落地动作

设置清晰的页面主标题；编辑上可以保持一个主要 H1，但不要把多个 H1 直接等同于搜索失败
H2 为每个子话题分节，H3 细分
有先后顺序的步骤用 <ol>（有序列表），并列特征用 <ul>（无序列表），让读者和机器都更容易识别关系
术语定义用 <dl><dt><dd> 结构
关键定义用 <strong> 标记——不要滥用 <mark>（它的语义是「上下文相关高亮」，不是「重点强调」）
用 <article> 和 <section> 标记内容边界
开头 2-3 句定义：这篇文章讲什么、给谁看、解决什么问题
为按钮、菜单、表单、筛选器等关键交互元素补充规范的无障碍语义信息，例如合适的 ARIA 角色、aria-label、状态属性等。优先使用原生语义化 HTML；当原生 HTML 无法充分表达交互含义时，再用 ARIA 补充说明。ARIA 不是为了堆标记，而是为了让屏幕阅读器和浏览器智能体更准确地理解页面元素是什么、能做什么、当前处于什么状态。

因果逻辑详解

如果页面主要由无语义的 <div> 和 <span> 组成，浏览器、辅助技术和部分解析流程可利用的结构线索会更少。有序列表 <ol> 与无序列表 <ul> 应按内容关系正确使用；这能明确顺序与并列关系，但不能据此推断 AI 一定会按标签重排或打乱步骤。

很多 RAG 框架（LangChain、LlamaIndex）支持基于 HTML 标签的分块策略——切块时会参考 <section> 和 <h2> 的边界。清晰的 HTML 语义结构让切块更准确，每个块的语义更完整。

一个正在变得越来越重要的用途是：可访问性正在成为智能体可读性的一部分。过去，为按钮、菜单、表单等元素补充 ARIA 角色和标签，主要是服务屏幕阅读器等无障碍技术。但随着浏览器智能体的发展，这套语义信息也开始被用于帮助 AI 理解和操作网页。

Google 在其生成式 AI 指南中提到，浏览器智能体会分析页面的视觉渲染、检查 DOM 结构、解析无障碍树；OpenAI 的 ChatGPT Atlas 发布者文档也说明，ChatGPT Agent in Atlas 会使用 ARIA 标签、角色和状态来理解页面结构与交互元素。这意味着，语义化 HTML 加上规范的 ARIA，不再只是无障碍合规问题，也逐渐成为智能体能否正确读懂并操作页面的重要前提。

尤其当页面涉及表单提交、预约、询价、筛选、下单、配置选择等需要智能体代用户操作的场景时，这一步的价值会越来越高。需要注意的是，ARIA 不是替代 HTML 语义结构的万能补丁：能用原生 <button>、<label>、<select>、<fieldset> 表达清楚的地方，应优先使用原生语义；ARIA 应用于补充语义不足，而不是覆盖或伪造语义。

相关策略： 策略 06（语义块组织）、策略 15（Schema.org 与 JSON-LD）

动手练习

检查一个页面的 H1、H2、段落、列表与表格是否表达真实结构，而不只是视觉大小。

完成后，记录你改了什么、依据是什么、还有哪些条件没有验证。

GEOBOK · 专注GEO · 让你的内容成为 AI 的首选答案