You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

对WHATWG规范中nav元素示例的困惑:为何部分链接未用nav包裹

关于WHATWG规范中<nav>元素示例的疑问解答

问题背景

根据WHATWG规范定义:

nav元素代表页面中链接到其他页面或页面内部部分的区段:即包含导航链接的区段

但在官方示例代码中,页面<header>和<footer>内的<p>元素都包含导航链接,却只有一处被<nav>包裹标记为导航区段,这看起来和定义冲突,对此存在疑问。

示例代码如下:

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

原因解释

核心逻辑是:nav元素并非需要包裹所有带导航链接的内容,它的作用是标记页面中「主要的、对用户浏览核心内容至关重要的导航区段」。

  • <header>里的News/Blog/Forums属于站点级的基础入口链接,这类链接通常全站通用,属于页面的基础标识类导航,并非针对当前博客内容的核心导航,因此不需要用<nav>标记。
  • <footer>里的About/隐私政策/联系我们属于辅助性链接,是站点的补充信息入口,不属于用户浏览核心内容时依赖的主要导航,所以也不需要<nav>。
  • 被<nav>包裹的部分是针对博客的核心内容导航:文章总索引、今日重点内容、成功案例,这些是用户浏览该博客时最需要的核心导航路径,因此用<nav>明确标记为导航区段。

简单来说,规范里的定义是描述<nav>的功能范围(包含导航链接的区段),但并非反向要求所有带导航链接的区段都必须用<nav>,它只用于标记那些重要的、核心的导航集合。

内容的提问来源于stack exchange,提问作者bartc

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 18:37:13