Question

网上有足够的关于HTML5的信息（以及stackoverflow），但现在我对“最佳实践”感到好奇。 section / headers / article之类的标签是新的，每个人对于何时/何地使用这些标签都有不同的看法。那你们怎么看待下面的布局和代码？

Website layout

  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开头？

第23行。这div对吗？或者必须是section？

第24行。使用div拆分左/右列。

第25行。article代码的正确位置？

第26行。是否需要将h1标记放在header - 代码中？

第43行。内容与主要文章无关，因此我认为这是section而不是aside。

第44行.H2没有header

第53行。section没有header

第63行。包含所有（非相关）新闻项目

第64行。header与h2

第65行。嗯，div或section？或者删除此div并仅使用article - 代码

第105行。页脚： - ）

Answer 1

实际上，在页眉/页脚方面你是完全正确的。以下是有关如何/应该使用每个主要HTML5标签的一些基本信息（我建议阅读底部链接的完整源代码）：

部分 - 用于将与主题相关的内容分组在一起。听起来像div元素，但事实并非如此。 div没有语义含义。在用截面元素替换所有div之前，总是问自己：“所有内容是否都相关？”

放在 - 用于切向相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧是不足以使用旁边元素的原因。问问自己是否可以删除旁边的内容而不降低主要内容的含义。 Pullquotes是切向相关内容的一个例子。

标题 - 标题元素与标题（或标头广告）的一般接受用法之间存在重要差异。页面中通常只有一个标题或“标题”。在HTML5中，您可以拥有任意数量的内容。该规范将其定义为“一组介绍性或导航辅助工具”。您可以在网站的任何部分使用标头。实际上，您可能应该在大多数部分中使用标题。该规范将section元素描述为“内容的主题分组，通常带有标题。”

nav - 用于主要导航信息。组合在一起的一组链接不足以使用nav元素。另一方面，站点范围的导航属于nav元素。

页脚 - 听起来像是对位置的描述，但不是。页脚元素包含有关其包含元素的信息：谁写了它，版权，相关内容的链接等。而我们通常只有一个页脚用于整个文档，HTML5允许我们在部分内也有页脚。

来源：http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

此外，这里是关于article的说明，在上面的来源中找不到：

文章 - 用于指定独立，自包含内容的元素。一篇文章本身应该有意义。在用文章元素替换所有div之前，总是问自己：“是否可以独立于网站的其他部分阅读它？”

Answer 2

不幸的是，到目前为止给出的答案（包括投票最多的）要么是“只是”常识，要么是错误的，或者说是最令人困惑的。弹出关键关键词¹ 无

我写了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*> ^²的未指定类型的部分（并非所有部分都执行此操作，请参见下文）
升级关闭当前的显式（子）部分

可以命名部分：

<h*>创建了自己命名的部分
<section|article|nav|aside>部分将由第一个<h*>命名，如果有的话
- 这些<h*>是唯一不会自行创建部分的

还有一个部分：下面的上下文（即元素）创建“轮廓边界”。它们包含的任何部分都是私有的：

文档本身带有<body>
包含<td>
<blockquote>
<details>，<dialog>，<fieldset>和<figure>
没有其他

title

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>有什么区别？

都可以：
- 互相嵌套
- 在不同的上下文或嵌套级别中采用不同的概念
<section>就像书章一样
- 他们通常有兄弟姐妹（可能在不同的文件中？）
- 他们有共同点，比如书中的章节
一位作者，一位<article>，至少在最低级别
- 标准示例：单个博客评论
- 博客条目本身也是一个很好的例子
- 博客条目<article>及其评论<article>也可以包含<article>
- 这是一些“完整”的东西，而不是一系列类似的

<section>

<article>

<article>在<section>中就像诗集（在一系列中）

<header>，<footer>和<main>如何适应？

他们对切片零影响
<header>和<footer>
- 它们允许您标记每个部分的区域
- 即使在一个部分你可以多次使用它们
- 区别于本节

<main>

只允许一次

标记顶级部分的主要部分（即文档，<body>）

小节本身没有主要部分的标记

<main>甚至可以“隐藏”在文档的某些子部分中，而文档的<header>和<footer>则不能（该标记会标记该子部分的页眉/页脚）

但<article>部分³
不允许这样做

有助于区分“真实的东西”与文档的非标题，非页脚，非主要内容，如果在您的情况下有意义的话......

想到
^{¹：概要，算法，隐式切片}
^{²我使用<h*>作为<h1>，<h2>，<h3>，<h4>，<h5>的简写和<h6>}
^{³ <main>或<aside>都不允许<nav>，但这并不奇怪。 - 实际上：<main>只能隐藏在（嵌套的）降序<section>部分或显示在顶层，即<body>
功能}

Answer 3

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

该文档的标记可能如下所示：

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

您可以在this article on A List Apart中找到更多信息。

Answer 4

我建议您阅读W3 wiki page about structuring HTML5：

