Category Archive

We generally think of alt text as something that we add for users of screenreaders or text-only browsers. But what about the millions of users of search engines that index images?

The two key parameters the engine indexes are the image’s name and its alt text. (It may also make some inferences from the image’s context.) When writing alt text, think about what keywords one might use to bring that image up in a search engine, and try to include those words in a sensible, succinct phrase.

This is NOT to suggest that you fill your alt tags with SEO keyword optimizing nonsense. That rarely does the user any good. What I’m suggesting is that we consider the other means by which people search content, and the parameters by which that content is indexed.

Adding indexable meaning to your pages also makes the web more fun. For example, searching on the word “pint” in google images brings up this charming guy:

He was accompanied by this alt text:
Mr Jack Virgo enjoys a pint following a reduction in price of two pence in the 1959 budget.

Now doesn’t that make you want to write more indexable alt text? Mr. Virgo is all for it.

Further reading: TASI: A Review of Image Search Engines

Styling horizontal rules with CSS is fairly intuitive in IE: to change the color, use the color attribute; to change the width and heights, use the width and height attributes.

Styling horizontal rules in other browsers, however, is slightly less intuitive. To change the color of the horizontal rule, you need to change the background-color attribute. However, this still leaves an unsightly shadow effect that the now-deprecated noshade attribute once took care of. This has led many web authors to stop using the <hr /> tag altogether in XHTML, and fake it with borders on empty divs. But there is a simple solution to this problem - turn off the borders on the <hr>!

hr {border-style: none;}

Dotted-line <hr>s

To go one further and have a dotted-line <hr />, set both the color and background-color to match the color of the element it is contained within. Then add a bottom border with the desired pattern (solid, dotted, dashed, etc) to the <hr />, and viola! A dotted horizontal rule:

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }