Question

I started reading upon html5 and I am trying to work on a project so that I can see how things work. I know that the tag can be use like this:

<figure id="car">
   <img src="img/car.jpg" alt="the car">
   <p>The car</p>
</figure>

Though I need to have 6 of those figures, as such I want to use sprites and (unless I dont know something important) sprites only work if i add the image width css (background-image). So what I would do is something like:

<figure id="car">
   <pre></pre> <!-- add image from css -->
   <p>The car</p>
</figure>

can I use figure tag like that?

Thanks a lot

Answer 1

The figure and figcaption elements are fairly specific in their semantic purpose. If you don’t care for semantics, there is really not much of a reason to use them. Divs will work fine. Here is how figure should be used:

<figure>
  <img src="/image.jpg" alt="A description of what this image is">
  <figcaption>A description that may or may not describe the image specifically and accompanies content from within the article.</figcaption>
</figure>

edit: I should mention that a pre with a background is likely not how this is intended to be used and will not help people with screen readers at all. Bots for search engines may respond differently as well, which could be a negative for you.