CODEWITHSUNDEEP
htmlsemanticssemantic-markup
Eric
Eric

Reputation: 97575

Correct usage of HTML5 `figure` and `aside`

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?

Upvotes: 22

Views: 10874

Answers (2)

Adam
Adam

Reputation: 2061

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.
  • Method 4 is also excluded by me – the same argument as for Method 3 plus that the <figure>s should not be placed in a different section than the related text and heading are.

Wheter the <figure> should be used within galleries is not obvious from the W3C Specification. Ideally, a page should also contain some paragraph text related to the main topic, then the <figure>s should be referred from that text and be "depictive" only, not the whole main content itself. On the other hand, such an usage is not in any way contrary to the specification as gallery items usually are "self-contained" (not bound with the context) – in particular when enriched with <figcaption> so their meaning is clear. I can't imagine better element for this usage.

Upvotes: 9

robertc
robertc

Reputation: 75707

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

Upvotes: 24

Related Questions