html - HTML5 最佳实践；部分/标题/旁白/文章元素

Question

网络上有足够的关于 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?

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

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

第 25 行。article标签的正确位置？

第 26 行。是否需要将您的h1-tag 放在header-tag 中？

第 43 行。内容与主要文章无关，所以我决定这是 asection而不是 a aside。

第 44 行。H2 没有header

第 53 行section，没有header

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

第 64 行。header与 h2

第 65 行。嗯，div还是section？或者删除它div，只使用article-tag

第 105 行。页脚 :-)

score 513 · Accepted Answer

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

section - 用于将与主题相关的内容组合在一起。听起来像一个 div 元素，但它不是。div 没有语义。在用部分元素替换所有 div 之前，请始终问自己：“所有内容都相关吗？”</p>
搁置- 用于切向相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧并不足以成为使用 side 元素的理由。问问自己是否可以在不降低主要内容含义的情况下删除旁白中的内容。Pullquotes 是切向相关内容的一个例子。

标头——标头元素与标头（或标头）的普遍接受用法之间存在关键区别。一页中通常只有一个标题或“标头”。在 HTML5 中，您可以拥有任意数量的内容。该规范将其定义为“一组介绍性或导航辅助工具”。您可以在网站的任何部分使用标题。事实上，您可能应该在大多数部分中使用标题。该规范将 section 元素描述为“内容的主题分组，通常带有标题。”</p>
nav - 用于主要导航信息。组合在一起的一组链接不足以成为使用 nav 元素的理由。另一方面，站点范围的导航属于导航元素。

页脚- 听起来像是对位置的描述，但事实并非如此。页脚元素包含有关其包含元素的信息：作者、版权、相关内容的链接等。虽然我们通常有一个页脚用于整个文档，但 HTML5 允许我们在部分内也有页脚。

来源：https ://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

此外，这里有一个关于的描述article，在上面的源代码中没有找到：

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

score 299 · Accepted Answer

不幸的是，到目前为止给出的答案（包括投票最多的）要么是“公正的”常识，要么是完全错误的，要么充其量是令人困惑的。没有一个关键关键字¹弹出！

我写了3个答案：

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

要了解此处讨论的 html 元素的作用，您必须知道其中一些元素会划分文档。每个 html 文档都可以根据HTML5 大纲算法进行分割，以创建大纲——⁠or⁠——目录 (TOC)。大纲通常不可见（这些天），但作者应该以这样的方式使用 html，以使生成的大纲反映他们的意图。

您可以使用这些元素创建部分，仅此而已：

创建（显式）小节
- <section>部分
- <article>部分
- <nav>部分
- <aside>部分
创建兄弟节或小节
- <h*>^{^带有2}的未指定类型的部分（并非全部都这样做，见下文）
升级关闭当前的显式（子）部分

部分可以命名为：

<h*>创建的部分自己命名
<section|article|nav|aside><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>？

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

怎么做<header>，<footer>又如何<main>适应？

它们对切片的影响为零
<header>和<footer>
- 它们允许您标记每个部分的区域
- 即使在一个部分中，您也可以多次使用它们
- 区别于本节的主要部分
- 仅受作者口味限制
- <header>
  - 可以标记本节的标题/名称
  - 可能包含此部分的徽标
  - 无需位于该部分的顶部或上部
- <footer>
  - 可以标记本节的学分/作者
  - 可以出现在该部分的顶部
  - 甚至可以高于<header>
<main>
- 只允许一次
- 标记顶层部分的主要部分（即文档，<body>即）
- 小节本身没有主要部分的标记
- <main>甚至可以“隐藏”在文档的某些小节中，而文档的<header>和<footer>不能（该标记将标记该小节的页眉/页脚）
  - <article>但在第³节中是不允许的
- 如果这对您的情况有意义的话，有助于将“真实的东西”与文档的非页眉、非页脚、非主要内容区分开来......

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

score 111 · Accepted Answer

div 元素可以替换为新元素：header、nav、section、article、aside 和 footer。

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

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

您可以在这篇关于 A List Apart的文章中找到更多信息。

score 70 · Accepted Answer

我建议阅读有关构建 HTML5 的 W3 wiki 页面：

