Question

我已阅读conflicting webpages关于使用HTML 5的section元素的信息。在语义上是否适合将它用作我的页眉和页脚之间的部分？

<body>
  <header>logo, nav links</header>
  <section>main content of my webpage</section>
  <footer>copyright, more links, contact info</footer>
</body>

Answer 1

一个好的起点是布鲁斯劳森的Scooby Doo and the proposed HTML5 <content> element 。

你会在那里找到一个链接opinion of Ian (Hixie) Hickson，他是WHATWG版HTML5（又名HTML Living Standard）的编辑，直到最近编辑了HTML5标准的W3C版本。

他所说的（并且至少在过去5年中一直表示）是那里不需要切片元素。如果您需要一个包含元素，而不是页眉或页脚中的所有内容<div>是要使用的元素。

另一方面，W3C HTML工作组的另一名成员Steve Faulkner为您的用例提出了<maincontent>元素，理由是允许将ARIA“主要”角色合并到原生HTML。

FWIW，对我来说，<body>中的页眉和页脚之间应该有一个特殊元素，但<section>或<article>中的页眉和页脚之间没有特殊元素，这似乎很奇怪我和Hixie在一起。

我也不购买Steve's comments它会有用，因为它会标记主要内容，即使其他分区和页眉/页脚元素没有正确标记，因为似乎没有我可以提倡使用它的情况。它似乎只适用于想要完成半工作的网络作者。

请注意，如果<maincontent>被接受，则不会成为HTML5的一部分。最早出现的可能是HTML 5.1

Answer 2

<section>的语义略高于<div>。 HTML5的<section>要点之一是它可以帮助浏览器理解文档的outline。

您的方法实际上取决于我们网页的内容。一切都在<header>和<footer>之间紧密相关，还是可以分解为更多<sections>甚至其他元素？

总会有充满冲突建议的来源，特别是对于HTML5所处的开发和利用阶段的事情。

Answer 3

如果您使用标题（h1到h6），那么您已经在使用可称为“隐式部分”的内容。以下两个标记示例的概述 语义相同：

示例1：

<body>
  <header>
   <h1>My cool site</h1>
   …
  </header>
  <section>
   <h1>My cool article</h1>
   …
  </section>
  <footer>…</footer>
</body>

示例2：

<body>
  <header>
   <h1>My cool site</h1>
   …
  </header>

  <h2>My cool article</h2>
   …

  <footer>…</footer>
</body>

因此，在这种情况下，如果明确添加section则无关紧要：大纲（语义结构）将是相同的。附注：recommended始终明确使用切片元素来分割内容：

还鼓励作者明确地将部分包含在切片内容的元素中，而不是依赖于在切片内容的一个元素中具有多个标题而生成的隐式部分。

（但是，这仅适用于切片内容，而不适用于切片根（如body））

现在，如果我们不知道您使用的是什么标题，那么您的问题通常无法得到解答。有些情况需要您使用section（或article），否则您的页面会出错。在某些情况下，使用显式section（或article）是可选的。

一些一般性提示（仅适用于“原型”网站;当然有很多例外;这些提示只能给你一个想法）

您网站的每个网页都应该有网站标题（例如“John的博客”）和 内容标题（例如“我找到了”一个有趣的视频“）
- 网站标题是body中的第一个标题，该标题未包含在切片元素中（section，article，nav或aside）
网站标题“支配”您网页的所有范围，例如在大多数情况下a）导航和b）内容
您网页的所有范围都应该有一个标题（您可以使用CSS在视觉上隐藏它们）。如果您不能或不想为范围指定标题，则使用切片元素（section，article，nav或aside），这将创建一个无标题/隐含标题

适当使用HTML 5 section元素作为页眉和页脚之间的内容？

3 个答案: