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

我浏览了w3.org页面上的article元素，其中一个例子让我吃惊：

<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元素中。
根据W3.org 4.3.8 The footer element的说法，这是一种有效的用法，但这样使用似乎很奇怪。
页脚通常包含有关其节的信息，例如谁编写的、到相关文档的链接、版权数据等。
这是对的，没有人说它应该放在实际的文章下面。
我本可以使用一个header元素来实现这个用法，但是在4.3.7 The header 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>

有什么特别的原因吗？

最佳答案

footer和header之间的语义差异并不总是很明显。在不清楚的情况下，重要的是你使用其中的一个，而不是使用哪一个。
footer和header的位置
位置无关紧要（只要在相关区域内）。由于aheader是介绍性内容，因此它通常会出现在节的顶部附近。对于footer，规范说明：
页脚不一定要出现在节的末尾，尽管它们通常会出现。
它甚至可能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具有contentinfo role（“有关父文档的信息”）
header具有banner role（主要是面向站点的内容，而不是页面特定的内容）

关于html5 - HTML5页脚元素和令人困惑的w3.org示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40111882/