我应该在<aside>里面使用<section>标签吗？

Question

有这样的标记:

<aside>
    <div class="widget">
        <h2>Latest news</h2>
        <ul>...</ul>
        <a>more news</a>
    </div>
    <div class="widget">
        <h2>Choose site theme</h2>
        <input type="select" />
    </div>
    <div class="widget">
        <h2>Newsletter subscription</h2>
        <form>...</form>
    </div>
    <div class="widget">
        <h2>Related articles</h2>
        <ul>...</ul>
    </div>
</aside>

哪个标签更合适:<div>或<section>？
部分应该只用于<article>标签内部而不是内部<aside>？

Answer 1

HTML 5规范并不禁止您使用section元素内部的aside元素.该aside元件允许有内部流内容,以及包括所述section元件.

但是,即使div现在,在HTML5中,元素应该是"最后手段"的分段元素,section在此上下文中使用也违背了元素的意图.从规格我们看到:

注意:section元素不是通用容器元素.当一个元素仅用于样式目的或作为脚本编写的便利时,鼓励作者使用div元素.一般规则是,只有元素的内容在文档的大纲中明确列出时,section元素才是合适的.

现在,旁边的小"部分"绝对不属于整个文档的大纲,所以对你的问题的简短回答是使用div.或者,因为你的旁边看起来里面有四个"项目",你可以考虑ul用四个lis然后用规则的样式aside ul li.

Answer 2

是的，您可以section在那里使用。

使用标题时，总有“隐式”部分。通过使用section，您可以使它们显式显示，这是受鼓励的（请参阅最后一个引号）。

这些代码段在语义上是等效的（它们具有相同的轮廓）：

<!-- using headings + div elements -->
<aside class="example-1">
  <h1>Heading for this aside</h1>
  <div>
    <h2>Latest news</h2>
    <p>…</p>
  </div>
  <div>
    <h2>Choose site theme</h2>
    <p>…</p>
  </div>
</aside>

<!-- using headings only -->
<aside class="example-2">
  <h1>Heading for this aside</h1>
  <h2>Latest news</h2>
  <p>…</p>
  <h2>Choose site theme</h2>
  <p>…</p>
</aside>

<!-- using section elements -->
<aside class="example-3">
  <h1>Heading for this aside</h1>
  <section>
    <h2>Latest news</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Choose site theme</h2>
    <p>…</p>
  </section>
</aside>

注意：如果您没有提供的标题，则使用aside时文档的轮廓将有所不同section。这不是一件坏事。我想轮廓通常是您通常想要的。您可以使用gsnedders的在线大纲显示工具。

当然，您也可以在其section内部而不是其他节元素aside（例如，nav用于导航aside，或article相关帖子列表等）。

旁注：在您的情况下，您可以考虑使用多个aside元素来代替。通常无法回答这个问题，这取决于内容，但是经验法则可能是：如果所有这些部分都以某种方式相关（例如，如果您可以找到描述所有这些内容的标题，则使用aside带有几个sections/标题的内容）部分）。aside如果没有，请使用多个。

因此，您的示例可能如下所示：

<aside class="widget">
  <h2>Latest news</h2>
  <ul>…</ul>
  <a>more news</a>
</aside>

<aside class="widget">
  <h2>Choose site theme</h2>
  <input type="select" />
</aside>

<aside class="widget">
  <h2>Newsletter subscription</h2>
  <form>…</form>
</aside>

<aside class="widget">
  <h2>Related articles</h2>
  <ul>…</ul>
</aside>

（div如果需要，请使用一个容器。）