How-to: Use Dashes and Hyphens on the web

There’s a brilliant article on A List Apart: The Trouble With EM ’n EN (and Other Shady Characters) by Peter K Sheerin

from way back in October, 2001, now sadly marked “This article, while brilliant for its time, is now obsolete.”

However the topic doesn’t go away and we’re still struggling, not only with the style guide but how to render these shady characters for the web when there are all sorts of technical issues.

First of all, what’s the Difference Between an Em Dash, En Dash & Hyphen? And what has happened to them online?

Em Dash (—): signifies a pause in thought, a parenthetical statement, or — and I do this a lot — some sort of tangent or afterthought. On a web page, you can
include &mdash; to insert the character, or use the ALT and 0151 keystroke combination.

If you are the sort who seeks professionalism in everything you do, you can respect the purpose of these time-tested punctuation marks by first understanding when to use which, and then how to actually type them or include them in a website.

En Dash (–): signifies a range, especially of numbers, such as $100–150. Use &ndash; in a web page or ALT-0150 from the keyboard.

Hyphen (-): used for the hyphenation (joining) of words; co-ordination; able-bodied; pre- and post- recession. It is also for the splitting of words when wrapped to the next line. The standard keyboard – character is the hyphen. Since it is readily available and most people are punctuationally-challenged – or downright lazy – they just use the hyphen. See what I did there? It is a lot easier to use hyphen everywhere than attempt to remember the ALT-codes and strain a tendon reaching for them.

Consequently most websites have lost any distinction between these — any
many other — marks of punctuation. RC