Culture, Software, Technology

How-to: Use Dashes and Hyphens on the web

A note for the  punctuationally-challenged.

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

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 — 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 – 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

Related: Opinion: Web Design Trends 2014
Image credit: Red Pen by LewishamDreamer via Flickr, licenced Creative Commons.

About Robin Catling

Robin Catling gained degrees in both arts and technology which led to a diverse portfolio of employment. A freelance systems analyst, project manager and business change manager for the likes of American Express, British Airways and IBM, he moved on to web design, journalism and technical authoring. He has also worked in film and television, both behind and in front of the camera, including productions by Steven Spielberg, Martin Scorcese, Ron Howard and Ridley Scott. A qualified three-weapon coach, he runs West Devon Swords teaching sports fencing to all age groups, and in recent years qualified with the British Federation of Historical Swordplay to teach medieval and renaissance combat in the Historical Western Martial Arts.


One thought on “How-to: Use Dashes and Hyphens on the web

  1. Many Thanks!

    Posted by Dude W | May 31, 2015, 6:46 am

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Twitter Updates

Follow us on Twitter @EverythingExpre

Find Us on Facebook

Enter your email address to follow this blog and receive notifications of new posts by email.



BBC World News

BBC World News
Opens the BBC World News page.
%d bloggers like this: