阅读模式触发依赖HTML语义结构而非CSS或JS

很多同学对阅读模式存在误解，以为它是靠JavaScript粗暴地隐藏广告、提取正文。实际上，这个理解方向是错的。浏览器阅读模式真正的工作原理，是通过HTML的结构——在页面加载完成之前，就“提前告诉”它哪部分是核心内容。换句话说，结构不对，CSS写得再漂亮、JS调得再精巧，全都无用。

为什么Safari/Firefox/Edge有时不显示阅读模式图标

根本原因不是页面太短，也不是里面带了视频文件，而是语义结构要么缺失、要么相互冲突。阅读器（比如Safari的Reader、Firefox的Readability）会扫描整个DOM树，一旦发现下面任意一种情况，直接放弃解析：

• 或
  缺失，或者被嵌套在
  、、内部
• 页面压根没有
  ，又或者
  直接出现在下，前面没有
  统领
• 正文内容分散在多个同级
  中，缺乏一个统一的包裹容器
• 没有alt属性，
  缺少cite，列表项没有用
  或
  包裹

必须写的三个标签：

、

、

这三点不是“推荐写法”，而是阅读器识别正文的硬性信号。它们共同构成了最小可触发结构：

• 必须存在且唯一，不能嵌套在
  、、中；它应该直接包含子元素
  或

• 必须有且仅有一个，放在
  内最顶部，对应文章主标题；不能用
  加CSS来替代
• 用于划分小节，每个
  内建议以
  开头；子小节用
  ，禁止跳级（比如
  后面直接跟
  ）

一个最小有效结构的示例：

  
如何写好HTML阅读模式
  

    
标题层级必须严格
    
…正文内容…
  
  

    
图片和引用要带语义
    
    
Readability relies on structure, not style.
  

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

阅读器对非文本节点极其敏感——不是“渲染不出来”，而是“直接整块丢弃”。关键不在于内容在页面上是否可见，而在于是否提供了机器可读的语义信息：

• 必须带alt，哪怕只是一个空字符串alt=""；如果是装饰图，就显式写alt=""，千万别省略

• 必须包含cite属性（可以放URL或作者名），而且内部文字必须用
  包裹，不能直接放纯文本
• 列表必须使用
  或
  ，每个条目必须是
• ；别用
  加::before来模拟项目符号

• 加上是一个更安全的组合，比裸写更容易被保留

Chrome怎么启用阅读模式（以及为什么常失败）

Chrome原生并不支持阅读模式，需要手动开启实验功能：在地址栏输入chrome://flags/#reader-mode，将其设为Enabled，然后重启浏览器。但即便开启了这个功能，它还是经常失效，原因很实际：

• 该功能依赖于Blink引擎的DOM分析，对动态渲染场景（比如React/Vue SSR之后的hydrate）支持较弱，往往在JS执行完毕之前就已经完成了判断
• 如果页面用display: none或visibility: hidden隐藏了正文的初始内容，阅读器会直接跳过这个节点
• 第三方脚本（比如广告SDK、统计代码）插入的
  ，如果和正文处于同一层级且缺乏语义，可能会干扰阅读器的结构权重计算

  真正可靠的做法，不是坐等Chrome自动识别，而是从源头把结构写对。

  、

  、

  这三样写对了，Safari和Firefox几乎100%触发阅读模式，Chrome开启flag之后成功率也会大幅提升。

  最容易被忽略的一点：阅读模式不是什么“样式开关”，它是基于DOM结构的静态分析结果。改完HTML之后，不要只看浏览器渲染效果，务必用开发者工具检查一下——

  是否真的包裹了全部正文？

  是否在它内部？所有是否都有了alt？这些才是决定阅读模式能否真正触发的硬条件。