Html HTML5 导航标签正确使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5178761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 nav tag correct usage
提问by Tom Gullen
<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>
Is it more semantically correct to have a <nav>around both these <ul>individually, or should one nav wrap both?
分别<nav>在这两个周围使用 a 是否在语义上更正确<ul>，还是应该一个导航将两者都包装起来？
Also would it be appropriate to use the nav tag to wrap around my footer menu items?
使用导航标签环绕我的页脚菜单项是否合适？
回答by Martin Jespersen
To quote the specs:
引用规格：
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
nav 元素表示链接到其他页面或页面内部分的页面部分：带有导航链接的部分。
并非页面上的所有链接组都需要位于导航元素中——只有由主要导航块组成的部分才适合导航元素。特别是，页脚通常包含指向站点各个页面（例如服务条款、主页和版权页面）的链接的简短列表。对于这种情况，单独的页脚元素就足够了，没有导航元素。
So feel free to wrap both in a single nav tag. Don't wrap the footer but use the footer tag here :)
因此，请随意将两者都包装在一个导航标签中。不要包装页脚，而是在此处使用页脚标签:)
Read the specs here: http://dev.w3.org/html5/spec/Overview.html#the-nav-element
在此处阅读规范：http: //dev.w3.org/html5/spec/Overview.html#the-nav-element
回答by Roger F. Gay
The search for the reason for nav has been going on for years now. Just google around right now and you'll find dates on the question that go back to its introduction. The one actual use for nav that I've found so far is to associate it with style in css. Before you say, there are better ways to do that, consider that programmers aren't the only people doing page markup. To a commercial artist who designs web pages for a living, it's better to have one simple tag than to think about classes and sub-classes. If you've followed the discussion among various groups for a while, you would have a feeling that I could very well be right about this. Many page developers are all about style - they're artists, not programmers.
寻找导航的原因已经进行了多年。现在就谷歌一下，你会发现这个问题的日期可以追溯到它的介绍。到目前为止，我发现导航的一个实际用途是将其与 css 中的样式相关联。在你说之前，有更好的方法来做到这一点，考虑到程序员并不是唯一做页面标记的人。对于以设计网页为生的商业艺术家来说，与其考虑类和子类，不如拥有一个简单的标签。如果你已经关注了一段时间内不同群体之间的讨论，你会觉得我很可能是对的。许多页面开发人员都是关于风格的——他们是艺术家，而不是程序员。
A bit more confirmation: If you look at the new structural tags in HTML5, you can easily get the idea that the committee wanted well defined major elements of a page. Each major element can look and behave differently. If you want to design a typical web page, then it can be quite convenient if someone has already given names to page section tags so you can get right down to the business of styling them. Throw in a nav tag in the part of the page where you provide a navigation section. What's that, you ask? It's not one of the other already pre-defined sections like footer or sidebar. Here's a tutorial showing where the author believes the navigation section is- right where you'd expect it.
再确认一点：如果您查看 HTML5 中的新结构标签，您会很容易想到委员会想要明确定义页面的主要元素。每个主要元素的外观和行为都可能不同。如果您想设计一个典型的网页，那么如果有人已经为页面部分标签指定了名称，那么您就可以非常方便地进行样式设置。在您提供导航部分的页面部分中放入导航标签。你问那是什么？它不是其他已经预定义的部分，如页脚或侧边栏。这是一个教程，展示了作者认为导航部分的位置- 就在您期望的位置。
That's fine. If I want to build a page that's just like a million other pages, and my only concern is over making my color choices and artistic elements different from others, the whole thing is pretty routine. As a programmer, I don't always want that. I want flexibility to accomplish whatever the envisioned functionality needs in a logical and easy to use way. Would be nice if that's easier rather than harder. So, just to give a bit of contrast to show that there are two sides to this story - I lament the loss of framesets and frames in HTML5. iFrames are poor substitutes.
没关系。如果我想构建一个与其他一百万个页面一样的页面，而我唯一关心的是让我的颜色选择和艺术元素与其他页面不同，那么整个事情就很常规了。作为一名程序员，我并不总是想要那样。我希望能够以合乎逻辑且易于使用的方式灵活地完成任何预想的功能需求。如果这更容易而不是更难，那就太好了。所以，只是为了提供一点对比，以表明这个故事有两个方面 - 我为 HTML5 中框架集和框架的丢失感到遗憾。iFrame 是糟糕的替代品。
The winners who are interested in style without much concern for designable structure and functionality have always wanted to push development into css, which is not a programming language. RE: loss of frames, looks like I'll be pushed all the way back to the days when most web pages were structured by tables; except they want me to define tables in css rather than with tags in the page. They seem to be doing everything possible to block any headway on dynamic pages; allowing only full page reloads to restructure things. (Not true if you want to fade from one picture to another withing the same page structure.)
对风格感兴趣而不太关心可设计的结构和功能的获胜者一直希望将开发推向 css，它不是一种编程语言。RE：丢失帧，看起来我会被推回到大多数网页由表格构成的时代；除了他们希望我在 css 中定义表格而不是在页面中使用标签。他们似乎正在尽一切可能阻止动态页面上的任何进展；只允许整页重新加载来重构事物。（如果您想从一张图片淡入到另一张具有相同页面结构的图片，则不正确。）
Perhaps I've said a bit more than required to answer the question, but I thought it would be useful to broaden a bit into the overall context.
也许我说的比回答问题所需的要多一些，但我认为扩展到整体上下文会很有用。
回答by Ian Devlin
I'd agree with Martin. Wrap them in the one nav element.
我同意马丁。将它们包裹在一个导航元素中。
As regards the footer, yes use another nav element, as long as the elements are navigating within the site.
至于页脚，是使用另一个导航元素，只要元素在网站内导航。