<header>用于包含网站的标题内容。 <footer>   包含网站的页脚内容。 <nav>包含   导航菜单或页面的其他导航功能。

<article>包含一个独立的内容   感觉如果作为RSS项目联合，例如新闻项目。

<section>用于将不同的文章分组到不同的文章中   目的或主题，或定义单个的不同部分   文章。

<aside>定义与main相关的内容块   围绕它的内容，但不是它的流动的核心。

它们包括我在此处清理过的an image：

html5

在代码中，看起来像这样：
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
让我们更详细地探索一些HTML5元素。

<强> <section>

<section>元素用于包含不同的不同区域   功能或主题领域，或破坏文章或故事   进入不同的部分。所以在这种情况下：＆＃34; sidebar1＆＃34;包含各种   有用的链接将保留在网站的每个页面上，例如   ＆＃34;订阅RSS＆＃34;和＆＃34;从商店购买音乐＆＃34;。＆＃34;主＆＃34;包含   本页面的主要内容，即博客文章。在其他页面上   网站，这个内容会改变。这是一个相当通用的元素，但是   仍然比普通的<div>具有更多的语义含义。

<强> <article>

<article>与<section>有关，但明显不同。   而<section>用于分组内容的不同部分或   功能<article>用于包含相关个人   独立的内容，例如个人博客文章，视频，   图像或新闻。可以这样想 - 如果你有一些   内容项目，每个项目都适合阅读他们的内容   拥有，并且在RSS中作为单独的项目联合是有意义的   饲料，然后<article>适合标记它们。在我们的   例如，<section id="main">包含博客条目。每篇博客文章   适合作为RSS提要中的项目进行联合，并且会   因此，当你自己阅读，脱离背景时才有意义<article>   对他们来说是完美的：
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
简单吧？请注意，您也可以在里面嵌套部分文章，这样做是有意义的。例如，如果每一个这些博客文章具有一致的不同部分结构你也可以在你的文章中放置部分。它可以看起来像这样的东西：
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header>和<footer>

正如我们上面已经提到的，<header>的目的   <footer>元素用于包装页眉和页脚内容，   分别。在我们的特定示例中，<header>元素   包含徽标图像，<footer>元素包含版权   请注意，但如果您愿意，可以添加更精细的内容。也   请注意，每页上可以有多个页眉和页脚 -   以及我们刚刚讨论的顶级页眉和页脚，你   也可以在每个元素中嵌套<header>和<footer>元素   <article>，在这种情况下，他们只适用于那个特定的   文章。添加到上面的示例中：
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<强> <nav>

<nav>元素用于标记导航链接或其他元素   构造（例如搜索表单），将您带到不同的页面   当前网站，或当前页面的不同区域。其他链接，   如赞助商链接，不计算在内。你当然可以包括   <nav>内的标题和其他结构元素，但它是   不是强制性的。

<强> <aside>

您可能已经注意到我们使用了<aside>元素来标记   第二个侧边栏：包含最新演出和联系方式的侧边栏。这个   是完全合适的，因为<aside>用于标记碎片   与主流相关的信息，但不适合它   直。这个案子的主要内容都是关于乐队的！   <aside>的其他好选择是有关的信息   博客文章的作者，乐队传记或乐队唱片   有链接购买他们的专辑。

离开<div>的哪个位置？

所以，在我们的网页上使用所有这些伟大的新元素，那些日子   谦卑的<div>当然有编号吗？没有。事实上，<div>   仍然有一个完全有效的用途。如果没有，你应该使用它   其他更适合用于分组内容区域的元素，   这通常是在纯粹使用元素进行分组时   内容一起用于造型/视觉目的。一个常见的例子是   使用<div>包装页面上的所有内容，然后使用   CSS将所有内容集中在浏览器窗口中，或应用   特定的背景图像到整个内容。

Answer 5

[explanations in my “main answer”]

第7行部分围绕整个网站？或者只有 div ？

都不是。样式：使用<body>，它已经存在。对于切片/语义：as detailed in my example HTML其效果与实用性相反。已包装内容的额外包装没有任何改进，但噪音。

第8行。每个部分都以标题开头？

不，作者可以选择将内容通常归纳为“标题”的位置。如果标题内容在没有额外标记的情况下可以清晰识别，那么它可能完全没有<header>。这也是作者的选择。

第23行。这是 div 吗？或者必须是部分？

<div>可能是错误的。这取决于意图：它是否仅仅是造型才是正确的。如果是出于语义目的则是错误的：它应该是<article>而不是as shown in my other answer。 <article>也适用于样式和切片的组合。

<section>在这里看起来不对，因为在这之前或之后没有类似的部分，就像书中的章节一样。（这是<section>）的目的。

第24行。使用 div 分割左/右列。

没有。为什么呢？

第25行。文章标记的正确位置？

是的，有道理。

第26行。是否需要将 h1 -tag放在标题 -tag中？

