Question

应该使用哪个新的HTML5元素而不是div.container和div.content？

<header>
  site header
</header>

<div class="container">

  <div class="content">

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

  </div>

  <aside>
    sidebar
  <aside> 

</div>

<footer>
  site footer
</footer>

Answer 1

div.content可能是<section>。 div.container应该保持div。

Answer 2

它们都不是为此而制造的。不过，我建议使用ARIA个角色。

<div class="container" role="document">

  <div class="content" role="main">

这些也可以在CSS中使用div[role='main']

等选择器

Answer 3

我强烈建议您在HTML 5 DOCTOR处阅读article和section之间的差异。

然后，您将能够对使用哪些切片元素以及何时以及何时不使用div做出明智的判断。

我从他们的博客中推测的是：

文章：用于自己有意义的内容！

部分：用于内容，它是另一部分或文章的逻辑部分（很好地嵌套这些部分）。

div：仍然用于容器或作为样式的钩子，这是不应该使用html5元素的东西。

最后，使用html5分区元素的决定通常可以通过它包含一个标题来确定（尽管这不是一个硬性规则）。有几个有用的工具可以帮助做出这些决定。

HTML5 Outliner - online

HTML5 Outliner - chrome extension

Answer 4

要将此问题视为一个建设性问题，需要将其解释为询问HTML5草案中有关此问题的内容。然后答案是W3C HTML5草案中的第4.13.1节The main part of the content。简而言之，它说通常你不需要任何特定的标记：只需将内容放在那里。显然，如果需要将其作为CSS或脚本中的一个单元处理，可以将其包装在div元素中。

根据该部分，如果它构成“较大作品的一部分，例如章节”或“独立的内容单元”，则可以将其标记为section或article人们可以想象独立地联合“，分别。

这是编码风格的问题。没有通用软件（如浏览器或搜索引擎）关心您的选择。

Answer 5

一般情况下，您无法回答此示例，具体取决于页面内容。

这里重要的是页面大纲。因此，您可以忽略所有div元素，因为它们不会影响大纲。只有在需要它们作为CSS或JavaScript的钩子时才使用它们。

第一个问题将是：aside是与整个页面相关还是与“内容区域”相关？如果它与整个页面相关，则不得包含在另一个sectioning元素中。如果它与内容区域相关，则包含在该分区元素中。在这里，我假设它与整个网页有关。

第二个问题：三个article元素是否有共同的标题？例如：“我最喜欢的书籍”，“最新博客帖子”或“产品”。如果是这样，您应该使用分组元素对这三个article元素进行分组。如果没有可能的标题，你可能不需要这里的分段元素，所以可以使用div或不使用元素。

第三个问题（如果第二个问题得到肯定回答）：此分段元素应该是section还是article元素？如果您选择使用article元素来表示这三个“事物”是正确的，那么可能是（但不是不可避免！）需要section这里。再次使用article是否正确取决于真实内容。所以可能可能你想要

<article> 
  <section></section>
  <section></section>
  <section></section>
</article>

而不是

<section> 
  <article></article>
  <article></article>
  <article></article>
</section>

在这里，我假设您选择使用article来表示三个“事物”是正确的。

所以最终版本可能如下：

<header>
  <!-- if this header applies to the whole page -->
</header>

<section>

  <!-- a h1 like "Latest blog posts" -->

    <article>
      content
    </article>

    <article>
      content
    </article>

    <article>
      content
    </article>

</section>

<aside>
    <!-- if this aside applies to the whole page -->
<aside> 

<footer>
  <!-- if this footer applies to the whole page -->
</footer>

内容的HTML 5元素？

5 个答案: