Tags: HTML Typography
Podcasts, like the one Responsive Web Design produces every week, present an interesting problem for accessibility. How can visitors who can't hear the podcast (including human visitors with hearing impairments, human visitors whose device can't download the audio, and non-human search engine bots) access the content? The answer is to transcribe it, and although this isn't an easy or cheap undertaking, it's one that I think a conscientious content producer should consider. And that's what the RWD team do.Skip to navigation
Audio transcript markup
I was surprised, though, when I saw the markup for RWD's audio transcript:
Two unrelated questions crop up: (a) What is a
<dl> and when do you use it, and (b) what's the correct way to mark up apostrophes in HTML? I'll leave the first question for a future post (it's really interesting!). In this post, I'm intrigued about apostrophes.
Apostrophes, quote marks and primes
Just in case you fell asleep during this lesson at school, we use an apostrophe in English in contractions and for possession:
- I'm (I am) leaving. That's (that is) a shame. I would've (would have) kept it if I were you. Let's (let us) go.
- The current prime minister's name is David Cameron (the name of the prime minister). This is the children's section (the section for children).
We don't use an apostrophe for plural nouns and possessive adjectives:
- Knives and forks. Sticks and stones. Cops and robbers.
- My favourite country is Greece. Its capital is Athens.
Incidentally, I didn't learn about the correct use of apostrophes until I was about 27 (thanks for that, British state education). I'm grateful to the person that pointed it out to me, but now walking past signs like “Closing down sale — all item's 20%” makes me feel extra sad.
There are a couple of punctuation types that are similar, but distinct from, the apostrophe. Single quotation marks are sometimes used for writing direct speech. They are marked up using
’. For example:
Prime marks are used for units of measurement such as feet and inches. The double prime mark is marked up with
″ and the single prime mark is
- My height is 6″ 1′, or six foot one inch (1.85 metres).
There are other similar punctuation marks, but I think these are the ones that are most likely to be confused.Skip to navigation
On an English keyboard, there's only one ' key, usually situated near the Return key. (OK, so there's also ` in the top left corner, but I don't know what it's for, so I'm conveniently ignoring it). Many word processing programmes will automatically swap ' out with a closing quotation mark. HTML is much more literal, so web page authors have two options. The first is to hit the ' key, and the second it to mark it up using a HTML entity.Skip to navigation
Do we have to use HTML entities?
Since I started learning web design, I believed, with increasingly less certainty, that we can't just type an apostrophe, like we do in a word processor. My understanding was that we either had to type the HTML entity name for an apostrophe,
', or use the entity number,
’. Why? Umm…reasons?
Now I see that RWD, for one, don't seem to follow my rule. They use a hard right single quote mark, as if they just copy-and-pasted it right from Word. Is anybody else in the “Let's not bother using a HTML entity” club?
- Jeffrey Zeldman, godfather of the web, sometimes uses hard apostrophes and other times
- A List Apart, online magazine for the discerning web professional, uses hard punctuation.
- Jen Simmons of the Web Ahead agrees with RWD: hard right single quotes are the way.
Ahh! So, my favourite web design gurus have no consistent way of marking up apostrophes. Surely someone has a definitive answer?Skip to navigation
Straight from the horse's mouth?
As far as I'm concerned, the ultimate authority on all things internet is the W3C. They have a list of HTML entities for HTML4, and although it doesn't even mention the apostrophe explicitly, it does refer to right single quotation marks. Yes, the entity name is
’ and the entity code is
Wait a ruddy minute! That's the same code as the apostrophe, above. So, it turns out that
’ is not really an apostrophe, but a closing quotation mark. I think I'm losing my grip on reality. What does their validator tool say?
Passing the validation test
Which of these apostrophes are valid according to W3C's HTML validator tool? I put this markup in to see what happened and, yes, they all validate.
So, all forms of the apostrophe, the entity name, the two entity numbers and the hard apostrophe, are considered valid markup. It was a long shot, but this suggests to me that the apostrophe is not so much a code consideration, but one of style.Skip to navigation
What other sources have to say
- This ‘A List Apart’ article from 2001 makes interesting reading. It seems to say that apostrophes and closing quotation marks are one and the same and should be coded with
᾿. What do more recent articles say?
- This article on MSDN from 2010 suggests that
'is not officially part of the HTML specification (it's XML), and we should use
- There are discussions and debates on Stack Overflow about the correct way to mark up apostrophes.
- This Wikipedia entry says that
'is part of the XHTML 1.0 specification, again not HTML.
And so on and so forth.Skip to navigation
Can apostrophes be hard typed into a HTML document, or should we use entities, and if so, which? I don't feel I'm much closer to an answer. All I know from my own experience is that I use
' on this site and it seems to display fine on my devices. I previously tried using
᾿, but it didn't display correctly on my phone (Chrome for Samsung Android). Maybe that's the answer, then — test your devices and see if your apostrophes (however you marked them up) display properly and in a pleasing way. Meanwhile, the internet still rages on the never-ending apostrophe debate. Sod punctuation, I need a G'n'T.