Shall I use <section> tags inside <aside>?

Question

Having a markup like this:

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

Which tag is more appropriate here: <div> or <section>?
Is section supposed to be used only inside <article> tag and never inside <aside>?

Answer 1

The HTML 5 spec does not prohibit you from using the section element inside of an aside element. The aside element is allowed to have flow content inside, and that includes the section element.

However, even though the div element is now, in HTML5, supposed to be the sectioning element of "last resort", using section in this context goes against the intent of the element. From the spec we see:

Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Now, little "sections" of an aside are definitely not something that belong in the outline of the entire document, so the short answer to your question is to use div. Alternatively, because your aside looks like it has four "items" inside, you might consider a ul with four lis and then style with the rule aside ul li.

Answer 2

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>…</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>

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>…</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>

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