HTML5 最佳实践；节/标题/旁白/文章元素

https://stackoverflow.com/questions/4781077

23-10-2019
|

题

网络上（以及 stackoverflow 上）有足够的有关 HTML5 的信息，但现在我对“最佳实践”感到好奇。像节/标题/文章这样的标签是新的，每个人对于何时/何地应该使用这些标签都有不同的看法。那么你们觉得下面的布局和代码怎么样？

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 行。用 a 分割左/右列 div.

第 25 行。正确的地方 article 标签？

第 26 行。是否需要将您的 h1- 标签在 header-标签？

第 43 行。内容与主文无关，所以我决定这是一篇 section 而不是一个 aside.

第 44 行。H2 无 header

第 53 行。 section 没有 header

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

第 64 行。 header 与 h2

第 65 行。唔， div 或者 section？或者删除这个 div 并且只使用 article-标签

第 105 行。页脚：-）

解决方案

实际上，当涉及到标题/页脚方面，您是正确的。这是有关如何使用每个主要的HTML5标签的一些基本信息（我建议阅读底部链接的完整源）：

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

在旁边 - 用于切向相关的内容。仅仅因为某些内容出现在主内容的左侧或右侧，这不是使用旁边元素的足够理由。问问自己是否可以删除旁边的内容，而无需降低主内容的含义。 plullquotes是切向相关内容的一个示例。

标题 - 标题元素与总公认标头（或掩体标头）之间存在至关重要的区别。页面中通常只有一个标头或“标头”。在HTML5中，您可以拥有想要的数量。该规范将其定义为“一组入门或导航辅助工具”。您可以在网站上的任何部分中使用标头。实际上，您可能应该在大多数部分中使用标头。该规格将部分元素描述为“内容的主题分组，通常是标题。”

导航 - 用于主要导航信息。将一组分组在一起的链接没有足够的理由使用NAV元素。另一方面，网站范围的导航属于NAV元素。

页脚 - 听起来像是对该职位的描述，但事实并非如此。页脚元素包含有关其包含元素的信息：谁写了它，版权，指向相关内容的链接等。虽然我们通常有一个页脚用于整个文档，但HTML5允许我们在各节内也有页脚。

资源: http://www.anthonycalzadilla.com/2010/08/html5-section-asection-aseide-header-header-nav-footer-elements-elements-not-as-as-as-obvious-as-as-they-sound/

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

文章 - 用于指定独立，独立的内容的元素。文章应该自行有意义。在用文章元素替换所有DIV之前，请始终问自己：“可以独立于网站的其余部分阅读它吗？”

其他提示

不幸的是，到目前为止给出的答案（包括最多的选票）要么“只是”常识，要么充其量是错误的，要么充其量是混乱的。 没有任何 关键关键字¹ 弹出！

我写了3个答案：

此解释（从这里开始）。
对OP问题的具体答案。
改进了详细的HTML。

要了解此处讨论的HTML元素的作用，您必须知道其中一些部分部分是文档。每个HTML文档都可以根据 HTML5概述算法 为了创建内容（toc）的大纲 - ⁠or⁠。大纲通常不可见（如今），但是作者应以最终轮廓反映其意图的方式使用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>S就像书籍章节
- 他们通常有兄弟姐妹（也许在另一个文件中？）
- 他们在一起有一些共同点，例如书中的章节
一位作者，一个 <article>, ，至少在最低水平
- 标准示例：单个博客评论
- 博客条目本身也是一个很好的例子
- 博客条目 <article> 及其评论 <article>S也可以用 <article>
- 这是一些“完整”的事情，而不是一系列类似的一部分
<section>s <article> 就像书中的章节
<article>s <section> 就像一卷中的诗（一系列）

怎么办 <header>, <footer> 和 <main> 适合？

他们有 零影响 关于切片
<header> 和 <footer>
- 他们允许您标记 每一个 部分
- 即使在一节中，您也可以拥有几次
- 与主要部分区分开 在这个部分
- 仅受作者的口味限制
- <header>
  - 可以标记本节的标题/名称
  - 可能包含此部分的徽标
  - 无需在本节的顶部或上部