没有。一个单独的<h*>元素可能永远不需要进入<header>（但如果你愿意的话，它也可以），因为它已经很清楚它是即将到来的标题。 - 例如，如果<header>也包含标语（标有<p>），那将是有意义的。

第43行。内容与主要文章无关，因此我认为这是部分，而不是一边。

误解是<aside>必须与周围的内容“切向相关”。关键是：如果内容只是“切向相关”或根本没有，请使用<aside>！

尽管如此，除了<aside>是一个不错的选择，<article>可能仍然比<section>更好，因为“热门项目”和“新项目”不会像两个一样被阅读书中的章节。你可以完美地选择其中一个，而不是另一个，就像一个替代的东西排序，而不是整体的两个部分。

第44行。 H2 没有标题

很棒。

第53行。部分没有标题

嗯，没有<header>，但<h2> - 标题非常清楚，此部分中的哪一部分是标题。

第63行。 Div 包含所有（非相关）新闻项目

<article>或<aside>可能会更好。

第64行。标题 h2

已经讨论过。

第65行。嗯， div 或部分？或者删除此 div 并仅使用文章 -tag

完全！删除<div>。

第105行。页脚： - ）

非常合理。

Answer 6

根据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>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> 与大纲相关的原始html <子> <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> <无线电通信/> <无线电通信/> 结果大纲 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) 原文的轮廓是最终不是预期的。 <无线电通信/> <无线电通信/> <无线电通信/>

下表显示了我对改进版本的建议。我使用以下标记：

<德尔> <removed>
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>

可能的预期大纲 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 <无线电通信/> <无线电通信/> <无线电通信/> 修改后的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> `` 结果大纲 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) 修改后的HTML反映了预期的轮廓方式比更好原文。 <无线电通信/> <无线电通信/> <无线电通信/>

Answer 7

主要错误：整个文件中都有“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＆gt;部分＆gt;标题＆gt; h1，body＆gt;部分＆gt;标题＆gt; H2

更多，......第63行：为什么标题包裹h2？如果你没有在标题中包含任何更多的元素，只需使用一个单独的h.2。请记住，你的结构不是文档样式化，而是构建一个自我解释的文档。

将此应用于文档的其余部分; 祝你好运;）

Answer 8

为什么不在商品标签上设置item_1，item_2等ID？像这样：

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

似乎没有必要添加包装器div。 ID值在HTML中没有语义含义，所以我认为这样做是完全有效的 - 你不是说第一篇文章总是 item_1，只是当前页面上下文中的item_1 。 ID不需要具有任何与上下文无关的含义。

另外，关于第26行的问题，我不认为＆lt; header＆gt;那里需要标记，我认为你可以省略它，因为它在“main-left”div中是独立的。如果它位于主要文章列表中，您可能希望包含＆lt; header＆gt;标签只是为了保持一致。

Answer 9

部分应仅用于包装文档内的部分（如章节和类似部分）
使用标题标记：否。标题标记表示页眉的包装，不要与H1，H2等混淆。
哪个div？：d
是
来自W3C学校：

标签定义外部内容。   外部内容可以是来自外部提供商的新闻文章，来自网络日志（博客）的文本，来自论坛的文本，或来自外部来源的任何其他内容。

< / LI>
不，标头标签有不同的用途。 H1，H2等代表文档标题H1是最重要的

我没有回答其他问题，因为很难猜到你指的是什么。如果还有其他问题，请告诉我。

Answer 10

这是我工作的例子

enter image description here

Answer 11

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

Answer 12

我认为你不应该在新闻摘要上使用这个标签（第67,80,93行）。你可以使用section或只是包含div。

一篇文章需要能够独立存在。仍然有意义或完整。由于它不完整或只是一个摘录，它不能是一篇文章，它更像是一个部分。

当您点击“了解更多”时，后续页面可以

Answer 13

编辑：不幸的是我必须纠正自己。

请参阅下面的https://stackoverflow.com/a/17935666/2488942以获取包含示例的w3规范的链接（与我之前看过的不同）。

但是...... 由于@Fez，Here是一篇很好的文章。

我最初的回答是：

w3规范的结构方式：

4.3.4章节

4.3.4.1正文元素

4.3.4.2节元素

4.3.4.3 nav元素

4.3.4.4文章元素

...

向我建议section的级别高于article。正如this answer section组中提到的主题相关内容。无论如何，文章中的内容在我看来是主题相关的，因此，至少对我来说，这也表明section组在更高级别与article相比。

我认为它的意思是这样使用：

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

或新闻网站：

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014

Answer 14

“第23行。这个div是对的吗？或者这必须是一个部分？“

两者都没有 - 为此目的有一个main标记，每页只允许使用一次，并且应该用作主要内容的包装（与侧边栏或网站范围的标题相比）。

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

Answer 15

根据Nathan's answer，这是完全合理的（对于红色和橙色部分，也许你可以使用div的和/或 header和{分别为{1}}：

HTML5最佳实践; section / header / aside / article元素

15 个答案: