带有全局导航、侧边栏、页脚的网站能否实现正确标题层级大纲？

作为长期关注无障碍和HTML规范的开发者，我可以明确告诉你：完全没问题——而且这恰恰是无障碍友好设计的核心要求之一。我结合自己做项目的经验，给你拆解下具体怎么落地：

核心原则：主内容优先，辅助内容不抢层级 #

传统标题层级的核心是内容逻辑的优先级，而不是视觉位置。所以我们要先锚定主内容区的层级，再处理导航、侧边栏、页脚这些辅助区块：

1. 主内容区：从唯一的<h1>开始 #

每个页面只能有一个<h1>，用来定义整个页面的核心主题（比如博客文章标题、产品详情页的产品名称）。之后主内容里的子章节用<h2>，子子章节用<h3>，以此类推，绝对不要跳级（比如从<h1>直接跳到<h3>）。

2. 全局导航：用一个标题包裹整个导航区块 #

导航是功能型辅助内容，不是页面的核心章节。正确的做法是用<nav>标签包裹整个导航，然后给导航加一个<h2>作为区块标题（比如“主导航”，如果视觉上不需要显示，可以用CSS隐藏，但要保证屏幕阅读器能读到）。导航里的菜单和子菜单用<ul>/<li>嵌套，不要用标题层级来区分——标题是用来定义内容章节的，不是用来做菜单样式的。

3. 侧边栏：根据内容类型选择合适的标题层级 #

如果侧边栏是“相关推荐”“文档目录”这类辅助内容，用<h2>作为侧边栏的区块标题即可，里面的内容用列表展示；如果侧边栏里有独立的子章节（比如“作者简介”下面还有“获奖经历”），可以用<h3>作为子章节标题，只要保证层级逻辑连贯就行。

4. 页脚：每个独立区块用对应层级的标题 #

页脚里的“联系我们”“隐私政策”“版权声明”等独立区块，每个区块可以用<h2>作为标题；如果页脚内容比较简洁，用<h3>也没问题，但要保证整个页面的层级逻辑统一，不要混乱。

实际代码示例 #

给你看一个符合规范的页面结构，你可以用W3C大纲工具验证下：

<body>
  <!-- 全局导航 -->
  <nav>
    <h2>主导航</h2>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/blog">博客</a>
        <ul>
          <li><a href="/blog/latest">最新文章</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <!-- 主内容区（核心） -->
  <main>
    <h1>2024年无障碍设计最佳实践指南</h1>
    <h2>标题层级对无障碍的影响</h2>
    <p>屏幕阅读器用户依赖标题层级快速浏览页面内容...</p>
    <h3>常见的标题层级误区</h3>
    <p>比如跳过层级、用标题控制视觉样式...</p>
    <h2>如何验证标题大纲</h2>
    <p>使用W3C验证工具或屏幕阅读器检查...</p>
  </main>

  <!-- 侧边栏 -->
  <aside>
    <h2>相关资源</h2>
    <ul>
      <li><a href="/guides/accessibility">无障碍入门指南</a></li>
      <li><a href="/tools/outline-checker">大纲在线检查工具</a></li>
    </ul>
    <h3>作者简介</h3>
    <p>专注无障碍设计的前端开发者...</p>
  </aside>

  <!-- 页脚 -->
  <footer>
    <h2>关于我们</h2>
    <p>致力于推广无障碍Web设计...</p>
    <h2>法律条款</h2>
    <ul>
      <li><a href="/privacy">隐私政策</a></li>
      <li><a href="/terms">服务条款</a></li>
    </ul>
  </footer>
</body>

常见误区避坑 #

• 不要为了视觉样式乱用标题：视觉大小用CSS控制，标题层级只代表内容逻辑。
• 不要给导航的每个菜单项加标题：导航是一个整体区块，一个<h2>就足够。
• 不要跳过标题层级：比如<h1>之后直接用<h3>，这会让屏幕阅读器用户无法理解内容结构。

只要遵循这些原则，带全局导航、侧边栏和页脚的网站完全能实现逻辑清晰、符合规范的传统标题层级大纲——我之前给多个无障碍相关项目做过类似的结构，用W3C大纲工具验证都能得到完美的结果。

内容的提问来源于stack exchange，提问作者noelno