Spell it Out

by Miraz Jordan

A few simple tips which make your web pages more user-friendly and more search-engine friendly.

Confusing Letters

All too often as I browse various websites I find a mass of bewildering names and abbreviations. Cryptic page titles are often accompanied by equally cryptic headings and paragraphs. Here is an example:

CID is the title for one local website which goes on to mention its proud NGO roots and links with such fine bodies as ANGOA in NZ and its relationship with MFAT.

Does the above paragraph leave you lost and confused? That's not surprising. Unless you have knowledge of a very specific area of New Zealand (NZ) activity, the above acronyms won't mean anything to you.

To be fair, the site's authors have sometimes spelled out the meaning of the acronyms - but generally that's on only one page of the site, and some visitors will never stumble on that explanation.

Who Cares?

Those like me, with short memories, and those who haven't yet seen the page with the expanded text of the acronym will find the acronyms hinder their comprehension of the text. Those for whom the page's language (or culture) aren't their own will also likely have difficulty with acronyms and abbreviations.

Moreover search engines aren't getting the relevant text for their database.

All in all acronyms and abbreviations can cause unnecessary problems for visitors to a site.

What's the Difference?

Acronyms, abbreviations - it all gets a bit confusing.

Technically acronyms and abbreviations are different creatures, though both can be equally confusing. An acronym is a word formed from the initial letters of a sequence such as NZ: New Zealand. An abbreviation is a shortened form of a word or phrase such as etc: et cetera.

How to Help

Many web browsers have the ability to present the user with additional information about any element for which you include a title attribute. This information might be voiced, show up as a "speech bubble" or "tool tip" or be displayed in the status bar.

This means that if you use standard HTML to code an abbreviation or acronym (or any other term which might confuse visitors) you can enhance the visitor's experience with an explanation.

Try it on the paragraph above. If you hover over the HTML acronym your browser will probably offer you the expanded version of the term: HyperText Markup Language.

Here's the coding:
<acronym title="HyperText Markup Language">HTML</acronym>

Abbreviations can also be coded with a title attribute: Many govt depts employ large numbers of policy analysts.

Here's the coding:
<abbr title="government departments">govt depts</abbr>

A Hitch

Not all web browsers will respond to the abbr tag. They should, but some just don't.

It would be good writing to make sure that you use the full form in text with the acronym or abbreviation in brackets - at least for the first time on any page, to ensure that visitors aren't left confused. Then be sure to use the title attribute for any further uses of the abbreviation or acronym on that same page.

A Bonus

The title attribute can be used with any element. This means that you could use it with a header to make additional, bonus information available. You could use it to help visitors unfamiliar with cultural references, for example.

Try it here: this paragraph has a title attribute. Does it work for you in your browser?

How about combining it with a span tag to explain words which might be foreign to your visitor? Here in Aotearoa Maori is a recognised national language, but unfortunately there are very few native speakers of te reo.

Here's the coding:
<span class="help" title="Te reo: the Maori language">te reo</span>

Be careful though. Remember that some visitors won't receive the title text in any way. Make sure you include only bonus information and not information essential to understanding the page.

Stylesheet

If you'd like to tip off your sighted visitors that there is help available for a particular term, as I have done in this article, you could ensure that your stylesheet reflects it. You could perhaps underline the term with a pale dotted line, change the colour of the text or make some other similar distinction:
abbr, acronym { border-bottom: dotted 1px silver; color: maroon; }
.help { border-bottom: dotted 1px silver; color: maroon; }

Summary

With a little extra care and a few bytes of additional coding you can gain an edge over other web sites. Add correct HTML tags for acronyms and abbreviations, add title attributes for other elements if it will help, use span tags with title attributes for terms some of your visitors might not otherwise understand. These are small things you can do to "polish" your site, making it more friendly and more accessible for all your visitors.

Copyright 2002, Miraz Jordan, All Rights Reserved

Miraz Jordan is a writer, web designer and trainer of repute in New Zealand. She contributes the Newbies Guide and other articles to New Zealand's Macguide magazine and produces her own Mac Tips newsletter and other materials. Currently she's working on a book. Her popular Mac Tips and online tutorials are available at http://mactips.info.

Learning Podcasting by Carolyn Wood.

Complete list of past tutorials.