HTML5最佳做法；部分/标题/旁边/文章元素

545

网上有足够的关于HTML5的信息（以及关于stackoverflow的信息），但是现在我对“最佳实践”感到好奇。诸如section / header / 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行。内容与主要文章无关，所以我决定这是a section而不是a aside。

第44行。H2不带 header

第53行section不header

第63行。Div包含所有（无关）新闻项

headerh2 行64

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

第105行。页脚:-)

html header article

— 巴斯范多斯特
source

456bereastreet.com/archive/201103/...

— 克里斯托夫鲁西研究所

486

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

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

放在一边 -用于切线相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧还不足以使用aside元素。问问自己，是否可以在不降低主要内容含义的情况下删除其中的内容。引号是切线相关内容的一个示例。

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

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

页脚 -听起来像是位置的描述，但不是。页脚元素包含有关其包含元素的信息：编写者，版权，到相关内容的链接等。尽管我们通常在整个文档中都有一个页脚，但HTML5允许我们在各节中也包含页脚。

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

此外，这是的说明article，在以上来源中找不到：

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

— 内森·JB
source

68

我对这个答案如何获得如此多的投票<article>感到困惑：它没有谈论元素，没有对比提到的元素，也没有对它们进行分组。答案没有给出“最佳实践”，也没有回答OP的任何明确问题！

— 罗伯特·西默

2

@RobertSiemer对我来说，这也是一个谜，您的评论如何获得24票赞成，而问题仅6

— 票赞成

@RobertSiemer因为它看起来很棒，您怎么看？我不知道这是不好的，直到检查您的评论并在下一个答案中予以确认。

— 挪威

237

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

我写了3个答案：

此说明（从此处开始）。
OP问题的具体答案。
改进了详细的HTML。

要了解此处讨论的html元素的作用，您必须了解其中的一些部分将其划分为文档。可以根据HTML5大纲算法对每个html文档进行分段，以创建大纲（或大纲）目录（TOC）。大纲通常是不可见的（这些天），但是作者应使用html，使生成的大纲反映他们的意图。

您可以创建段正是这些元素和没有别的：

创建（明确的）小节
- <section> 部分
- <article> 部分
- <nav> 部分
- <aside> 部分
创建同级节或子节
- 带有<h*>^²的未指定类型的部分（并非全部如此，请参见下文）
升级以关闭当前的显式（子）部分

节可以命名为：

<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>就像书的章节
- 他们通常有兄弟姐妹（也许在其他文件中？）
- 他们在一起有一些共同点，例如书中的章节
一位作者，一位<article>，至少是最低级别的
- 标准示例：单个博客评论
- 博客条目本身也是一个很好的例子
- 博客条目<article>及其评论<article>也可以用<article>
- 这是一些“完整”的东西，而不是一系列类似的东西的一部分
<section>S IN的<article>就像一本书的章节
<article>a <section>中的s 如卷中的诗（系列内）

怎么做<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>}

— 罗伯特·西默
source

32

答案就像一首诗。我最喜欢的部分是：sections in an article are like chapters in a book, articles in a section are like poems in a volume- 我见过的最好，最直观的articlevs section解释！

— 谢尔盖·卢金

1

这是广泛的知识，没有几个样点总结。感谢你的分享！有时在SO上，最佳答案既不是公认的，也不是最高评价的答案。

3

我知道这是陈词滥调，但是，“这应该是公认的答案！”。脚注和一切！谢谢！

— 尤金（Eugene）

Eugene和ft还是对的。请记住，您可以对不完整和不正确的答案投反对票，而对这一答案进行投票。对于作者来说，这不是冒犯，而是确保首先看到最佳答案的代价。除了罗伯特对所选答案的评论外，我也不喜欢它，因为它ized窃了网络上其他地方的内容（不完整）。

— IAmNaN

这个非常详细的答案并让很多事情变得很清楚，谢谢！

— Alaeddine

111

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

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

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

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

— 西勒勒
source

25

这种样板结构不值得在此页面上留出空间。1）没有提到的HTML元素绑定到文档中的任何位置。2）错误地暗示<header>和<footer>是文档级元素。3）错误地暗示<section>仅旨在作为<article> -child。@DanDascalescu

— 罗伯·

2

完全同意@RobertSiemer。这仍然是关于HTML5元素的最常见误解之一，并且正在成为我们钟爱的标记语言的语义障碍。

— 卡诺

@RobertSiemer Re：2），不能<header>并且<footer>是文档级元素以及<section|article|nav|aside>部分中？

— Flimm

1

@Flimm，是的，他们可以。我的观点是：答案没有错-答案不多。

— 罗伯特·西默

63

