网络上有足够多关于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行。围绕整个网站的部分?还是只有div?
8号线。每个部分都以标题开始?
第23行。这个div对吗?或者这一定是一个部分?
第24行。用div分割左/右列。
行25。文章标签的正确位置?
第26行。你的h1-tag需要放在head -tag里面吗?
行43。内容与主要文章无关，所以我决定这是一个部分，而不是一个题外话。
行44。无头H2
线53。没有标头的节
第63行。Div与所有(不相关的)新闻项目
第64行。带有h2的标头
第65行。嗯，div还是section?或者删除这个div，只使用article标签
第105行。页脚:-)
主要的错误是:你在整个文档中都有“divitis”。为什么呢?
<header>
<div id="logo"></div>
<div id="language"></div>
</header>
而不是:
<header role="banner">
<!-- Not the best -->
<h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
<h2 id="language"></h2>
<!-- Better, if the IDs have not semantic sense -->
<h1></h1>
<h2></h2>
</header>
使用CSS层次结构:body > section > header > h1, body > section > header > h2
更多,…第63行:为什么头包装h2??如果在header中没有包含更多的元素，只使用一个h2。请记住，您的结构不是对文档进行风格化，而是构造一个自解释的文档。
将此应用于文档的其余部分;
祝你好运;)
不幸的是，到目前为止给出的答案(包括投票最多的)要么是“只是”常识，要么是完全错误的，要么是令人困惑的。一个关键的关键词都没有出现!
我写了3个答案:
这个解释(从这里开始)。
具体回答OP的问题。
改进了详细的HTML。
要理解这里讨论的html元素的作用，您必须知道其中一些元素是文档的一部分。每个html文档都可以根据HTML5大纲算法进行分段，以便创建大纲-或-目录(TOC)。大纲通常是不可见的(现在)，但作者应该以这样一种方式使用html，从而使大纲反映他们的意图。
你可以只用这些元素创建section:
创建(显式)子节
< >部分部分
< >条部分
<导航>部分
除了< >部分
创建兄弟节或子节
带有<h*>2的未指定类型的section(并非所有都这样做，请参见下面)
关闭当前显式(子)节
section可以命名为:
<h*>创建的section自己命名
<section|article|nav|aside> section将由第一个<h*>命名(如果有的话)
这些<h*>是唯一不自己创建节的
关于分段还有一件事:以下上下文(即元素)创建了“轮廓边界”。它们包含的任何部分对它们来说都是私有的:
文档本身带有<body>
表<td>的单元格
< blockquote >
<details>， <dialog>， <fieldset>， <figure>
没有其他的
example HTML
<body>
<h3>if you want siblings
at top level...</h3>
<h3>...you have to use untyped
sections with <h*>...</h3>
<article>
<h1>...as any other section
will descent</h1>
</article>
<nav>
<ul>
<li><a href=...>...</a></li>
</ul>
</nav>
</body>
has this outline
1. if you want siblings
at top level...
2. ...you have to use untyped
sections with <h*>...
2.1. ...as any other section
will descent
2.2. (unnamed navigation)
这就提出了两个问题:
<article>和<section>之间有什么区别?
both can:
be nested in each other
take a different notion in a different context or nesting level
<section>s are like book chapters
they usually have siblings (maybe in a different document?)
together they have something in common, like chapters in a book
one author, one <article>, at least on the lowest level
standard example: a single blog comment
a blog entry itself is also a good example
a blog entry <article> and its comment <article>s could also be wrapped with an <article>
it’s some "complete" thing, not a part in a series of similar
<section>s in an <article> are like chapters in a book
<article>s in a <section> are like poems in a volume (within a series)
<页眉>，<页脚>和<主>适合吗?
they have zero influence on sectioning
<header> and <footer>
they allow you to mark zones of each and every section
even within a section you can have them several times
to differentiate from the main part in this section
limited only by the author’s taste
<header>
may mark the title/name of this section
may contain a logo for this section
has no need to be at the top or upper part of the section
<footer>
may mark the credits/author of this section
can come at the top of the section
can even be above a <header>
<main>
only allowed once
marks the main part of the top level section (i.e. the document, <body> that is)
subsections themselves have no markup for their main part
<main> can even “hide” in some subsections of the document, while document’s <header> and <footer> can’t (that markup would mark header/footer of that subsection then)
but it is not allowed in <article> sections3
helps to distinguish “the real thing” from document’s non-header, non-footer, non-main content, if that makes sense in your case...
1 .想到的是:提纲、算法、隐式分段
我用<h*>来表示<h1>， <h2>， <h3>， <h4>， <h5>和<h6>
在<aside>或<nav>中也不允许<main>，但这并不奇怪。-在效果上:<主>只能隐藏在(嵌套)下降<section>部分或出现在顶层，即<body>
根据我在“主要”回答中的解释，所讨论的文件应该根据大纲标记出来。
在以下两个表中，我展示了:
原始HTML及其大纲
一个可能的大纲和HTML来做这个
original html (shortened)
<body>
<section>
<header>
<div id=logo></div>
<div id=language></div>
</header>
<nav>
...
</nav>
<div id=main>
<div id=main-left>
<article>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<div id=main-right>
<section id=main-right-hot>
<h2>Hot items</h2>
</section>
<section id=main-right-new>
<h2>New items</h2>
</section>
</div>
</div>
<div id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</div>
<footer>
<ul><li>...</ul>
</footer>
</section>
original html relevant for outline
<body>
<section>
// logo and language
<nav>
...
</nav>
<article>
<h1>The real thing</h1>
</article>
<section>
<h2>Hot items</h2>
</section>
<section>
<h2>New items</h2>
</section>
<h2>The latest news</h2>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
// footer links
</section>
resulting outline
1. (untitled document)
1.1. (untitled section)
1.1.1. (untitled navigation)
1.1.2. The real thing (h1)
1.1.3. Hot items (h2)
1.1.4. New items (h2)
1.1.5. The latest news (h2)
1.1.6. news item_1 (h3)
1.1.7. news item_2 (h3)
1.1.8. news item_3 (h3)
The outline of the original is
definitively not what was intended.
下表显示了我对改进版本的建议。我使用以下标记:
<删除>
< NEW_OR_CHANGED_ELEMENT >
<元素MOVED_ATTRIBUTE = 1 >
possible intended outline
1. (main)
1.1. The real thing
1.2. (hot&new)
1.2.1. Hot items
1.2.2. New items
2. The latest news
2.1. news item_1
2.2. news item_2
2.3. news item_3
modified 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>The real thing</h1>
</header>
</article>
</div>
<ARTICLE id=main-right>
<ARTICLE id=main-right-hot>
<h2>Hot items</h2>
</ARTICLE>
<ARTICLE id=main-right-new>
<h2>New items</h2>
</ARTICLE>
</ARTICLE>
</ARTICE>
<ARTICLE id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article ID=item_1>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article ID=item_2>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article ID=item_3>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</ARTICLE>
<footer>
<NAV>
<ul><li>...</ul>
</NAV>
</footer>
</section>``
resulting outline
1. (untitled document)
1.1. (untitled logo and lang)
1.2. (untitled navigation)
1.3. (untitled main)
1.3.1 The real thing
1.3.2. (untitled hot&new)
1.3.2.1. Hot items
1.3.2.2. New items
1.4. The latest news
1.4.1. news item_1
1.4.2. news item_2
1.4.3. news item_3
1.5. (untitled footer nav)
The modified HTML reflects the
intended outline way better than
the original.
Section should be used only to wrap a section inside a document (like chapters and similar)
With header tag: NO. Header tag represents a wrapper for page header and is not to be confused with H1, H2, etc.
Which div? :D
Yes
From W3C Schools:
The tag defines external content.
The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.
No, header tag has a different use. H1, H2, etc. represent document titles H1 being the most important
我没有回答其他问题，因为很难猜到你指的是什么。如果还有其他问题，请告诉我。
