CODEWITHSUNDEEP
htmlsemantic-websemantic-markup
nonopolarity
nonopolarity

Reputation: 151036

What HTML element should be used for a label / title under images?

Let's say I have a row of images, and each image should have a short label or title under it.

Should I use <h3> or just <div> or something else for that label or title?

For example:

<ul>
    <li>
        <img ...>
        <h3>Iron Man</h3>
    </li>
    <li> ... 
    </li>
</ul>

Would it actually depends on 3 cases, that,

  1. what if the title is for the content of this page (such as pictures of birds and their academic names, such as "sparrow" and "finch"), then <h3> could make more sense? or

  2. what if it is just titles for a game, so it can be "iron man", "hello kitty", "bugs bunny", etc, so that it really doesn't mean real content for the page but rather just some names used for the game, then <div> will be more suitable, or

  3. if the games is for "hello kitty", "pochacco", "keroppi", so that they are all characters of Sanrio, then it actually is more semantically correct to use <h3> because they actually denote meaningful names for the theme of the game?

(or besides <h3> and <div>, would it be more semantically correct to use other tags?)

Upvotes: 3

Views: 899

Answers (2)

unor
unor

Reputation: 96597

There are many possible ways and they all depend on your actual content. This can’t be answered generally.

If the label/title should be part of your document outline, then you’ll want to use a heading (not necessarily h3), and perhaps a sectioning content element (e.g., section), containing the heading, the image, and possibly other content.

<article>
  <img src="…" alt="…" />
  <h1>…</h1>
</article>

Using figure + figcaption (as suggested by David Thomas) is appropriate in many cases, but not if the label is a heading that should be part of the document outline. As figure is a sectioning root element, any headings/sections it has won’t affect this outline.

<figure>
  <img src="…" alt="…" />
  <figcaption>…</figcaption>
</figure>

If you want to list images + captions, you could also use dl:

<dl>
  <dt><img src="…1" alt="…1" /></dt> <dd>…1</dd>
  <dt><img src="…2" alt="…2" /></dt> <dd>…2</dd>
</dl>

It would also not be wrong to just use p (no semantic/machine-readable relation, though):

<img src="…" alt="…" />
<p>…</p>

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

I'd suggest using <figure> and <figcaption> elements:

<li>
    <figure>
        <img src="…" />
        <figcaption>
            <h3>Image Title</h3>
            <p>some text to describe the image</p>
        </figcaption>
    </figure>
</li>

But this is, incredibly subjective.

References:

Upvotes: 3

Related Questions