Baaad practice – Do it like this

This list just contains the images now, and an advantage of this on the wrong approach is that you can use captions in a semantically senseful manner. For example, <li><img src="img.jpg"><p>Description of this image</p></li>. Ten, position the <p> underneath the image and you've got quite easy captions.

And now, a semantically sense-making list of images. Add paragraphs for captions and you're completely the man!

<ul>
	<li><img src="img.jpg" alt="" title="" /></li>
	<li><img src="img.jpg" alt="" title="" /></li>
	<li><img src="img.jpg" alt="" title="" /></li>
</ul>
<ul>
	<li><img src="img.jpg" alt="" title="" /></li>
	<li><img src="img.jpg" alt="" title="" /></li>
	<li><img src="img.jpg" alt="" title="" /></li>
</ul>

It's a lot easier now to add images and captions, and it's perfect for dynamically generated galleries.

Back to index