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