2

应该使用哪个新的 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>
4

5 回答 5

2

div.content可能是一个<section>. div.container应该可能仍然是一个div.

于 2012-09-15T14:46:12.573 回答
2

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

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

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

然后这些也可以在 CSS 中与选择器一起使用，例如div[role='main']

于 2012-09-15T14:46:22.790 回答
1

我强烈建议阅读HTML 5 DOCTORarticle之间section的区别。

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

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

文章：用于本身有意义的内容！

部分：对于作为另一个部分或文章的逻辑部分的内容（可以嵌套这些）。

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

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

HTML5 大纲 - 在线

HTML5 Outliner - chrome 扩展

于 2012-09-15T15:30:04.327 回答
1

要将这个问题视为建设性问题，需要将其解释为询问 HTML5 草案对此事的看法。那么答案就是W3C HTML5 草案中的4.13.1部分内容的主要部分。简而言之，它表示通常您不需要任何特定标记：只需将内容放在那里即可。div显然，如果您需要将其视为 CSS 或脚本中的一个单元，您可以将其包装在一个元素中。

根据该部分，它可以被标记为section或article是否构成“更大作品的一部分，例如一章”或“人们可以想象独立联合的独立内容单元”。

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

于 2012-09-15T17:32:45.193 回答
1

你不能笼统地回答这个例子，这取决于页面的内容。

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

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

第二个问题：这三个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>
于 2012-09-15T19:41:47.757 回答