搜索引擎和读屏器真正识别起作用的语义标签极少，主要包括、、、、、、、+；其中必须且只能出现一次，是的直接子元素，作为核心内容语义锚点；代表可独立分发、索引的内容单元（如博客、评论），仅表示主题相关分组，须配及以上标题才参与结构建模。
<main></main> 必须且只能出现一次，<article></article> 和 <section></section> 不是“高级 <div>”，<code><header></header> 和 <footer></footer> 作用范围默认限于最近的章节根元素（ 或 <article></article> 等），不是全局限定。
哪些标签真被搜索引擎和读屏器识别
真正起作用的语义标签极少：<nav></nav>、<main></main>、<article></article>、<section></section>、<header></header>、<footer></footer>、<time></time>、<figure></figure>+<figcaption></figcaption>。其余多数（如 <address></address>、<aside></aside>）在旧版辅助工具中支持不稳定，或仅被部分爬虫弱解析。
常见误判：
-
<section></section>没配<h2></h2>～<h6></h6>→ 浏览器当普通容器处理，不进大纲 -
<article></article>套着整个用户列表 → 实际每条评论才该是独立<article></article> -
<time datetime="2024.3.15"></time>→datetime值格式非法，VoiceOver 无法播报日期
<main></main> 放错位置会直接破坏跳转逻辑
<main></main> 不是视觉容器，而是语义锚点。屏幕阅读器按 M 键跳转时只认第一个合法节点；嵌套在 <header></header> 或 <nav></nav> 内，等于告诉辅助工具“导航栏里藏着正文”，逻辑冲突。
必须满足：
- 是
的直接子元素（或仅嵌套在内） - 全页唯一，不能由模板组件重复注入（如 Next.js 布局 + 页面各自渲染）
- 只包裹用户真正要操作/阅读的核心内容，不含顶部 banner、侧边菜单、广告位
CI 中可用 HTML validator 检查 “Multiple main landmarks” 报错。
<section></section> 和 <article></article> 的核心区别在“可分发性”
判断依据不是长度或样式，而是能否脱离当前页面独立存在：
-
<article></article>：自带完整元信息（标题、作者、时间）、能被 RSS 抓取、邮件推送、搜索引擎索引为独立条目（如博客正文、新闻稿、用户评论） -
<section></section>：主题明确但依赖上下文，无独立语义（如文章里的“兼容性说明”“性能对比”） - 纯装饰图用
<img alt="">；功能性图片必须描述作用（如<img alt="搜索按钮图标">）
动态渲染时尤其危险：React 组件返回 <section><h3>配置项</h3>...</section>，若父级已有 <h1></h1>，<h3></h3> 就构成跳级，破坏大纲树。
最常被忽略的是标题层级连续性——它不报错，但会让 <h4></h4> 被读屏器当作新章节起点，上层内容被跳过。语义化不是加标签，是让结构可被机器准确建模。
