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元素。

但是，即使现在{HTML}中的div元素应该是“最后手段”的分段元素，在此上下文中使用section也违背了元素的意图。从我们看到的规范：

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

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

Answer 2

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

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

这些代码段语义上等效（它们具有相同的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。

当然，您还可以在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。）

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

2 个答案: