Html 嵌套 HTML5 部分标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7041283/
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
Nesting HTML5 section tags
提问by styler
Is this a correct way to use the <section>tag?
这是使用<section>标签的正确方法吗？
<section id="container">
<section id="outer">
<section id="inner">
</section>
</section>
</section>
I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
我正在尝试确定是否应该只使用一个部分 ID，而将其他两个部分保留为 div？
回答by Paul
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
如果您只是使用这些元素将事物放置在某个位置/样式的事物中，那么您可能应该使用 div。
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
部分实际上是用于将属于一起的内容分组-您真的不应该有一个没有标题（H1 或类似）元素来描述该部分包含的内容的部分......我认为过去有一些人犯过类似的错误：
http://html5doctor.com/the-section-element/
http://html5doctor.com/the-section-element/
From the spec:
从规范：
NOTE:The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
注意：section 元素不是通用的容器元素。当需要一个元素用于样式目的或方便脚本编写时，鼓励作者使用 div 元素代替。一般规则是，仅当元素的内容将在文档的大纲中明确列出时，section 元素才是合适的。
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
话虽如此，嵌套部分元素是完全可以接受的。也许是这样的：
<section>
<h1>Portishead</h1>
<p>Portishead are a cool band from Bristol</p>
<section>
<h1>Dummy (album)</h1>
<p>some info....</p>
<img src="..." />
</section>
<section>
<h1>Portishead (album)</h1>
<p>some other info info....</p>
<img src="..." />
</section>
</section>
回答by zzzzBov
Short answer: The code as you've provided is not semantically valid.
简短回答：您提供的代码在语义上无效。
Long answer:
长答案：
sectionelements are meant to mark up sectionsof content. Each section of content (i.e. Introduction, Abstract, content, conclusion) could have subsections.
section元素旨在标记内容的各个部分。内容的每个部分（即介绍、摘要、内容、结论）都可以有小节。
If you're using those elements for structural purpose, you should be using divelements instead. They are semantically meaningless.
如果您将这些元素用于结构目的，则应该使用div元素。它们在语义上没有意义。
This would be more semantic:
这将更具语义：
<section id="introduction">
<div id="outer">
<div id="inner">
Some content
</div>
</div>
</section>
This would be a semantic way of marking up nested sections:
这将是标记嵌套部分的语义方式：
<section id="content">
<h1>Fizz Buzz</h1>
<section id="chapter-1">
<h1>Foo bar baz</h1>
...
</section>
<section id="chapter-2">
<h1>Lorem ipsum dolor</h1>
...
</section>
....
</section>
回答by Jerry Schrader
HTML5 also allows for setups such as:
HTML5 还允许设置，例如：
<section>
<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>
</section>
multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.
在同一页面上多次，因此您不会只有一个标题，它比这更深入，但值得一试。
Check out the http://gsnedders.html5.org/outliner/
回答by Ian Svoboda
My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable, however you need to just make sure it makes sense to do so.
我个人的建议是在创建 HTML5 布局时尽可能多地利用语义结构。正如其他海报所指出的，嵌套部分元素是完全可以接受的，但是您只需要确保这样做是有意义的。
I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)
我个人使用了一些模式，这些模式是根据我在过去一年左右的时间里所做的一些研究而组合在一起的。使用嵌套部分元素的最常见情况是为文档的主要内容提供 ARIA 角色（参见下面的“站点布局”示例）
Note: assumes body/html elements are present, etc
注意：假设存在 body/html 元素等
Site Layout
场地布局
<header class="header" role="banner">
....
</header>
<!-- used once per page, implies role="main" -->
<main>
<!-- declares page content to be a document and not a web app -->
<section id="wrapper" role="document">
<section class="hero">
....
</section>
....
<section class="content">
</section>
</section>
</main>
<footer class="footer" role="footer">
....
</footer>
Single-Page Content Layout
单页内容布局
Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases
注意：此布局适用于具有单数/主题/对象的页面，并不适合所有用例
<article>
<header>
<h1>Page Headline/Title</h1>
</header>
<section class="page-content">
....
</section>
<!-- if this is a post or something with metadata/authorship info... -->
<footer>
....
</footer>
</article>
I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (e.g. easy CSS scoping).
我使用 shell 页眉/页脚元素上的类名标签以及地标角色来确保我始终可以将它们与页面中的其他页眉/页脚元素区分开来（例如简单的 CSS 范围）。
References
参考
role="document" https://www.w3.org/TR/wai-aria/roles#document
A region containing related information that is declared as document content, as opposed to a web application.
"Why the
<main>element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.
"W3.org/Wiki explanation of nesting
<section>elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elementThe section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary. The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.
role="document" https://www.w3.org/TR/wai-aria/roles#document
一个包含相关信息的区域，被声明为文档内容，而不是 Web 应用程序。
“为什么
<main>元素不需要角色属性”：https: //www.w3.org/TR/2012/WD-html-main-element-20121217/main 元素使用 id 值（例如“content”和“main”）规范了识别文档主要内容部分的常见做法。它还定义了一个 HTML 元素，该元素体现了 WAI-ARIA 地标 role=main 的语义和功能。
“W3.org/Wiki 对嵌套
<section>元素的解释” - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elementsection 元素是具有相关主题的文档内容的容器，表示围绕一般概念分组的文档部分。section 元素中的所有内容都是相关的。如有必要，也可以嵌套节元素。section 元素是一个通用的语义元素，可用于将文档的各个部分组合成以某种方式相关的离散单元。例如，section 元素可以在文档的大纲内创建项目，或者将页面内容分成相关的部分（如简介），然后是有关该主题的一些背景信息。
回答by cornishninja
An updated method (as far as I understand it) could be something like this:
更新的方法（据我所知）可能是这样的：
<main id="content">
<div id="inner-wrapper">
<section>
<h1>Section Title</h1>
...
</section>
<section>
<h1>Section Title</h1>
...
</section>
</div>
</main>
main {
width: 100%;
...
...
}
#inner_wrapper {
max-width: 80%;
margin: 0 auto;
}
See: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/or http://html5doctor.com/the-main-element/for more info.
请参阅：http://www.w3.org/TR/html-main-element/、http://www.sitepoint.com/html5-main-element/或http://html5doctor.com/the-main-元素/了解更多信息。
