Using Proper Quotations and Apostrophes in HTML

Can you spot what is wrong with the following quotation?

"And I say, 'Hey, Lama, hey, how about a little something, you know, for the effort, you know.'"

Don’t bother checking my spelling or grammar. The answer is that the above line makes improper use of quotation marks. Left and right quotation marks, whether they be double or single quotes, come in matching pairs. Left and right quotation marks are not the same character, rather two very different ones. But in this quote, we just see two identical straight-up-and-down quotation marks.

Here is an easy way to spot incorrect quotes: quotation marks that appear straight up and down, or identical to each other in every way, are wrong. If they appear to complement each other, usually by curling or slanting around your quotation, they are correct.

A lot of content management system are aware of this issue and correct it automatically (WordPress being one). But if you are banging out your own code, don’t just hit the quote key on your keyboard. Instead, using the following HTML entities:

• A left double quote is “
• A right double quote is ”
• A left single quote is ‘
• A right single quote is ’

Here is that quote again, this time with the correct quotation marks:

“And I say, ‘Hey, Lama, hey, how about a little something, you know, for the effort, you know.’”

Check your apostrophes, too

While I’m on the subject, the same rule applies to apostrophes. An apostrophe should not appear as a straight up-and-down character — that is a prime, and it is meant for writing measurements. When you are feeling possessive, or need to use a contraction, use ’ to write an apostrophe (’).

Illustrative quote from Caddyshack.