Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS:
Now I won’t delve too deeply into how to code your captions. Some people do it this way:
<p><img src=”image.jpg” alt=”image” /><br />Caption text here</p>
But apparently the proper, semantic way would be to use a definition list, like so:
<dl>
<dt><img src=”image.jpg” alt=”image” /></dt>
<dd>Caption text here</dd>
</dl>
where:
dl = definition list
dt = definition term
dd = definition definition
Got that? Okay, let’s prettify it with some CSS. I want to caption a photo of a nicely sharpened pencil. Here’s the screenshot of what I want:
And here’s how to accomplish it:
HTML:
<dl>
<dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt>
<dd>I love the smell of freshly sharpened pencils</dd>
</dl>
CSS:
.photographs dt {border:1px solid #ccc;font-size:82%;}
.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}
Me, I like my captions plain and simple- I think the photos should stand out more than the captions. But once you know what you can do, you can basically go wild. For example, replacing the dd style with this:
.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}
will give you this:
You gotta love CSS.
How do you like to caption your photos?
