Alex Rivera | Logout

Correct usage of HTML5 `figure` and `aside`

Asked 2010-09-26T13:21:47.633
22

I have a chunk of a page that looks semantically this:

Heading A

Textual information related to heading A.
Blah blah blah blah blah.

[image gallery related to heading A]

I can think of a couple of ways to mark this up:

Method 1:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Method 2:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Method 3:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>
    <aside>  <!--Method 3b: use section here-->
        <figure>
            <img />
            <figcaption>Image 1</figcaption>
        <figure>
        </figure>
            <img />
            <figcaption>Image 2</figcaption>
        </figure>
    </aside>  <!--Method 3b: use section here-->
</section>

Method 4:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p&g
html semantics semantic-markup
Edit
Report

1 Answer

9

Inserting <figure> into <aside> does not make much sense in this case. A rule of thumb for choosing between <figure> and <aside> is to differentiate whether:

  • The content make sense on its own and could be moved to a different part of the page or even to a separate page (e.g appendix) but conveys important information. If so, choose <figure>. // Examples are: illustrations, diagrams, blocks of code, graphs, audio/video etc. (mostly graphical content), all of which are accompanying the main topic of the document and are often referenced as a single unit.
  • The content is not essential to understand the section in which it is placed, could be completely sacrificed or doesn't contribute to the main topic of that section. Also, the content makes sense only within the surrounding context. If so, choose <aside>. // Examples are: pull quotes, complementary context related information, sidebars as in printed typography, ads, etc. (mostly textual content). I can well imagine Google AdSense.

Having this in mind, I would accept the Method 2 too:

  • Method 1 has been correctly excluded by @robertc.
  • Method 3a is excluded by me (your example doesn't meet the requirements for <aside> stated above, i.e. there is no reason to wrap the <figure>s with <aside>).
  • Method 3b – no need for nesting in another <section> as long as there is no additional (<h2>) heading for <figure>s.
answered 2011-08-01T01:34:27.803

Your Answer