Quotation marks (and apostrophes)

There are two kinds of quotation marks—single and double—right? Right and wrong. The statement is wrong because several kinds of quotation marks are used in English-language typesetting—and texts in other languages make use of a variety of other marks to designate quoted matter.

But it is right that there are two kinds of quotation marks used in web pages—those which appear in the text and those we use in the code. Each matters in a different way.

Quotation marks in code

In HTML we use quotation marks a lot and mostly for one job—delimiting (or enclosing) attribute values. Although older HTML standards allowed us to get away without quoting most values, these days things are more buttoned-down. This is a Good Thing. Using quotation marks in our attribute values allows us to be very definite about where the value starts and stops, which in turn means the contents of the value can be more varied.

When using quote marks in HTML we always use plain double quotes—sometimes called ditto marks or—incorrectly—double primes. These are the plain straight-up-and-down marks which are part of the ASCII character set. We do not use two single-quotes together, like this: ''nay, nay''; nor do we mix single- and double-quotes, like this: "and thrice nay'.

HTML mark-up rules do allow attributes to be quoted using single quotes, but it is not good practice for a very good reason. Let’s say we are adding a title attribute to an an acronym to provide a tooltip for the user—like this: Unicef. The code looks like this:


<acronym title="United Nations Children's Fund">Unicef</acronym>


Had we opened the attribute value using a single quote the user agent would have reached the apostrophe in Children's and assumed the value ended there, causing all sorts of problems. Of course we could use a character entity to designate the single straight apostrophe (Children&#39;s or Children&#x27;s), or a proper apostrophe (Children&rsquo;s), but since we are far more likely to want to include apostrophes in our attributes than we are double-quoted text it makes sense to use the double quotes for delimiting the value. This way we can make free use of simple ASCII apostrophes without the bother of encoding them.

To include double quotes in an attribute value, use the appropriate character entity, just as if it were in the visible text of the page.

Quotation marks (and apostrophes) in text

We have a much easier time of it when it comes to the textual content we wish to make manifest in the user-agent, but there are still pitfalls to be avoided.

However, let’s start with the basics, and the good news is that plain single- and double quotes are perfectly legal tender within our text. The only reason for using anything other than plain ASCII quotation marks is aesthetic.

If we do want to get fancy and do the job properly, we can get typesetters’ “curly” quotes and apostrophes by using the character entity references &ldquo; and &rdquo; ( “ ” ), or &lsquo; and &rsquo; ( ‘ ’ ) for the single variety. Their decimal equivalents are possibly marginally better supported by user agents but are far less memorable—&8220; and &8221; ( “ ” ), or &#8216; and &#8217; ( ‘ ’ ).

When setting large type, such as headings, or fine typography for literary work, we should use the typesetters’ marks. But for general use, the poor resolution of computer monitors and the added complication of using character entities mean we are probably best advised to stick to the plain ASCII marks.

So, what of the pitfalls? Well, standard keyboards usually include a mark which looks a little bit like a single open quotation-mark. It is sometimes found on the same key as the tilde ( ˜ ), or skulking with the not sign ( ¬ ) or broken vertical bar ( ¦ ). There are very many web pages which mistakenly use the grave accent ` (ASCII character 96) where a quotation mark, or even an apostrophe, is wanted. Sometimes two are used together as opening quotes, with closing quotes made from a pair of single straight quotes, like this: ``hanging`s too good for `em!''. This is basic typographic illiteracy. If you, gentle reader, think yourself guilty of this sin, I urge you to quietly mend your ways.