HTML5导航标签正确用法

时间:2011-03-03 09:22:03

标签: html5 semantic-markup nav

<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

在这两个<nav>周围单独使用<ul>或者是否应该将两者都包裹在一起,在语义上更正确吗?

还可以使用nav标签环绕我的页脚菜单项吗?

3 个答案:

答案 0 :(得分:43)

引用规格:

  

nav元素代表一个部分   链接到其他页面的页面   到页面内的部分:一节   带导航链接。

     

并非页面上的所有链接组都需要   在一个导航元素 - 只有部分   包括主要导航   块适用于导航   元件。特别是,这很常见   对于页脚有一个简短的列表   链接到网站的各个页面,例如   作为服务条款,家庭   页面和版权页面。页脚   单独的元素就足够了   没有导航元素的情况。

所以请随意将它们包装在单个导航标签中。不要包裹页脚,但在此处使用页脚标记:)

请阅读此处的规范:http://dev.w3.org/html5/spec/Overview.html#the-nav-element

答案 1 :(得分:10)

搜索导航原因已经持续多年了。现在只是谷歌,你会发现问题的日期,可以追溯到它的介绍。到目前为止,我发现导航的一个实际用途是将其与css中的样式相关联。在您说之前,有更好的方法可以做到这一点,考虑到程序员不是唯一进行页面标记的人。对于以设计网页为生的商业艺术家而言,拥有一个简单的标签比考虑课程和子课更好。如果你已经在各个小组之间进行了一段时间的讨论,那么你会觉得我很可能是对的。许多页面开发人员都关注风格 - 他们是艺术家,而不是程序员。

更多确认:如果您查看HTML5中的新结构标记,您可以轻松了解委员会需要明确定义页面的主要元素。每个主要元素的外观和行为都不同。如果您想设计一个典型的网页,那么如果有人已经为页面部分标签指定了名称,那么就可以非常方便,这样您就可以直接进行样式设计。在您提供导航部分的页面部分中输入导航标记。那是什么,你问?它不是其他已经预定义的部分,如页脚或侧边栏。 Here's a tutorial showing where the author believes the navigation section is - 就在你期望的地方。

没关系。如果我想建立一个像其他百万页一样的页面,我唯一关心的是让我的颜色选择和艺术元素与其他页面不同,那么整个过程就非常常见。作为一名程序员,我并不总是那么想。我希望能够以合理且易于使用的方式灵活地完成所设想的功能。如果这更容易而不是更难,那将会很好。所以,只是给出一点对比来表明这个故事有两个方面 - 我感叹HTML5中框架集和框架的丢失。 iFrames是糟糕的替代品。

对风格感兴趣而不太关心可设计结构和功能的获奖者一直希望将开发推向css,而css不是一种编程语言。 RE:帧丢失,看起来我会被推回到大多数网页由表格构成的日子;除了他们希望我在css中定义表而不是在页面中使用标签。他们似乎正在尽一切可能阻止动态页面上的任何进展;只允许整页重新加载来重组事物。 (如果您希望使用相同的页面结构从一张图片淡入另一张图片,则不正确。)

也许我说的不仅仅是回答这个问题所需要的,但我认为将其扩展到整体背景会更有用。

答案 2 :(得分:6)

我同意马丁的观点。将它们包裹在一个nav元素中。

关于页脚,是的,使用另一个nav元素,只要元素在站点内导航。