在“Top 10 Tips”类文章中，将编号标题（如“1. First tip name”）实现为 中嵌套 的 是完全符合 WCAG 1.3.1（信息与关系）的语义化做法，既保障屏幕阅读器正确解析结构，也不影响 SEO 爬取逻辑。

在“top 10 tips”类文章中，将编号标题（如“1. first tip name”）实现为 `

` 中嵌套 `

` 的 `

1. ` 是完全符合 wcag 1.3.1（信息与关系）的语义化做法，既保障屏幕阅读器正确解析结构，也不影响 seo 爬取逻辑。

   在构建结构化内容时，视觉呈现（如带数字的标题行）必须与底层 HTML 语义保持一致。WCAG 明确要求：若内容在逻辑上构成有序序列（例如排名、步骤、优先级列表），就必须使用

   元素进行标记——仅靠 CSS 生成数字（如 counter-reset）或纯文本编号（如 "1. "）无法传达顺序关系，将导致屏幕阅读器用户丢失关键上下文。

   将标题嵌入

   1. 内部不仅合法，而且推荐。HTML5 规范允许
   2. 包含流内容（flow content），而

      属于此类；现代辅助技术（如 NVDA、VoiceOver、JAWS）能准确识别

      1. ...

         ...

      的层级结构：列表项作为容器，标题作为该条目的主标识，正文内容为其附属信息。这不会“破坏文档大纲”——相反，它构建了清晰的嵌套语义：

      表示整体序列，每个
      1. 是独立条目，其内部

         则自然成为该条目的层级锚点。

         以下为推荐实现方式：

         <ol>
         <li>
             <h2>First tip name</h2>
             <p>Blah blah — detailed explanation of the first tip.</p>
           </li>
           <li>
             <h2>Second tip name</h2>
             <p>Blah blah — detailed explanation of the second tip.</p>
           </li>
           <!-- 更多项... -->
         </ol>

         ✅ 优势说明：

         • 无障碍友好：屏幕阅读器会依次朗读“1. First tip name，级别2”，随后播报段落内容，逻辑连贯；
         • SEO 健康：搜索引擎将

           正确识别为页面内二级标题，且因位于

         • 中，天然具备上下文相关性（如“Tip #1 in Top 10 Tips”），反而增强语义权重；
         • 样式灵活：可通过 CSS 精确控制编号样式（如 ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; }），无需牺牲语义。

         ⚠️ 注意事项：

         • 避免在同一个
         • 中混用多个同级标题（如

           +

           ），除非存在明确的子主题嵌套需求；

   3. 若每条提示包含多级子内容（如步骤、要点），应在
   4. 内部使用
      或

      组织，并为子标题选用恰当层级（如

      ），而非提升至

      ；

      不要为规避“大纲混乱”而改用

      模拟列表——这会直接违反 WCAG 1.3.1，造成严重可访问性缺陷。

      总结而言，

      >
      1. >

         是兼顾语义、无障碍与 SEO 的黄金组合。内容创作者追求的“编号标题”效果，正应通过此结构实现——形式服从语义，才是现代 Web 可访问性的核心实践。