9

有这样的标记：

<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>？

4

2 回答 2

8

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

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

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

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

于 2013-10-04T07:35:55.183 回答
7

Yes, you may use section there.

When you use headings, you have "implicit" sections anyway. By using section, you can make them explicit, which is encouraged (see last quote).

These snippets are semantically equivalent (they have the same outline):

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

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

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

Note: if you don’t provide a heading for the aside, the document outline will be different when section is used. Which is not a bad thing; I guess that outline is what you typically want anyway. You can play around with gsnedders’ online outliner.

Of course you can also have other sectioning elements instead of section inside of the aside (e.g. nav for the navigation of that aside, or article for a list of related posts, etc.).

Side note: In your case, you might consider using several aside elements instead. This can’t be answered in general, it depends on the content, but a rule of thumb could be: Use one aside with several sections/headings inside, if all these sections are related somehow (i.e. if you could find a heading that describes all these sections). Use several aside, if not.

So your example could look like:

<aside class="widget">
  <h2>Latest news</h2>
  <ul>…&lt;/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>…&lt;/form>
</aside>

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

(And use a container div for these, if you need one.)

于 2013-10-05T23:57:16.397 回答