我应该在 <aside> 中使用 <section> 标签吗？答案

【问题标题】：Shall I use <section> tags inside <aside>?我应该在 <aside> 中使用 <section> 标签吗？
【发布时间】：2013-10-04 07:29:31
【问题描述】：

有这样的标记：

<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> 内使用？

【问题讨论】：

标签： html tags semantics semantic-markup

【解决方案1】：

HTML 5 规范不禁止您在 aside 元素内使用 section 元素。 aside 元素内部允许有流内容，包括section 元素。

然而，尽管 div 元素现在在 HTML5 中应该是“最后的手段”的分段元素，但在这种情况下使用 section 违背了元素的意图。从我们看到的规范来看：

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

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

【讨论】：

'旁白的“部分”绝对不属于整个文档的大纲'。为什么不？ <aside> 不是分节根元素，这是阻止其部分列在文档大纲中的一件事。
“绝对不属于大纲的内容”：因为使用了标题 (h2)，所以大纲中列出了“小‘部分’”，甚至如果没有使用 section 元素。而且我认为这很重要：最新消息、时事通讯订阅等。应该是大纲条目。
我想这一切都取决于<aside> 内容的“旁白”程度。我会为小块内容使用边栏，例如真正注释内容的侧边栏，而不是文档整体结构的一部分。我不认为将旁白提升为一种顶级结构有什么问题，但这对我来说似乎很奇怪。 #恕我直言

【解决方案2】：

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

当您使用标题时，you have "implicit" sections anyway。通过使用section，您可以将它们显式化，即encouraged（见最后的引用）。

这些 sn-ps 语义等价（它们具有相同的outline）：

<!-- 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 的online outliner。

当然，您还可以在aside 内使用其他分段元素代替section（例如，nav 用于导航该aside，或article 用于相关帖子列表等。 )。

旁注：在您的情况下，您可以考虑使用多个 aside 元素。这通常无法回答，这取决于内容，但经验法则可能是：如果所有这些部分都以某种方式相关（即如果你能找到描述所有这些部分的标题）。如果没有，请使用多个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。）

【讨论】：