Web上有足够的关于HTML5的信息（以及stackoverflow），但现在我对“最佳实践”感到好奇 . section / headers / article之类的标签是新的，每个人对于何时/何地使用这些标签都有不同的看法 . 那么你们怎么看待以下布局和代码？
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
第7行 section 围绕整个网站？或者只是 div ？
第8行 . 每个 section 以 header 开头？
这是 div 对吗？或者这必须是 section ？
第24行 . 使用 div 拆分左/右列 .
第25行. article 标签的正确位置？
第26行 . 是否需要将 h1 -tag放入 header -tag中？
第43行 . 内容与主要文章无关，因此我认为这是 section 而不是 aside .
第44行H2没有 header
第53行. section 没有 header
第63行 . 包含所有（非相关）新闻项目
第64行 header 与h2
第65行 . 嗯， div 或 section ？或者删除此 div 并仅使用 article -tag
第105行 . 页脚:-)
16 回答
Unfortunately the answers given so far (including the most voted) are either "just" common sense, plain wrong or confusing at best. None of crucial keywords1 pop up!
我写了3个答案：
这个解释（从这里开始） .
Concrete answers to OP’s questions.
Improved detailed HTML.
要理解这里讨论的html元素的作用，你必须知道它们中的一些部分是文档 . 每个html文档都可以是sectioned according to the HTML5 outline algorithm，目的是创建一个大纲-或内容表（TOC） . 大纲通常不可见（这些日子），但是作者应该使用html，使得结果大纲反映他们的意图 .
您可以创建具有这些元素的部分，而不是其他内容：
创建（显式）子部分
<section>部分<article>个部分<nav>部分<aside>个部分创建同级部分或子部分
带有
<h*>2的未指定类型的部分（不是全部都这样做，见下文）
升级关闭当前显式（子）部分
部分可以命名为：
<h*>创建了部分名称<section|article|nav|aside>部分将由第一个<h*>命名（如果有的话）这些
<h*>是唯一不自行创建部分的部分部分还有一件事：以下上下文（即元素）创建“轮廓边界” . 它们包含的任何部分都是私有的：
文件本身
<body>带
<td>的表格单元格
<blockquote><details>，<dialog>，<fieldset>和<figure>别的
示例HTML <body> <h3>如果你想让兄弟姐妹处于最高级...... </ h3> <h3> ......你必须使用<h *> ... </ h3> <article> <的无类型部分h1> ......任何其他部分将下降</ h1> </ article> <nav> <ul> <li> <a href=...> ... </a> </ li> </ ul > </ nav> </ body>有这个大纲1.如果你想让兄弟姐妹处于最高级...... 2.你必须使用带有<h *> ... 2.1的无类型部分 . ......任何其他部分都会下降2.2 . （未命名的导航）
这提出了两个问题：
What is the difference between <article> and <section>?
都可以：
互相嵌套
在不同的上下文或嵌套级别中采用不同的概念
<section>就像书章一样他们通常有兄弟姐妹（也许在不同的文件？）
他们有共同点，就像书中的章节一样
一位作者，一位
<article>，至少在最低级别标准示例：单个博客评论
博客条目本身也是一个很好的例子
博客条目
<article>及其评论<article>也可以用<article>包裹这是一些"complete"的东西，不是一系列类似的东西
<article>中的<section>就像一本书中的章节a
<section>中<article>s就像一卷（一系列中）中的诗How do <header>, <footer> and <main> fit in?
他们对切片没有任何影响
<header>和<footer>它们允许您标记每个部分的区域
甚至在一个部分你可以多次使用它们
以区别于本节的主要部分
仅受作者品味的限制
<header>可以标记本节的 Headers /名称
可能包含此部分的徽标
无需位于该部分的顶部或上部
<footer>可以标记本节的作者/作者
可以位于该部分的顶部
甚至可以高于
<header><main>只允许一次
标记顶级部分的主要部分（即文档，
<body>）小节本身没有主要部分的标记
<main>甚至可以“隐藏”在文档的某些子部分中，而文档的<header>和<footer>则不能（该标记会标记该子部分的页眉/页脚）但
<article>sections3中不允许这样做有助于区分“真实的东西”文档的非 Headers ，非页脚，非主要内容，如果在您的情况下有意义...
1来到头脑：概述，算法，隐式切片
2我用<h *>作为<h1>，<h2>，<h3>，<h4>，<h5>和<h6>的简写
3 <aside>或<nav>中既不允许<main>，但这并不奇怪 . - 实际上：<main>只能隐藏（嵌套）降序<section>部分或出现在顶层，即<body>
实际上，当涉及页眉/页脚时，你是完全正确的 . 以下是有关如何/应该使用每个主要HTML5标签的一些基本信息（我建议阅读底部链接的完整源代码）：
另外，这里是
article的描述，在上面的源代码中找不到：我建议阅读W3 wiki page about structuring HTML5：
它们包括我在这里清理过的an image：
<NAV> </ NAV> <section id =“sidebar”> </ section> <section id =“content”> </ section> <预留> </预留> <页脚> </页脚> </ BODY> 让我们更详细地探讨一些HTML5元素 . <section> <section>元素用于包含不同的功能区域或主题区域，或者将文章或故事分成不同的部分 . 因此，在这种情况下：“sidebar1”包含将在网站的每个页面上保留的各种有用链接，例如“订阅RSS”和“从商店购买音乐” . “main”包含此页面的主要内容，即博客文章 . 在网站的其他页面上，此内容将更改 . 它是一个相当通用的元素，但仍然比普通的旧<div>具有更多的语义含义 . <article> <article>与<section>有关，但明显不同 . <section>用于对不同的内容或功能部分进行分组，而<article>用于包含相关的单独独立内容，例如各个博客帖子，视频，图像或新闻项目 . 可以这样想 - 如果你有很多内容项目，每个项目都适合自己阅读，并且在RSS提要中作为单独的项目进行联合是有意义的，那么<article>适合于标记他们了在我们的示例中，<section id =“main”>包含博客条目 . 每个博客条目都适合作为RSS提要中的项目进行联合，并且在单独阅读时非常有意义，因此<article>非常适合他们：<sectionID = “主”> <article> <！ - 第一篇博文 - > </ article> <article> <！ - 第二篇博文 - > </ article> <article> <！ - 第三篇博文 - > </ article> </节> 简单吧？请注意，您也可以在文章中嵌套部分，这样做是有意义的 . 例如，如果这些博客文章中的每一篇都具有不同部分的一致结构，那么您也可以在文章中放置部分 . 它可能看起来像这样：<article> <section id =“introduction”> </ section> <section id =“content”> </ section> <section id =“summary”> </ section> </文章> 如上所述<header>和<footer>，<header>和<footer>元素的目的是分别包装页眉和页脚内容 . 在我们的特定示例中，<header>元素包含徽标图像，<footer>元素包含版权声明，但如果您愿意，可以添加更精细的内容 . 另请注意，每个页面上可以有多个页眉和页脚 - 以及我们刚才讨论的顶级页眉和页脚，您还可以在每个<article>中嵌套<header>和<footer>元素，在这种情况下，他们只会适用于该特定文章 . 添加到上面的示例：<article> <头> </报头> <section id =“introduction”> </ section> <section id =“content”> </ section> <section id =“summary”> </ section> <页脚> </页脚> </文章> <nav> <nav>元素用于标记导航链接或其他构造（例如搜索表单），这些构造将带您到当前站点的不同页面或当前页面的不同区域 . 其他链接（例如赞助商链接）不计算在内 . 您当然可以在<nav>中包含 Headers 和其他结构元素，但这不是强制性的 . <aside>您可能已经注意到我们使用<aside>元素来标记第二个侧边栏：包含最新演出和联系方式的侧边栏 . 这是非常合适的，因为<aside>用于标记与主流相关的信息，但不直接适合它 . 这个案子的主要内容都是关于乐队的！ <aside>的其他好选择是关于博客文章的作者，乐队传记或乐队唱片以及购买他们的专辑的链接的信息 . <div>离开哪里？因此，在我们的页面上使用所有这些伟大的新元素时，简单的<div>的日子肯定会被编号？没有 . 事实上，<div>仍然具有完全有效的用途 . 当没有其他更合适的元素可用于对内容区域进行分组时，您应该使用它，这通常是在纯粹使用元素将内容组合在一起以用于样式/视觉目的时 . 一个常见的例子是使用<div>来包装页面上的所有内容，然后使用CSS将所有内容集中在浏览器窗口中，或者将特定的背景图像应用于整个内容 .
部分应仅用于包装文档内的部分（如章节和类似部分）
带 Headers 标签：NO . Headers 标记表示页眉的包装，不要与H1，H2等混淆 .
哪个div？ ：d
是的
来自W3C学校：
我没有回答其他问题，因为你很难猜到你指的是什么 . 如果还有其他问题，请告诉我 .
主要错误：你在整个文件中有"divitis" .
为什么这个？
代替：
要对此 Headers 进行样式化，请使用CSS层次结构：body> section> header> h1，body> section> header> h2
更多，...第63行：为什么 Headers 包裹h2？如果您在 Headers 中不包含任何其他元素，请使用单个h2 .
请记住，您的结构不是对文档进行样式化，而是构建一个自我解释的文档 .
将此应用于文档的其余部分;祝好运 ;）
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
根据Nathan's answer，这是完全合理的（对于红色和橙色部分，也许你可以分别使用
div的 and/orheader和footer）：[explanations in my “main answer”]
line 7. section around the whole website? Or only a div?
都不是 . 造型：使用
<body>，它已经存在 . 对于切片/语义：as detailed in my example HTML其效果与实用性相反 . 已包装内容的额外包装没有改善，但噪音 .line 8. Each section start with a header?
不，作者选择将内容通常概括为“ Headers ”的位置 . 如果 Headers 内容清晰可辨，没有额外的标记，它可能完全没有
<header>. 这也是作者的选择 .line 23. Is this div right? or must this be a section?
<div>可能是错的 . 这取决于意图：只有造型才能正确 . 如果是的话语义目的是错误的：它应该是<article>而不是as shown in my other answer .<article>也适用于样式和切片的组合 .<section>在这里看起来不对，因为在这之前或之后没有类似的部分，就像书中的章节一样 . （这是<section>的目的） .line 24. Split left/right column with a div.
没有为什么？
line 25. Right place for the article tag?
是的，有道理 .
line 26. Is it required to put your h1-tag in the header-tag?
没有 . 一个单独的
<h*>元素可能永远不需要进入<header>（但如果你愿意，它可以），因为它已经很清楚它是即将到来的 Headers . - 例如，如果<header>也包含标语（标有<p>），那将是有意义的 .line 43. The content is not related to the main article, so I decided this is a section and not an aside.
这是一个误解，
<aside>必须与周围的内容“切向相关” . 重点是：如果内容只是“切向相关”或根本没有，请使用<aside>！尽管如此，除了
<aside>是一个不错的选择之外，<article>可能仍然比<section>更好，因为“热门项目”和“新项目”不会像书中的两章那样被阅读 . 你可以完美地选择其中一个，而不是另一个像某个东西的替代排序，而不是整体的两个部分 .line 44. H2 without header
是很棒的 .
line 53. section without header
好吧，没有
<header>，但是<h2>-heading很清楚，这部分的哪个部分是 Headers .line 63. Div with all (non-related) news items
<article>或<aside>可能会更好 .line 64. header with h2
已经讨论过了 .
line 65. Hmm, div or section? Or remove this div and only use the article-tag
究竟！删除
<div>.line 105. Footer :-)
非常合理 .
为什么不在商品标签上添加item_1，item_2等ID？像这样：
似乎没有必要添加包装器div . ID值在HTML中没有语义含义，所以我认为这样做是完全有效的 - 你并不是说第一篇文章总是item_1，只是当前页面上下文中的item_1 . ID不需要具有与上下文无关的任何含义 .
另外，关于第26行的问题，我认为那里不需要<header>标签，我认为你可以省略它，因为它在“main-left”div中是独立的 . 如果它位于主要文章列表中，您可能只想为了保持一致而包含<header>标记 .
这是我工作的例子
该文档的标记可能如下所示：
您可以在this article on A List Apart中找到更多信息 .
编辑：不幸的是我必须纠正自己 .
请参阅下面的https://stackoverflow.com/a/17935666/2488942以获取包含示例的w3规范的链接（与我之前看到的不同） .
但是后来.... Here是一篇很好的文章，感谢@Fez .
我最初的回答是：
w3规范的结构方式：
我觉得
section比article更高 . 如this answersection组中提到的主题相关内容 . 无论如何，文章中的内容在我看来是主题相关的，因此，至少对我来说，这也表明section组在更高级别与article相比 .我认为它的意思是这样使用：
或者对于新闻网站：
我不认为你应该在新闻项目摘要上使用标签（第67,80,93行） . 你可以使用部分或只是有封闭的div .
一篇文章需要能够独立存在并且仍然有意义或完整 . 由于它不完整或只是一个提取物，它不能是一篇文章，它更像是一个部分 .
当您点击“阅读更多”时，后续页面即可
我想更准确地澄清这个问题，如果我错了就纠正我让我们举一个Facebook Wall的例子
1.Wall属于“section”标签，表示它与页面分开 .
2.所有帖子都在“文章”标签下 .
然后我们有单个帖子，它位于“section”标签下 .
3.我们 Headers 为“X用户发布此内容”，我们可以使用“ Headers ”标签 .
然后在内部帖子中我们有三个第一部分是图像/文本，比如分享注释按钮和评论框 .
5.对于评论框，我们可以使用文章标签 .
根据the explanation in my “main” answer，有关文件应根据大纲进行标记 .
在以下两个表格中，我展示了：
原始HTML及其大纲
可能的预期大纲和HTML
原始html（缩写）<body> <section> <header> <div id = logo> </ div> <div id = language> </ div> </ header> <nav> ... </ nav> <div id = main> <div id = main-left> <article> <header> <h1>真实的东西</ h1> </ header> </ article> </ div> <div id = main-right> <section id = main-right-hot> <h2>热门项目</ h2> </ section> <section id = main-right-new> <h2>新项目</ h2> </ section> </ div> </ div> <div id = news-items> <header> <h2>最新消息</ h2> </ header> <div id = item_1> <article> <header> <h3> ... </ h3> < / header> <a>阅读更多内容</a> </ article> </ div> <div id = item_2> <article> <header> <h3> ... </ h3> </ header> <a>阅读更多</a> </ article> </ div> <divid = item_3> <article> <header> <h3> ... </ h3> </ header> <a>阅读更多内容</a> </ article> </ div> </ div> <footer> <ul > <li> ... </ ul> </ footer> </ section>与大纲相关的原始html <body> <section> //徽标和语言<nav> ... </ nav> <article> <h1 >真实的东西</ h1> </ article> <section> <h2>热门项目</ h2> </ section> <section> <h2>新项目</ h2> </ section> <h2>最新消息</ h2> <article> <h3> ... </ h3> </ article> <article> <h3> ... </ h3> </ article> <article> <h3> ... </ h3 > </ article> //页脚链接</ section>结果大纲1.（无 Headers 文档）1.1 . （无 Headers 部分）1.1.1 . （无 Headers 导航）1.1.2 . 真实的东西（h1）1.1.3 . 热门产品（h2）1.1.4 . 新项目（h2）1.1.5 . 最新消息（h2）1.1.6 . 新闻item_1（h3）1.1.7 . 新闻item_2（h3）1.1.8 . news item_3（h3）原件的轮廓绝对不是预期的 .
下表显示了我对改进版本的建议 . 我使用以下标记：
<已删除>
<NEW_OR_CHANGED_ELEMENT><element MOVED_ATTRIBUTE=1>可能的预期大纲1.（主要）1.1 . 真实的东西1.2 . （热门和新的）1.2.1 . 热门项目1.2.2 . 新项目2.最新消息2.1 . 新闻item_1 2.2 . 新闻item_2 2.3 . news item_3修改了html <body> <section> <header> <ASIDE> <div id = logo> </ div> <div id = language> </ div> </ ASIDE> </ header> <nav> ... </ nav> <ARTICLE id = main> <div id = main-left> <article ID = main-left> <header> <h1>真实的东西</ h1> </ header> </ article> </ div > <ARTICLE id = main-right> <ARTICLE id = main-right-hot> <h2>热门项目</ h2> </ ARTICLE> <ARTICLE id = main-right-new> <h2>新项目</ h2 > </ ARTICLE> </ ARTICLE> </ ARTICE> <ARTICLE id = news-items> <header> <h2>最新消息</ h2> </ header> <div id = item_1> <article ID = item_1> <header> <h3> ... </ h3> </ header> <a>阅读更多内容</a> </ article> </ div> <div id = item_2> <article ID = item_2> <header> < h3> ... </ h3> </ header> <a>阅读更多内容</a> </ article> </ div> <div id = item_3> <文章ID = item_3> <header> <h3> .. . </ h3> </ header> <a>阅读更多内容</a> </ article> </ div> </ ARTICLE> <footer> <NAV> <ul> <li> ... </ ul> < / NAV> </ footer> </ section>``结果大纲1.（无 Headers 文件）1.1 . （无 Headers 的徽标和郎）1.2 . （无 Headers 导航）1.3 . （无 Headers 主要）1.3.1真实的东西1.3.2 . （无 Headers 热和新）1.3.2.1 . 热门项目1.3.2.2 . 新项目1.4 . 最新消息1.4.1 . 新闻item_1 1.4.2 . 新闻item_2 1.4.3 . news item_3 1.5 . （无 Headers 页脚导航）修改后的HTML反映了比原始更好的预期轮廓方式 .
“第23行 . 这个div是对的吗？或者这必须是一个部分？“
两者都没有 - 为此目的有一个
main标签，每页只允许使用一次，并且应该用作主要内容的包装器（与侧边栏或站点范围的标头相比） .http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element