Menu
I'm curious what tag would make the most semantic sense to encapsulate a group of thumbnail images? Does it make sense to use the <figure> tag (reading the html5 spec, it's not clear)? Or stick with a <div>, or is it considered it's own <section>?
Normally I'd probably use a div to section it off, but trying to utilize the semantic structure of html5, I was hoping maybe there would be a tag that fits this sort of content better.
Thoughts? Suggestions? All are welcome. Thanks!
460
Approach: Sometimes the user wants to display a specific image of his choice as the thumbnail of the video. This can be simply done by using the poster attribute. All you have to do is create a poster attribute in the video tag and place the URL of the thumbnail image in it.
To create a thumbnail add an image using an HTML <img> tag. Also, Use CSS border property to add a border to the image. Set the smaller width to image with CSS width property. Add some padding too.
From a semantic point of view, using <figure> is probably the best fit. If you check the HTML5 spec, you'll see that it's perfectly acceptable to include a series of images within a single <figure> declaration.
Example:
<figure>
<img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
There is also a similar example shown on HTML5Doctor.com where multiple images (which could just as easily be thumbnails) are listed as children of a single <figure> element.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