- <footer>
  - 可以标记本节的学分/作者
  - 可以在本节的顶部
  - 甚至可以在 <header>
<main>
- 只允许一次
- 标记了顶级部分的主要部分（即文档， <body> 那是）
- 小节本身对其主要部分没有标记
- <main> 甚至可以在文档的某些小节中“隐藏”，而文档的 <header> 和 <footer> 不能（那个标记将标记该小节的标题/页脚）
  - 但是不允许 <article> 部分³
- 如果您的情况有意义，则有助于区分“真实事物”与文档的非头脑，非脚步，非手机内容区分开来...

^{¹ 想到：大纲，算法，隐性切片}
^{² 我用 <h*> 作为速记 <h1>, <h2>, <h3>, <h4>, <h5> 和 <h6>}
^{³ 既不是 <main> 允许进入 <aside> 或者 <nav>, ，但这不足为奇。 - 实际上： <main> 只能藏在（嵌套）下降 <section> 部分或出现在顶级，即 <body>}

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>

您可能会在本文在列表中分开.

我建议阅读 W3 Wiki页面关于构造HTML5:

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

<article> 包含一个独立的内容
如果将新闻项目（例如新闻项目）为RSS项目，则感官感应。

<section> 用来将两种不同的文章分为不同
目的或主题，或定义单个文章的不同部分。

<aside> 定义与周围主要内容相关的内容块，但不是其流量的核心。

他们包括一个图像我在这里清理了：

html5

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

<section>

这 <section> 元素用于包含不同的功能或主题领域的不同领域，或者将文章或故事分为不同的部分。因此，在这种情况下：“ sidebar1”包含各种有用的链接，这些链接将持续在网站的每个页面上，例如“订阅RSS”和“从商店购买音乐”。 “ main”包含此页面的主要内容，即博客文章。在网站的其他页面上，此内容将会更改。这是一个相当通用的元素 <div>.

<article>

<article> 与 <section>, ，但截然不同。然而 <section> 用于分组内容或功能的不同部分， <article> 用于包含相关的单独独立内容，例如单个博客文章，视频，图像或新闻项目。这样考虑 - 如果您有许多内容，每个内容都适合自己阅读，并且在RSS feed中作为单独的项目有意义，那么 <article> 适合标记它们。在我们的示例中 <section id="main"> 包含博客条目。每个博客条目都适合在RSS feed中作为项目联合起来，并且在自行阅读时会很有意义，因此 <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> Element包含版权通知，但是如果您希望，您可以添加更多精美的内容。另请注意，您可以在每个页面上都有多个标头和页脚 - 以及我们刚刚讨论的顶级标题和页脚，您也可以拥有一个 <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将浏览器窗口中的所有内容集中，或将特定的背景图像应用于整个内容。

[我的“主要答案”中的解释]

第7行。部分在整个网站周围？或只有一个 div?

两者都不。用于样式：使用 <body>, ，已经在那里。用于章节/语义：如我的示例中详细介绍的html 它的作用与实用性相反。额外的包装器已经包装了包装内容，这不是改进的，而是噪音。

第8行8.每个部分都以标头开始？

不，这是作者的选择，将内容通常总结为“标题”。而且，如果该标头符号显然是可以识别的，而没有额外的标记，那么它可能会完全不存在 <header>. 。这也是作者的选择。

第23行。 div 正确的？还是必须是部分?

这 <div> 可能是错误的。这取决于目的：仅仅是为了造型，它可能是正确的。如果是出于语义目的，那是错误的：应该是一个 <article> 反而如我的其他答案所示. <article> 如果既适合造型和切片组合，也是正确的。

<section> 在这里看起来错了，因为本书之前或之后没有类似的部分，就像书中的章节一样。（这是 <section>).

第24行。左/右列与 div.

没有为什么？

第25行。文章标签？

是的，有道理。

第26行。是否需要放置您的 H1- 在标题-标签？

不，一个孤独 <h*> 元素可能永远不需要进入 <header> （但是，如果您愿意的话），因为已经很明显这是即将发生的事情的标题。 - 如果那是有道理的 <header> 还包含标语（标记 <p>），例如。

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

这是一个误解 <aside> 必须“切线 有关的”周围的内容。关键是：使用 <aside> 如果内容仅切线相关”或根本没有！