我建议阅读有关构造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”和“从商店购买音乐”。“主要”包含此页面的主要内容，即博客文章。在网站的其他页面上，此内容将更改。这是一个相当通用的元素，但是比普通的old仍然具有更多的语义含义<div>。

<article>

<article>与相关<section>，但有明显不同。而<section>用于将内容或功能的不同部分进行分组，<article>则用于包含相关的独立内容，例如独立的博客文章，视频，图像或新闻项目。可以这样考虑-如果您有许多内容项，每个内容都适合自己阅读，并且可以在RSS feed中作为单独的项目进行联合，那么<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>元素包含版权声明，但是您可以根据需要添加更多详尽的内容。还要注意，每个页面上可以有多个页眉和页脚-以及我们刚刚讨论的顶层页眉和页脚，也可以在每个页眉中嵌套<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> 蒸馏器具有完全有效的用途。当没有其他更合适的元素可用于对内容区域进行分组时，应该使用它，通常是在纯粹使用元素将内容分组以进行样式/视觉目的时。一个常见的示例是使用a <div>来包装页面上的所有内容，然后使用CSS将所有内容放在浏览器窗口的中心，或者将特定的背景图像应用于整个内容。

— 贾斯汀
source

1

但是对于嵌套部分，使用<section class="summary">而不是更有意义<section id="summary">吗？如果您在一页上有多篇文章，则后一种方法将导致同一页上的ID重复-HTML faux-pas。对？

— JP Lew 2015年

是的，在该实例中我可能会使用类。

— 贾斯汀

1

难道您提到的所有标签都不应包装在“主体”中，然后再包装在“主体”中吗？

— 弗朗西斯科·阿奎莱拉

1

该main标签将是很好的补充。根据页面上唯一的内容确定放置位置。在这个例子中，我想我会把它放在中心位置section。阅读更多：w3.org/TR/2012/WD-html-main-element-20121217 “文档的主要内容部分包括该文档唯一的内容，但不包括在一组文档（例如网站）中重复的内容导航链接，版权信息，网站徽标，横幅和搜索表单。”

— 贾斯汀

它仍然和MDN文档一样模棱两可

— oldboy

23

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

线7 节整个网站的身边？还是只有div？

都不行对于样式：使用<body>，它已经存在。对于节/语义：如我的示例HTML中所述，其效果与实用性相反。对于已经包装的内容，额外的包装没有改善，但会带来噪音。

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

不，作者选择将内容概括为“标题”。并且，如果可以清楚地识别出标头内容而没有额外的标记，则可以完美地保留标头内容<header>。这也是作者的选择。

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

这<div>可能是错误的。它取决于意图：仅用于样式设计是否正确。如果它是语义的目的是错误的：它应该是一个<article>，而不是因为我在其他的答案中所示。<article>如果将样式和剖面结合使用，也是正确的。

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

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

没有为什么？

第25行正确的地方的文章标签？

是的，很有道理。

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

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

线43的内容不相关的主要文章，所以我决定，这是一个部分，而不是放在一边。

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

然而，除了<aside>作为一个体面的选择之外，<article>可能还不<section>如一个更好的选择，因为“热门项目”和“新项目”不应像书中的两章那样读。您可以完美地选择其中一个，而不能像其他东西一样选择另一个，而不是整体的两个部分。

线44 H2无头

是很棒的。

第53行。没有标题的部分

好的，没有<header>，但是<h2>-heading可以很清楚地看到本节中的哪一部分是标题。

第63行。Div包含所有（无关）新闻项

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

管线64 头部与H2

已经讨论过了。

第65行。嗯，div还是section？或删除此div，仅使用文章 -tag

究竟！删除<div>。

第105行。页脚 :-)

很合理

— 罗伯特·西默
source

将一个答案分为3个不完全没有帮助。

— Christian Strempfer '17

6

@ChristianStrempfer确实有帮助，因为许多人来这里不是为了阅读关于OP特定问题的特定答案（此答案），而是要阅读更多有关当前主题的内容（我的主要答案）。–我相信只有一个巨大的tldr答案，我什至不会获得我对主要答案的投票。–你有什么建议？

— 罗伯特·西默

我建议将它们合并为一个答案。征收票数不是拆分票数的好理由。特别是第三个答案不能独立存在，因为您指的是主要答案。

— Christian Strempfer

@ChristianStrempfer对我的口味来说太长了。–不过，我正在努力改进桌子...

— Robert Siemer，

20

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

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

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

— 罗伯特·西默
source

感谢出色的详细回答，这非常有启发性。我想了解更多有关该主题的信息，所以希望您能解释一些选择，这些选择对我来说似乎很奇怪。我将它们作为个人评论发布。

— 格林威治标准

1. 头文件> div [id = logo]似乎与我无关。目前，它是标头，但在语义上不是。div语言可能是某种导航，徽标可能是整个网站的标头，但肯定不是页面的标头。

— 格林威治标准

2. <ARTICLE id = main>似乎仅是陈述性的。它内部不包含任何相关内容。（关于<ARTICLE id = main-right>的情况也是如此，但是在那里（“新闻和热点”）它的防御性要强得多。）我建议在最坏的情况下使用div或main。

— 高恩

3. 在我看来，<ARTICLE id = news-items>是我经常使用的典型情况。它与主要文章无关，只是一些新闻。我同意它包含新闻作为单独的“小”文章。

— 高恩

1

考虑编辑您的建议，您的“理论”答案写得很好，但是我认为大多数初学者只会看一下代码示例，他们可能会很困惑，因为它与理论部分不符。

— 高恩

17

主要错误：您在整个文档中都充满了“困惑”。
为什么这个？

<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>标头> h1，body> section>标头> h2

第63行：标题为何要封装h2？如果您在标头中不包含任何其他元素，则只需使用单个h2。
请记住，您的结构不是样式化文档，而是构造一个不言自明的文档。

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

— 科维
source

4

@superUntitled <hgroup> 不再是HTML5的一部分

— bradley.ayers 2013年

应将role =“ banner”放在h1本身上，而不是整个标头上吗？这样，它指向屏幕阅读器将宣布的单个文本，而不是HTML的整体。

— enigment

11

对徽标和语言使用h1和h2对我来说没有意义。右边的小小的语言按钮应该是此页面上第二重要的内容/信息？而且，如果您将徽标放置在h1内，则搜索引擎会发现每个页面的主要内容都是相同的（在我看来很无聊）。另请参阅@MeanEYE答案以了解h1和h2的使用。除此之外，如果您需要语义，则ID是非语义的，请使用RDFa。用自己的方式让CSS选择器只是缓慢：developers.google.com/speed/docs/best-practices/...

— ˚FLekschas

10

为什么文章上的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>标记。

— 马特·布朗
source

2

我只是遵循原始示例，并演示如何在没有不必要的包装div的情况下完成相同的任务。这些ID可能出于多种原因而存在...一方面，可能有指向它们的锚链接。

— 马特·布朗

5

节仅应用于将节包装在文档内（如章节和类似内容）
带标题标签：NO。标头标签代表页面标头的包装，请勿与H1，H2等混淆。
哪个div？：D
是
从W3C学校：

标签定义外部内容。外部内容可以是来自外部提供商的新闻文章，也可以是来自网络日志（blog）的文本，也可以是来自论坛的文本，也可以是来自外部来源的任何其他内容。
否，标头标签的用法不同。H1，H2等代表最重要的文件标题

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

— 均值
source

1

感谢您的回答！在第3点；对不起，行号不正确。它必须是line_23而不是点3；另请参阅我的帖子中的行更改。

— Bas van Dorst，

是的，我在网站上也做同样的事情。通常，DIV用于创建站点结构。在HTML5中引入页眉，页脚和类似标签只是为了使内容更易于阅读。它们的行为与DIV相同。

— MeanEYE 2011年

3

检查您的来源。w3c学校网站未指定article一定来自外部来源。w3schools.com/html5/tag_article.asp

— chharvey 2011年

嗯，我什至都不认为该文章应从外部来源使用。这是一个旧的答复，我几乎不记得它是关于什么的。:)

— MeanEYE 2012年

我同意＃1。我认为这些SECTION元素更适合ASIDE。

— 安迪

3

这是我工作的例子

在此处输入图片说明

— 伊万
source

2

<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

— ЮрийСветлов
source

1

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

文章需要能够独立存在并且仍然有意义或完整。由于它不完整或仅是摘录，因此不能成为文章，而只能是一节。

当您单击“阅读更多”时，下一页可以

— 康达西
source

1

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

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

但是然后.... 感谢@Fez，这是一篇不错的文章。

我最初的回答是：

w3规范的结构方式：

4.3.4节

4.3.4.1身体元素

4.3.4.2 section元素

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

— 潘迪塔
source

1

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

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

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

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

— 费埃拉
source

0

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

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

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

3.然后我们有一个帖子，在“ section”标签下。

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

4.然后在帖子内部，我们有三个部分，第一部分是图像/文本，喜欢分享评论按钮和注释框。

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

— Flicks Gorger
source

0

据Nathan的回答，这是非常合情合理的（红色和橙色的部分，也许你可以使用div的和/或 header与footer分别对应）。

— 亚历杭德罗·纳瓦（Alejandro Nava）
source