Neil Turner's Blog

Blogging about technology and randomness since 2002

The semantics of uppercase

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:

  1. For emphasis
  2. To show that the word is an abbreviation
  3. To show that the word is an acronym
  4. 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.

7 Comments

  1. I’m guilty of two things.
    1. Using capitals for EMphasis.
    2. Knowing better.
    However point 2 is more crucial as the bulk of people who use caps as emphasis don’t know any better, and I’ve fallen into the same lazy trap as they have. If you exclude the reasons I think using caps does work though, it then offers you three methods of emphasis which sometimes you need, and I would imagine a lot of it’s usage stems from the “caps is shouting” school of thought??
    I wonder how my site reads through a screen reader??

  2. Thanks for the tip about acronyms. I’m going to start implimenting that via MTMacro. The only thing is I’m not too sure how I can format acronyms with CSS.
    For example, how do I format my acronyms like yours?

  3. Jeremy: You’ll find it much easier if you use Henrik Gemal’s Acronym plugin instead. It comes with a database of over 300 common acronyms out of the box and also has information about styling them in CSS.

  4. The problem with abbr and acronym is that nobody can agree on which means what, probably due to different locales having different definitions. I’ve also seen a definition which defines abbreviations and acronyms as the exact opposite as what you’ve just proposed.
    I’ve seen lots of different definitions from lots of different bloggers and dictionaries and encyclopaedias.
    I think that’s why acronym has been removed from the latest XHTML 2.0 draft. Partly to avoid confusion and partly for forwards-compatibility I only use abbr but I know that solution isn’t perfect for everybody because some people like to dumb down to the lowest common denominator (i.e. IE).

  5. I don’t see URL as an acronym, I don’t, nor know of anyone who, says “earl” for it. It is in initialism, taking the first letters of the phrase to form a shorter version. Remember all acronyms and initialisms are abbreviations so you can’t go wrong with marking them up like that. However, this brings me on to my second point…
    It’s true about people using acronym just because it’s supported. This is Internet Explorers fault, because it doesn’t render it, and it can’t be styled. I doubt it’ll be fixed in IE7 either.
    The reason it is important to mark these up correctly is mainy for screenreaders. A normal user isn’t going to notice the difference (they’ll see a title tag, if you use it), but remember this — when marking them up, can you rely confidently for the browser to READ out the acronym… if not, use <abbr>.
    For some more information I can point you to…

    I have written a few articles on this point of semantics and the correct use of markup in HTML. Hopefully they’ll appear online soon 😉

  6. I ALWAYS USE CAPS. MY WIFE TELLS ME THAT IN THE COMPUTER WORLD, THAT MEANS YOU ARE ANGRY. IS THAT TRUE?

  7. Basically, yes. Using uppercase indicates that you are shouting and is often considered rude.