How to semantically improve this html snippet

Question

Consider the following piece of markup:

<a href="/description/item1">
    <img src="item1.jpg">
    <footer>
        <section>
            <h2 class="title">Bar Foo</h2>
            <h3 class="subtitle">The end of the world</h3>
        </section>
        <section class="details">
            <h4 class="name">Painted by Someone</h4>
            <h5 class="id">123243552345</h5>
        </section>
    </footer>
</a>

DEMO

Anyway, I have always difficulties with semantics. I think that the above snippet doesn't use the elements like section/footer correct (please correct me if I'm wrong!) So I can rewrite it as:

<a href="/description/item1">
    <img src="item1.jpg">

    <header>
            <h2 class="title">Bar Foo</h2>
            <h3 class="subtitle">The end of the world</h3>
    </header>
    <footer>
            <h4 class="name">Painted by Someone</h4>
            <h5 class="id">123243552345</h5>
    </footer>
 </a>

But then again, shouldn't the anchor be (or be wrapped with) an article and is footer correct here, it is just content about the image ? Can someone help me with this piece of code and guide me through the process to make it semantically correct/better ? Any advice or documentation would be appreciated!

Looks like a figure with figcaption to me. – Rich Bradshaw Oct 27 '14 at 16:21 — Rich Bradshaw, Oct 27 '14 at 16:21
Do you need 4 levels of heading for one image? – Alohci Oct 27 '14 at 17:29 — Alohci, Oct 27 '14 at 17:29

score 1 · Accepted Answer · answered Oct 27 '14 at 16:37

As suggested by Rich Bradshaw, I would use the figure and figcaption tags for your problem:

<a href="/description/item1">
    <figure>
        <img src="http://p1.pichost.me/i/34/1573266.jpg" />
        <figcaption>
            <h2 class="title">Bar Foo</h2>
            <h3 class="subtitle">The end of the world</h3>
            <h4 class="name">Painted by Someone</h4>
            <h5 class="id">123243552345</h5>
        </figcaption>
    </figure>
</a>

figure

The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

figcaption

The tag defines a caption for a element.

The element can be placed as the first or last child of the element.

> But pay attention, those are HTML 5 tags and consequently just supported in HTML 5 browsers.

How to semantically improve this html snippet

1 Answers1