main、nav、article、aside：目录站的 HTML 语义标签到底该怎么分

关于语义标签对 SEO 有没有用，谷歌的表态一直很一致：不把它当排名因素。Mueller 说过类似的话——没有 h1 或者五个 h1 的页面都能排好。

这不代表语义标签没价值。它影响的是另外三件事：辅助技术能不能读懂、浏览器和阅读器能不能定位到区块、以及你这个页面半年后还改不改得动。对一个几百个页面、结构高度重复的目录站来说，第三点可能最重要。

图片来源：网络，版权归原作者所有，侵权请联系删除

四个标签的边界

标签	含义	目录站里的位置
<main>	页面主体内容，一页只能有一个	包住分类标题、条目列表、分页
<nav>	主要的导航链接区块	顶部主导航、面包屑、侧边分类树、分页
<article>	可以独立分发的内容单元	单个条目卡片（有独立详情页时）
<aside>	与主体相关但可以独立存在的内容	侧边栏的热门排行、相关分类、广告位

几个容易搞错的地方：

• main 一页只有一个，且不能被 article、aside、nav、header、footer 包住。它是页面层级的，不是「主要内容那块」的随便一个容器。
• nav 不是所有链接集合都叫导航。页脚那一长串友情链接到底算不算，要看它是不是这个站的主要导航手段。通常页脚用 footer 就够了，不必再套 nav；但如果是「全站分类入口」性质的页脚，套一个 nav 并加 aria-label 区分开是合理的。
• 多个 nav 要加 aria-label。一页有三个 nav（顶部、面包屑、分页），屏幕阅读器用户听到的会是三个「导航」，分不清。给每个都写清楚：aria-label="面包屑"、aria-label="分页"。
• article 强调「可独立分发」。目录站里每个条目卡片都有独立详情页，套 article 是恰当的。如果只是列表里一个没独立页面的小项，用 li 就够了。

header 和 footer 的两层含义

这两个标签容易混淆的点在于：它们既可以是页面级的，也可以是区块级的。

页面级的 <header> 放在 body 下，装 logo、站名、主导航。区块级的 <header> 放在 article 里面，装这个条目的标题、收录时间这类信息——这是完全合规的用法，一个页面里可以有多个。

同理，article 内部的 <footer> 可以放这条目的标签、更新时间、出处。它不表示「页面底部」。

section 什么时候才该用

<section> 被滥用得最厉害。判断标准只有一条：它有没有一个标题。规范里的定义是「具有主题性分组的内容，通常带标题」。

如果一个区块只是为了布局或者加样式，用 <div>。如果想用 section 但想不出标题该写什么，那也用 div。

目录站的典型用法：分类页里「编辑推荐」「最新收录」「同类站点」这三个区块，每个都有自己的标题，套 section 加 h2 是对的。

标题层级的实际情况

有个历史遗留要说清楚：HTML5 曾经设计过一套「大纲算法」，允许每个 section 内部的标题从 h1 重新开始，由浏览器算出最终层级。这套算法从来没有在任何主流浏览器里实现过，后来已经从规范中删除。

所以现在唯一可靠的做法还是：手工维护一条从 h1 到 h6 的完整层级，不要靠 section 嵌套去自动推导。

具体到目录站的条目页：

• h1：站点名称（就是这个条目的主标题）
• h2：主要区块，如「站点简介」「收录信息」「相似站点」
• h3：区块内的细分，比如「收录信息」下的「基本信息」「外链信息」

视觉字号和语义层级是两件事。h3 在页面上可以比 h2 显示得大，用 CSS 控制就好；但语义层级不能跳——不要 h2 下面直接 h4。

无障碍之外的实际收益

语义标签带来几个顺带的好处：

• 阅读器和浏览器的阅读模式靠这些标签提取正文。标签分得清楚，第三方阅读器抓出来的内容才是对的。
• 跳转链接（skip link）依赖 main 的存在。「跳到主要内容」这个链接指向 #main，没有 main 就做不了。
• 代码可读性。一个全是 div 加 class 的模板，半年后你要改「那个侧边栏」，得先搜一遍 class 名。写成 aside 的话，一眼就知道。

目录站的一套模板骨架

<body>
  <header>
    <nav aria-label="主导航">...</nav>
  </header>
  <nav aria-label="面包屑">...</nav>
  <main>
    <h1>设计工具</h1>
    <section>
      <h2>编辑推荐</h2>
      <article>
        <header><h3>站点名</h3></header>
        <p>简介</p>
        <footer>标签、更新时间</footer>
      </article>
    </section>
    <nav aria-label="分页">...</nav>
  </main>
  <aside>热门排行、相关分类</aside>
  <footer>...</footer>
</body>

把这套骨架固定下来，全站几百个页面共用一套结构，后面加功能、改样式、做无障碍改造都会轻松很多。