`至`

`标题层级、为``添加`alt`、为`

`提供`cite`、用标准`

`/`

`包裹列表等）来提前向浏览器“声明”内容意图；同时明确指出常见误区，如滥用`
`、跳级使用标题标签、用CSS伪造语义元素或隐藏干扰内容等，都会导致阅读器放弃结构解析、退化为纯文本提取，强调真正可靠的阅读模式适配必须从HTML源头剔除广告、导航、动态注入等内容，让结构本身干净、准确、自解释。



怎么用语义化标签剥离广告和导航栏

阅读模式的本质不是隐藏元素，而是提前用结构表达“哪部分是正文”。浏览器阅读模式（如 Safari Reader、Firefox Reader View）依赖

、

、

这类语义标签识别主体内容，而不是靠 JS 动态删 DOM。

常见错误是把所有内容塞进

，再靠 class 名（比如 class="content"）试图“告诉”浏览器哪是正文——它不认这个。

• 正文必须包裹在
  或

  内，且该标签不能嵌套在

  、
• 只放标题、作者、发布时间；
• 避免在
  内部混用

为什么

到

的层级比样式更重要

阅读器靠标题层级推断内容结构，不是靠 font-size。一个没

的页面，或

直接出现在 下（跳过

），Safari Reader 会直接放弃解析，回退到“仅提取纯文本”模式，丢失段落和列表语义。

实操建议：

• 每个页面有且仅有一个

  ，放在

  最顶部，对应文章主标题

• 小节用

  ，子小节用

  ，严格递进；不要为视觉统一而用 CSS 强行让

  看起来像

• 避免用
  + CSS 模拟标题——阅读器看不见它

图片、引用、列表怎么写才不被阅读器砍掉

阅读器对非文本元素很敏感：一张没 alt 的图、一个没 cite 的

、一个没包裹在

/
里的列表项，都可能被整块忽略或降级为纯文字。

关键点：

• 必须带 alt 属性，哪怕只是空字符串 alt=""（表示装饰图）；带 role="presentation" 的图会被跳过

• 要配 cite 属性（URL）或内部

• 列表必须用
  或
  包裹，
  1. 不能直接挂在
     下；用 display: list-item 伪造的“列表”无效

  哪些 CSS 会悄悄破坏阅读模式识别

  阅读器不是浏览器渲染引擎，它只做轻量 DOM 分析，不执行 CSS。但某些 CSS 会干扰其内容提取逻辑，比如：

  • display: none 或 visibility: hidden 的元素仍参与结构分析，可能污染正文判断——应直接从 HTML 中移除非正文内容，而非隐藏
  • 用 position: absolute 把侧边栏“挪出视口”，阅读器仍会把它当正文一部分抓取
  • font-size: 0 或 color: transparent 配合伪元素插入文字？阅读器看不到伪元素，也读不到透明文字

  真正干净的阅读结构，靠的是 HTML 本身剔除干扰，不是靠 CSS 掩盖。

  最常被忽略的一点：阅读器不解析