对WHATWG规范中nav元素示例的困惑:为何部分链接未用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
相关产品推荐
相关产品推荐

