Correct usage of HTML5 `figure` and `aside`

Question

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> </section> <aside>     <figure>         <img />         <figcaption>Image 1</figcaption>     <figure>     </figure>         <img />         <figcaption>Image 2</figcaption>     </figure> </aside> 

Which is the semantically correct way of doing it?

Answer 1

It's unlikely that you're going to get complete agreement on a 'one true way' to mark this up, but I would choose method 2. My reasoning is:

• A figure element cannot have multiple figcaption children, so method 1 is invalid
• A figure is already a type of aside, so no need to wrap them: "The figure element represents a unit of content ... that can be moved away from the main flow of the document without affecting the document’s meaning." (W3C HTML5 spec, figure element)
• Unless the two figures are themselves related somehow, other than both being related to the section they're in, no need to group them further than they are already