Apostrophe angst

My selfie

James Turner,

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:

<dl>
<dt>Ethan:</dt>
<dd><p>Hi, this is a responsive web design podcast, where we interview the
  people who make responsive designs happen. I’m your host, Ethan
  Marcotte.</p></dd>
<dt>Karen:</dt>
<dd><p>And I’m your other host, Karen McGrane.</p></dd>
<dt>Ethan:</dt>
<dd><p>And this week, well, giddy doesn’t quite cut it to describe just how
  happy we are to be speaking with Ryan Essmaker and Brad Smith from 
  <em>The Great Discontent</em>. Guys, welcome.</p></dd>
  ...
</dl>

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.

Skip to navigation

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:

We don't use an apostrophe for plural nouns and possessive adjectives:

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 &lsquo; and &rsquo;. For example:

Prime marks are used for units of measurement such as feet and inches. The double prime mark is marked up with &Prime; and the single prime mark is &prime;.

There are other similar punctuation marks, but I think these are the ones that are most likely to be confused.

Skip to navigation

Escaping apostrophes

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, &apos;, or use the entity number, &#39; or &#8217;. 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?

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 &rsquo; and the entity code is &#8217;.

Wait a ruddy minute! That's the same code as the apostrophe, above. So, it turns out that &#8217; 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?

Skip to navigation

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Not sure</title>
  </head>
  <body>
    <p>I&amp;apos;m not sure</p>
    <p>I&amp;#39;m not sure</p>
    <p>I&amp;#8217;m not sure</p>
    <p>I&apos;m not sure</p>
  </body>
</html>

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

And so on and so forth.

Skip to navigation

Conclusion

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 &apos; on this site and it seems to display fine on my devices. I previously tried using &#8127;, 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.

Skip to navigation