然而，除了 <aside> 是一个体面的选择， <article> 可能仍然比一个更好 <section> 因为“热门物品”和“新项目”不应像书中的两章那样阅读。您可以完美地选择其中一个，而不是另一个人像某物的替代排序，而不是整体的两个部分。

第44行。 H2 没有标题

是很棒的。

第53行。部分没有标题

好吧，没有 <header>, ，但是 <h2>- 张开叶子很清楚，本节中的哪一部分是标题。

第63行。 div 所有（无关）新闻项目

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

第64行。标题和 H2

已经讨论了。

第65号线。嗯， div 或者部分？或删除此 div 只使用文章-标签

确切地！去除 <div>.

第105行。页脚 :-)

非常合理。

根据我的“主要”答案中的解释有关文件应根据大纲标记。

在以下两张表中，我显示：

原始的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反映了预期的轮廓方式比原本的。

主要错误：您在整个文档中都有“分裂性炎”。
为什么这个？

<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>

要设置此标头

更多，...第63行：为什么标头包装H2？如果您不再包含标题内部的任何元素，只需使用一个H2即可。
请记住，您的结构不是为文档进行样式化，而是要自我解释的文档。

将其应用于其余文件；祝你好运 ;）

为什么不具有item_1，item_2等。文章标签本身的ID？像这样：

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

似乎没有必要添加包装师。 ID值在HTML中没有语义含义，因此我认为这样做是完全有效的 - 您并不是说第一篇文章是总是 item_1，仅在当前页面上下文中的item_1。 ID不需要具有独立于上下文的任何含义。

另外，关于您在第26行上的问题，我认为u003Cheader>在那里需要标签，我认为您可以省略它，因为它是在“ Main-Left” Div中。如果它在主要文章列表中，则可能需要包括u003Cheader>标签仅是为了一致性。

部分应仅用于包裹文档内部的部分（例如章节和类似）
和标题标签：不。标题标签代表页面标头的包装器，不应与H1，H2，等相混淆。
哪个div？：d
是的
来自W3C学校：

该标签定义了外部内容。外部内容可以是来自外部提供商的新闻学院，也可以是来自Web日志（博客）的文本，或者来自论坛的文本，也可以是来自外部来源的任何其他内容。
不，标题标签具有不同的用途。 H1，H2等。表示文档标题H1是最重要的

我没有回答其他人，因为很难猜测您所指的是什么。如果还有更多问题，请告诉我。

这是我工作的例子

enter image description here

<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-lement

我认为您不应该在新闻项目摘要中使用标签（第67、80、93行）。您可以使用部分或仅具有封闭的div。

一篇文章需要能够自己站起来，仍然有意义或完整。由于其不完整或仅是摘录，它不能是一篇文章，而是一节。

当您单击“阅读更多”时，后续页面可以

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

请参阅下面 https://stackoverflow.com/a/17935666/2488942 对于W3规格的链接，其中包括一个示例（与我之前查看过的示例不同）。

但是之后....这里感谢@Fez，这是一篇很好的文章。

我最初的回答是：

W3规格结构的方式：

4.3.4节

4.3.4.1身体元素

4.3.4.2部分元素

4.3.4.3导航元素

4.3.4.4文章元素

....

向我建议 section 高于 article. 。如前所述这个答案 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

„第23行。这是正确的吗？还是必须是部分？”

两者都没有 main 出于此目的，标签只允许每页一次，应用作主要内容的包装器（与侧边栏或范围内的标题相比）。

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

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

我想更精确地澄清这个问题，如果我错了，请以Facebook Wall的例子为例。

1. Wall属于“截面”标签，表示它与页面分开。

2.所有帖子都属于“文章”标签。

3.然后我们有单个帖子，该帖子属于“部分”标签。

3.我们的标题为“ X用户帖子”，为此我们可以使用“标题”标签。

4.在内部帖子中，我们有三个部分是图像/文本，例如共享评论按钮和评论框。

5.对于评论框，我们可以使用文章标签。

根据内森的回答, ，这很有道理（对于红色和橙色部分，也许你可以使用 div的 和/或 header 和 footer 分别）：

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow