Beginner Tip:
Make Peace With Punctuation

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Writing Web page content is different than writing for a print publication because people read differently online. Content is one thing, but what about punctuation? It intimidates many writers - webmasters included. Get that fear under control. Punctuation can affect your site's readability and accessibility.

Content That's Good And Readable

What kind of language works well on most sites? Content that's informal, informative, and easy to read. We've discussed content and layout issues in previous Design Tips, such as:

But there's something else to consider: punctuation. It's an often-overlooked component of Web site readability.

Unless they're writing content for a technical or literary journal, most writers are free to choose how to write, punctuate, and display content on a Web site. Even so, it's important to be consistent: decide what the rules are for your site and stick to them!

Spaces Between Sentences

In print, two spaces separate the end of one sentence from the beginning of a new one. Without even thinking, you probably follow that convention when you write Web page copy, automatically hitting the space bar twice at the end of a sentence.

But did you realize that the browser ignores that extra space entirely? HTML recognizes a single space but ignores more than that. You'll have to add a non-breaking space character ( ) after the first space before the browser will recognize and display both spaces.

That's probably not a great idea. The extra keystrokes increase file size and code complexity. Think carefully and decide whether it's worth the trouble. Always use HTML Toolbox to scan for errors in your HTML tags and attributes whenever you make a change.

Page Titles And Section Headers

This is an area where you should follow print rules. Page titles and section headers don't usually contain ending punctuation - unless they're asking a question. Avoid using exclamation marks. They reduce credibility by making the content look more like spam than reliable information.

List Items

The contents of a list usually dictate punctuation needs. List items that are sentence fragments or short statements don't require ending punctuation marks, but you should include them if the list items are complete sentences.

Consistency is important. Lists should either contain short sentence fragments or complete sentences - but not both.

Avoid using this type of mixed list:

It's hard to scan and looks disorganized.

Underlined Text

Link text is the only page content that should be underlined - ever. No discussion allowed! Use bold or italic text when you refer to books, magazines, song titles, or other proper nouns that are usually underlined in print. Be consistent. Don't italicize The London Times and later refer to Newsday in bold.

Some designers remove link underlining and emphasize links with CSS. That's a great technique, but it doesn't mean you're free to underline other text. Visitors assume that underlined text is a link and feel tricked when it isn't.

Abbreviations And Acronyms

Use abbreviations and acronyms carefully to avoid confusion.

Naturally, we are not suggesting that you will have to replace all contractions. You are not likely to do that because it is a lot of trouble. Furthermore, it is likely to make your page copy seem stilted and boring because few people in the United States of America or the United Kingdom speak or write this way. See what we mean?

Instead, concentrate on addresses, place names, and company or organization names - anything that might confuse visitors. Consider this street address:

While most people instantly realize that this apartment is on Saint Vincent Street, others who aren't completely fluent in English (including young children!), might not realize the difference between the first "St." and the second one.

Or what about this name and address?

Here we have two different meanings for "MD" and two for "Dr."

Avoid confusion from the beginning and spell out words like street, apartment, Drive, Maryland, and Doctor.

Quotation Mark Concerns

Be careful if you write content in Microsoft Word before transferring it to your HTML editor. Microsoft's default is to replace basic quotation marks with curly quotes called "smart quotes."

They look fine in an Explorer browser that runs on a Microsoft server, but visitors using other products will see bizarre characters instead of your smart quotes. The effect is kind of like the text randomly changing from Arial to Wingdings and back again. Review our June 2002 HTML Tip for a full explanation of this issue.

Sometimes though, a fancy quote looks really nice on a Web page - particularly in a headline or header text. This example page shows the difference in large text and demonstrates how display varies between fonts.

Punctuation And Accessibility

Before you decide that it's ok to just make up your own rules for punctuation, consider this important point: assistive technologies like screen readers rely on punctuation to read your Web page.

Remember that usability and accessibility are closely related. Almost anything you do to make your page more accessible increases the usability level for all visitors.