In Part 1 of Punctuation for Web Developers we looked at hyphens and dashses. This time we'll look at quotes, ellipses, and how best to use them.

As a programmer, you likely type single-quotes (or "apostrophes") and double-quotes on a daily basis, but did you know that those aren't technically quotes?

Foot / Inch Marks

Pressing that hyphen/quote key on your keyboard (in an editor which doesn't automatically swap it with a curly quote) produces foot and inch marks:

6'4"

These marks are also used to indicate fractions of degrees (referred to as "prime" marks):

41°42'34"

Since these are the default characters when you press the "quote" key, you don't need to take any extra effort here.

Apostrophe / Quotes

Also referred to as "curly-quotes", these are the real quotes we're used to seeing in our word processor program or traditional print:

"This isn't a real 'quote', just a placeholder."

If you write your content in one of these programs, you can typically copy and paste into your HTML, and you're good to go. The following HTML entities are also available:

• Left single quote: ‘
• Right single quote: ’
• Left double quote: “
• Right double quote: ”

Ellipses

Early on in my career, when I coded a "Loading…" message, I created an ellipses (…) by typing three periods:

Loading...

Later I found out there's a dedicated character for that:

Loading…

See the difference? More compact and easier to read. Many word processor programs will automatically switch to an ellipses after you type three periods. Alternatively, you can use one of the following methods:

Here are some ways to get this into your code:

• Copy and paste it: …
• Use the HTML entity: …
• On Mac: hold the Option key and press the semi-colon (;) key
• On Windows: hold Alt and type 0133, then release Alt
• Use Character Map or a similar program to insert the character.

Trademark

If you've worked with brand names before, you might have needed to add the trademark symbol (™) in the content. If you received the content from a designer or copywriter, it might have contained the literal letters "T" and "M". I remember using something like <sup>TM</sup> to achieve this (back before I learned about this), but again there's a symbol we can use here: ™.

Here are some ways to get this into your code:

• Copy and paste it: ™
• Use the HTML entity: ™
• On Mac: hold the Option key and press the 2 key
• On Windows: hold Alt and type 0153, then release Alt
• Use Character Map or a similar program to insert the character.

One exception to this I can think of is if you're working with a font which doesn't contain the trademark symbol, in those cases, using <sup>TM</sup> may be more appropriate.

It's All in the Details

Using these punctuation marks might seem minor, but they go along way in making your copy look professional. I recommend that the next time you're working with some content, take a moment to make sure you're using the right characters.

You can find a full list of these characters (and more) at the W3 website.