我应该在<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> 标签中吗？

- Sfisioza

Answer 1

HTML5规范并不禁止您在aside元素内使用section元素。aside元素允许包含流内容，包括section元素。

然而，尽管在HTML5中div元素现在被认为是“最后的手段”分区元素，但在这种情况下使用section与元素的意图相违背。从规范中我们可以看到：

引用：

注意：section元素不是通用容器元素。当只需要元素进行样式或作为脚本方便时，建议作者使用div元素。一般规则是，只有当元素的内容明确列在文档的大纲中时，section元素才是适当的。

现在，侧边栏的小“部分”绝对不属于整个文档的大纲，所以回答你的问题的简短答案是使用

。或者，因为您的侧边栏看起来有四个“项目”，您可以考虑使用< ul >和四个< li >，然后使用规则< aside ul li >进行样式设置。

- Ray Toal

---

“aside”的“sections”绝对不属于整个文档大纲的一部分。为什么呢？因为<aside>不是一个节段根元素，这也是唯一会阻止其节段被列在文档大纲中的原因。 - Alohci

“绝对不属于纲要的内容”：因为使用了标题（h2），即使没有使用 section 元素，“小节”仍然会在纲要中列出。我认为这非常重要：最新消息、通讯订阅等应该成为纲要条目。 - unor

我想这完全取决于<aside>内容的“离题程度”。我会将侧边栏之类的小块内容用作旁注，而不是文档整体结构的一部分。我不认为将旁注提升到一种顶级结构有什么问题，但对我来说似乎有些奇怪。 #IMHO - Ray Toal

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的在线大纲进行调整。

当然，您也可以在aside中使用其他分区元素（例如nav用于该aside的导航，或article用于相关帖子列表等）。

顺便说一句：在您的情况下，您可能需要考虑使用多个aside元素。这不能一般化地回答，因为它取决于内容，但一个经验法则可能是：如果所有这些部分都有某种关联（即，如果您可以找到描述所有这些部分的标题），则在一个aside中使用多个section/heading。如果没有，请使用多个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。）

- unor