Html HTML5 - 页眉、标头、品牌、滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5135057/
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 - header, masthead, branding, slider
提问by GregB
I am trying to tighten up the HTML5 on a website I am building. The nav and logo need to be in the top bar, and I am including a slider, quotes and some buttons. I am not sure if the masthead really should include the quote or the buttons.
我正在尝试在我正在构建的网站上收紧 HTML5。导航和徽标需要在顶部栏中，我包括一个滑块、引号和一些按钮。我不确定刊头是否真的应该包含引号或按钮。
If not, would I really need a masthead and branding section? It seems to make sense semantically to include both.
如果没有，我真的需要刊头和品牌部分吗？将两者都包括在内似乎在语义上是有意义的。
I have quite a few divs - should these be replaced with section?
我有很多 div - 这些应该用部分替换吗？
<header>
<section id="masthead">
<div id="branding" role="banner">
<div class="topbar">
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>
<nav role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<ul id="dropmenu" class="menu">
<li></li>
<li></li>
</ul>
</nav><!-- nav -->
</div><!-- topbar -->
<div id="slider">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div><!-- slider -->
</div><!-- #branding -->
</section><!-- #masthead -->
<div class="home_header">
<h3>"Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect."</h3>
</div><!--home header-->
<div class="home_header_right">
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
</div>
</header><!-- Header -->
回答by Myles Gray
Basics:
基本：
The Sectiontag should be used to divide up content of different sectionsof text or prose, not used to divide up different sections of the page.
该Section标签应该用来划分不同的内容部分文字或散文的，不是用来划分页面的不同部分。
Thus, If you have sections of text with headings then the section tags would wrap these.
因此，如果您有带有标题的文本部分，则部分标签将包装这些。
If you are using the divs for layout then they don't need the new semantic tags, the standard div tag for styling purposes is fine, however if you are containing text/headings that have relevance to the page a sectiontag would be used here.
如果您使用divs 进行布局，那么它们不需要新的语义标签，用于样式目的的标准 div 标签就可以了，但是如果您包含与页面相关的文本/标题，section则会在此处使用标签。
Comments on your code:
对您的代码的评论：
You are also not using the headerelement semantically, the header element should be used to outline headers on information, not sections of the page that you regard as the headerfor this you can just use a div.
您也没有在header语义上使用该元素，header 元素应该用于概述信息的标题，而不是您认为的页面部分，header为此您可以只使用div.
Sections and headers:
部分和标题：
You could for example make this into a header:
例如，您可以将其设为标题：
<div class="home_header">
<h3>"Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect."</h3>
</div><!--home header-->
To this:
对此：
<header class="home_header">
<h3>"Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect."</h3>
</header><!--home header-->
But using it to outline the entire branding section is wrong, it should just use a wrapper div.
但是使用它来概述整个品牌部分是错误的，它应该只使用 wrapper div。
<header>give us some great added semantic value in order to describe the head of a section.
<header>给我们一些很好的附加语义价值来描述一个部分的头部。
Hgroup and headers:
Hgroup 和标头：
As for this:
至于这个：
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>
You should use the headerand hgroupelements to display this information semantically:
您应该使用header和hgroup元素在语义上显示此信息：
<header>
<hgroup>
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<h2 id="site-description">Enterprise Solutions</h2>
</hgroup>
</header>
To round up:
要四舍五入：
Your code at the end should look like this:
你最后的代码应该是这样的：
<div id="top-wrap">
<div id="masthead">
<div id="branding" role="banner">
<div class="topbar">
<header>
<hgroup>
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></h1>
<h2 id="site-description">Enterprise Solutions</h2>
</hgroup>
</header>
<nav role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<ul id="dropmenu" class="menu">
<li></li>
<li></li>
</ul>
</nav><!-- nav -->
</div><!-- topbar -->
<div id="slider">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</div><!-- slider -->
</div><!-- #branding -->
</div><!-- #masthead -->
<header class="home_header">
<h3>"Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect."</h3>
</header><!--home header-->
<div class="home_header_right">
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
</div>
Just because the new tags are there doesn't mean you have to fit every one of them into your code (It is hard not to do this or think "shouldn't this be a sectionbecause blah blah blah" I was the same). Hope this helps!
仅仅因为有新标签并不意味着您必须将它们中的每一个都放入您的代码中（很难不这样做或认为“这不应该是section因为等等等等”我是一样的）。希望这可以帮助！
References:
参考：
回答by Adam
I would like to remedy some of Myles's assumptions which appears incorrect to me.
我想纠正一些Myles的假设，这些假设在我看来是不正确的。
At first, there is no general rule how a webpage content should be structured. New HTML5 semantic elements just give an author a tool to mark up the parts the author consider related, (un)important, descriptive, carrying some specific meaning and so forth.
首先，网页内容的结构没有一般规则。新的 HTML5 语义元素只是给作者一个工具来标记作者认为相关的部分，（不）重要的，描述性的，带有一些特定含义等等。
Your choice of elements should be based more on whether a specific content is wrapped because of styling/scripting purposes (<div>) or semantic/thematic separation purposes (<section>, <article>, <nav>and other new HTML5 sectioning contentelements). In many cases sectioning content elements (mostly <section>) will replace now frequently used <div>which has a very little semantic meaning. <section>element can be used in place of chapters, but also asa page layout separation element if the parts wrapped in are related together (and ideally accompanied with an heading, but not necessarily).
您的元素的选择应一个特定的内容是否由于定型/脚本目的（包裹更基于<div>）或语义/专题分离目的（<section>，<article>，<nav>和其他新的HTML5切片内容元素）。在许多情况下，分段内容元素（主要是<section>）将取代现在经常使用的<div>具有很少语义意义的内容。<section>元素可以用来代替章节，也可以作为页面布局分隔元素，如果包裹在其中的部分相关联（理想情况下带有标题，但不一定）。
<header>element can be used, what's more, is recommended forpage headers containing logos, search bar, navigation and maybe sliders if you think they convey an important introductory information. Though there is one important rule: <header>(the same applies to <footer>) can't contain <header>or <footer>as descendants, but still can contain <section>s, <nav>s, <h1>-<h6>etc. An appropriate use of <header>is when more introductory and navigational "header" information is stated for a section (e.g. author name and post date in the case of header of an article). However, when there is just <h1>immediately followed by <p>, there is no need for encapsulating the standalone <h1>in <header>("The header element represents a groupof introductory or navigational aids"), but it can contribute a bit to readability and unity of the code.
<header>元素可以使用，更重要的是，建议用于包含徽标、搜索栏、导航和滑块的页眉，如果您认为它们传达了重要的介绍性信息。尽管有一个重要规则：（<header>同样适用于<footer>）不能包含<header>或<footer>作为后代，但仍然可以包含<section>s、<nav>s<h1>-<h6>等。 适当的用法<header>是当为一个部分声明更多介绍性和导航“标题”信息时（例如，文章标题中的作者姓名和发布日期）。但是，当<h1>紧接其后的是 时<p>，则无需将独立封装<h1>在<header>("头元素表示一组介绍性或导航性的帮助”），但它可以对代码的可读性和统一性做出一些贡献。
Here is my draft for HTML5 structure of your website. Consider it rather as an inspiration - an author should know best how to assign meaning and structure to his document.
这是我的网站 HTML5 结构草稿。将其视为一种灵感 - 作者应该最了解如何为他的文档分配含义和结构。
<body>
<header>
<div id="masthead"><!-- // this wrapper <div> is needless -->
<div id="branding" role="banner">
<div id="topbar" role="banner">
<h1 id="site-title"><a href="#"><img src="images/logo.jpg" width="180" height="65" alt="Xmedia"></a></h1>
<p id="site-description">Enterprise Solutions</p>
<nav role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<ul id="dropmenu" class="menu">
<li></li>
<li></li>
</ul>
</nav>
</div><!-- #topbar -->
<section id="slider">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
</section><!-- #slider -->
</div><!-- #branding -->
</div><!-- #masthead -->
<!-- // ? The following part ? still introduces the page (actually the whole brand) and includes some important quick links, I would leave that in <header> -->
<section id="home_header"><!-- // in some cases, <aside> could be used instead, but here this section conveys one of the main messages of the page – a description of the brand -->
<blockquote>
Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.
</blockquote>
<footer>
<p class="signature">-John Selena CEO xMedia</p>
</footer>
</section><!-- #home header -->
<section id="home_header_right"><!-- // could be <aside> too, but I guess the links are not expendable and form a part of the major navigation-->
<nav role="navigation">
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
<a href="#"><img src="" alt="image" width="154" height="50" /></a>
<nav>
</section><!-- #home_header_right -->
<!-- // ? ------------------ ? -->
</header>
<section id="main">
...
</section><!-- #main -->
<footer>
...
</footer>
</body>
If you think about it, even various examples in W3C specification don't strictly stick with one rule for describing similar document examples - in fact, it gives a lot of freedom to the author. A good way of thinking when choosing appropriate elements is to consider the resultant heading/section structure of the document and the ability of the document to serve the relevant content upon a request of e.g. screen readers.
如果你仔细想想，即使 W3C 规范中的各种示例也没有严格遵守描述类似文档示例的规则——事实上，它给了作者很大的自由。在选择合适的元素时，一个好的思考方式是考虑文档的最终标题/部分结构以及文档根据屏幕阅读器等请求提供相关内容的能力。
EDIT:I have removed the <hgroup>element as it creates more harm than good(read the comments there – this oneis the most substantiated and convincing to me – or check out this summary of problems regarding <hgroup>) and is likely to be finally dropped from the specification.
编辑：我已经删除了该<hgroup>元素，因为它弊大于利（阅读那里的评论——这是最有根据的，对我来说最有说服力的——或者查看有关问题的总结<hgroup>），并且很可能最终从规范中删除.
For more information, I have found a great article about html5 structureand about headingsthat I think have caught the meaning of the specification quite accurately (also take a look at other related articles on this blog). Anyway, for up-to-date and the best understanding of sectioning the content I recommend to read through this part of W3C specificationand examples below specification of particular elements.
有关更多信息，我找到了一篇关于 html5 结构和标题的很棒的文章，我认为这些文章已经非常准确地抓住了规范的含义（也可以查看此博客上的其他相关文章）。无论如何，为了获得最新的和对内容的最佳理解，我建议阅读W3C 规范的这一部分以及特定元素规范下面的示例。
