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="tank"> <img src="img/figures.jpg" alt="the tank"> <p>The tank</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="tank"> <pre></pre> <!-- add image from css --> <p>The tank</p> </figure>
can I use figure tag like that?
Thanks a lot
The suggested mark-up you have shown above does validate as HTML5 so I see no reason why a background image cannot be used on an element within the
<figure> element isn't restricted solely for use with images and/or captions, it can also be used to show for example, code, as the doctor explains
Semantically though I wouldn't use a
<pre> element as this element is supposed to represent preformatted text, which a background image isn't. I would go with a more generic element, such as a
You could set the background image on a generic image element, and that way you still get the benefit of alt text etc.
Use a transparent 1px image as a placeholder, and set height and width to suit the background image.
<figure id="tank"> <img src="img/1px.gif" alt="the tank"> <figcaption>The Tank</figcaption> </figure>
Note that you can use figcaption.
I think you should examine why you want to use sprites as background images though.
Images that are important enough to be wrapped in figure, shouldn't be relegated to background images.
if the images are not content then they shouldn't be wrapped in figure, apply them to some other suitable filler element.
@zcorpan has the right answer to the question you didn't ask, which should have been should I use a background image or not?
As a general rule, you should be able to disable CSS and still get the same content. If you use an empty element or a spacer gif as "content" and the image you want to show as a CSS background image, then users without CSS don't see the content you intended.
<figure> doesn't matter much in this question, it's the image that is relevant. If you have a content image, it should be in <img>.