This is a long and slightly boring essay on the use of uppercase text in web pages and how best to apply semantics to it to convey the reason why the text was made uppercase. It was mostly inspired by the fact that I’ve added a selection of new abbreviations and acronyms to the database file, which means that a few old posts might show as unread in your newsreaders.
In written English, we put words in uppercase for four main reasons:
- For emphasis
- To show that the word is an abbreviation
- To show that the word is an acronym
- For stylistic effect
When it comes to writing words in a web page, however, if you’re inclined to use uppercase, it’s a good idea to think why you are putting the word in uppercase, and then give that word the semantics necessary. This isn’t necessarily down to fussiness, rather it’s to aid non-human readers of your web page understand it.
Let’s take the sentence “Jack went to a HUGE party”. “huge” is in uppercase here, and to you and me it’s probably obvious that this is because the party was really huge. But a computer might think that “HUGE” is an acronym, maybe for the Happy Ugandan Ginger Enterprise who were holding a party that Jack was invited to. If that computer is to read that page to someone, say a blind person who can’t read that page, it would need to know whether “huge” was an acronym, or whether to apply emphasis to the word. Therefore, we need to add markup.
If it is emphasis we want, then we should use “
Jack went to a <em>huge</em> party” – the
<em> tag tells the computer that the word requires emphasis. We shouldn’t use uppercase, but, if you felt it would look better if you did, you could define a CSS rule that would make the output of the
<em> tag uppercase (by default it just makes the text italic).
If it’s an acronym, then we should use “
Jack went to a <acronym>HUGE</acronym> party“. It’s actually a very good idea to use the
title="" attribute to say what the acronym means as then the computer can read out the definition. It also aids people who are unsure as to the meaning of the acronym as they can hover the mouse pointer over the acronym to see its definition.
I also mentioned stylistic effect. You may notice that at the top of this page “Neil’s World” appears all in lowercase, because I think it looks nice that way. But in the HTML markup, it appears capitalised, because that’s how it should be, and then I’ve used CSS to make it appear lowercase. The same would apply if you wanted, say, a title to be in uppercase – write it in title case, then use CCS to transform it to appear as uppercase.
Finally, a note about acronyms and abbreviations. The two are often taken as being the same, but they do differ – an abbreviation is merely where a phrase has been abbreviated (so British Broadcasting Corporation is usually abbreviated to BBC). But an acronym is an abbreviation that forms a new word, like URL (Uniform Resource Locator) which some pronounce in the same way as ‘earl’. Generally, all abbreviatons, whether they are acronyms or not, get marked up using the
<acronym> tag, mainly because the browser which 89% of internet users use doesn’t support the
<abbr> tag which should be used for abbreviations. With a bit of luck, however, the forthcoming release of Internet Explorer 7 will solve that.