HTML5页脚元素和令人困惑的w3.org示例

Question

我正在浏览关于article元素的w3.org页面，其中一个例子让我感到惊讶：

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

如您所见，评论信息（海报名称和日期）位于每条评论开头的footer元素中。
根据{{​​3}}，它是一种有效的用法，但以这种方式使用它似乎很奇怪。

  

页脚通常包含有关其部分的信息，例如谁编写，相关文档的链接，版权数据等。

没错，没有人说它应该放在实际的文章之下。

我会使用header元素进行此用法，但在W3.org 4.3.8 The footer element上，它已经预先设定了

  

标题通常包含一组介绍性或导航辅助工具。

但是他们也说footer元素：

  

这些元素的主要目的仅仅是帮助作者   编写易于维护和风格的自解释标记;他们   并不打算对作者强加特定的结构。

那么为什么他们在示例中使用footer元素？ header元素不是更直观和语义吗？

<section>
  <h1>Comments</h1>
  <article>
   <header>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </header>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <header>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </header>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>

这有什么特别的原因吗？

Answer 1

这里的经验法则是footer应该用于标记关于封闭部分的元信息（在您的示例中，即每个单独注释的作者和发布时间）。此外，正如您所指出的那样，根据规范，不要求页脚必须位于＆＃34;脚＆＃34;该部分。

相反，header用于封闭部分的介绍性内容，并且应包含至少一个标题元素。实际上，我认为排除heading元素是原始示例使用footer元素的主要原因。

为避免混淆，这并不意味着每个标题都应包含在header中，因为在这种情况下它不会添加任何语义值。

一般的经验法则：如果它有标题和一些附加信息（字幕，pubdate，TOC，nav ......），它通常可以包含在header中。关于不会出现在文档流程中的标题附近的部分的任何其他信息/元数据（脚注，相关链接，autor信息，版权......）可以包含在footer中。

<强>参考：
- HTML5Doctor - Footer
- HTML5Doctor - Header

Answer 2

footer和header之间的语义差异并不总是很清楚。在不清楚的情况下，重要的是你根本不使用其中一个。

footer和header

的排名

位置无关紧要（只要它在相关部分内）。由于header用于介绍性内容，因此它通常会出现在该部分的顶部附近。对于footer，规范说明：

  

页脚不一定必须出现在某个部分的 end ，尽管它们通常都会出现。

甚至可能to use them multiple times（不一定是个好主意）：

<article>
  <footer>…</footer>
  <header>…</header>
  <p>Hello world</p>
  <footer>…</footer>
  <header>…</header>
  <header>…</header>
</article>

footer和header

之间的语义差异

• 根据规范的定义，元素代表什么：
  • footer：“一个页脚”
  • header：“介绍性内容”
• 根据规范，“通常”包含的元素是什么：
  • footer：“有关其内容的信息，例如谁编写了这些内容，相关文档的链接，版权数据”
  • header：“介绍性或导航辅助工具组”
• 根据规范中的示例，元素可能包含的内容：
  • footer：“返回...”链接，发布日期，导航，版权声明，ToS链接，作者参考
  • header：简介，标题/标题，版本号，日期，相关文档的链接，版权声明，导航，状态信息，通知
• WAI-ARIA角色（仅限footer / header切片根目录的body / footer：
  • header包含contentinfo role（“有关父文档的信息”）
  • function object:Draw() love.graphics.polygon("fill",self.body:getWorldPoints(self.shape:getPoints())) if self.image then love.graphics.draw(self.image, self.body:getX(), self.body:getY(), self.body:getAngle(), 1, 1, self.image:getWidth()/2, self.image:getHeight()/2) end end 包含banner role（“主要是面向网站的内容，而不是特定于网页的内容”）