<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”包含该页面的主要内容，即博客文章。在网站的其他页面上，此内容会发生变化。这是一个相当通用的元素，但仍然比普通的 old 具有更多的语义含义<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>and <footer>元素的目的是分别包装页眉和页脚内容。在我们的特定示例中，该<header>元素包含一个徽标图像，该<footer>元素包含一个版权声明，但如果您愿意，您可以添加更详细的内容。另请注意，每个页面上可以有多个页眉和页脚 - 以及我们刚刚讨论的顶级页眉和页脚，您还可以在 each 中嵌套一个<header>and元素，在这种情况下，它们只适用于那个具体文章。添加到我们上面的例子：<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> 仍然有一个完全有效的用途。当没有其他更合适的元素可用于对内容区域进行分组时，您应该使用它，这通常是当您纯粹使用一个元素将内容组合在一起以进行样式/视觉目的时。一个常见的例子是使用 a<div>包裹页面上的所有内容，然后使用 CSS 将浏览器窗口中的所有内容居中，或者将特定背景图像应用于整个内容。

score 25 · Accepted Answer

[我的“主要答案”中的解释</a>]

第 7 行。围绕整个网站的部分？还是只有一个div？

两者都不。对于样式：使用<body>，它已经存在了。对于分段/语义：正如我的示例 HTML 中详述的那样，它的效果与实用性相反。已经包装的内容的额外包装器并没有改善，而是噪音。

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

不，作者选择将通常概括为“标题”的内容放在哪里。如果该标题内容在没有额外标记的情况下可以清楚地识别，那么它可能完全没有<header>. 这也是作者的选择。

第 23 行。这个div对吗？还是必须是一个部分？

<div>可能是错误的。这取决于意图：是否仅用于样式设置它可能是正确的。如果它是出于语义目的，那就错了：它应该是我的另一个答案中所示<article>的。如果它同时用于样式和切片，也是正确的。<article>

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

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

没有为什么？

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

是的，有道理。

第 26 行。是否需要将您的h1 -tag 放在header -tag 中？

不，一个单独的<h*>元素可能永远不需要进入 a <header>（但如果你愿意，它可以），因为很明显它是即将到来的标题。<header>– 例如，如果它还包含标语（标有<p>），那将是有意义的。

第 43 行。内容与主要文章无关，所以我决定这是一个部分而不是旁白。

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

尽管如此，除了<aside>是一个不错的选择之外，<article>可能仍然比一个更好，<section>因为“热门项目”和“新项目”不像一本书中的两章那样阅读。您可以完美地选择其中一个，而不是另一个，就像对某物进行替代排序，而不是像整体的两个部分。

第 44 行。没有标题的H2

是很棒的。

第 53 行。没有标题的部分

好吧，没有<header>，但是<h2>-heading 非常清楚本节中的哪个部分是标题。

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

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

第 64 行。带有h2的标题

已经讨论过了。

第 65 行。嗯，div还是section？或者删除这个div并且只使用article -tag

确切地！删除<div>.

第 105 行。页脚:-)

很合理。

score 22 · Accepted Answer

根据我的“主要”答案中的解释，有问题的文件应根据大纲进行标记。

在以下两个表格中，我展示了：

原始 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.

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

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<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.

score 17 · Accepted Answer

主要错误：您在整个文档中都有“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？如果标题中不再包含任何元素，则只需使用单个 h2。
请记住，您的结构不是对文档进行风格化，而是构建一个自我解释的文档。

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

score 10 · Accepted Answer

为什么文章标签本身没有 item_1、item_2 等 ID？像这样：

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

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

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

score 6 · Accepted Answer

部分应该仅用于将部分包装在文档中（如章节和类似内容）
带有标题标签：NO。Header 标签代表页眉的包装，不要与 H1、H2 等混淆。
哪个分区？:D
是的
来自 W3C 学校：

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

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

score 5 · Accepted Answer

<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

score 4 · Accepted Answer

4

这是我工作的例子

在此处输入图像描述

于 2014-08-24T12:20:53.553 回答

score 2 · Accepted Answer

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

请参阅下面的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

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

“第 23 行。这个 div 对吗？还是必须是一个部分？”</p>

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

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

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

score 1 · Accepted Answer

我想更准确地澄清这个问题，如果我错了，请纠正我让我们以 Facebook Wall 为例

1.Wall 位于“section”标签下，表示它与页面分开。

2.所有帖子都在“文章”标签下。

3.然后我们有一个帖子，它位于“部分”标签下。

3.我们有标题“X user post this”，我们可以使用“heading”标签。

4.然后在帖子里面我们有三个部分，一是图像/文本，点赞-分享-评论按钮和评论框。

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

score 1 · Accepted Answer

根据Nathan 的回答，这很有意义（对于红色和橙色部分，也许您可以分别使用div's和/或 headerand footer）：

html - HTML5 最佳实践；部分/标题/旁白/文章元素

16 回答 16

Related

Reference