Almost everything in life is easier to get into than out of. - Agnes' Law

Beginner's Guide to XHTML

Wednesday 22nd June 2005 - Saturday 7th January 2006

Categories: Guides, Internet, Code

Accessibility

When creating a web page, it is always important that as many people as possible can view it. By making a web page more accessible, you can make sure that almost anybody can view your webpage, regardless of browser or disability. Although there are a number of ways in which this can be achieved, this article concentrates on the specific (X)HTML tags that can be used.

In the previous part, we already covered using labels, which make forms easier to use. Another tag is <abbr>. Along with the title attribute, this allows you to specifiy an abbreviation. When you hover over the word, it will then display the contents of the title attribute. For example, (X)HTML is an abbreviation of eXtensible HyperText Markup Language, so we'd use the following code:

<abbr title="eXtensible HyperText Markup Language">(X)HTML</abbr>

You can already see the result in the first paragraph i.e. (X)HTML. Generally, you should define an abbreviation in this way the first time you use it. After that, it is acceptable to simply use the abbreviation. In some browsers, such as the Mozilla family, abbreviations are underlined by dots. However, a certain browser called Internet Explorer doesn't actually support this tag. However, it does support the <acronym> tag.

At this point, a small English is required. An acronym is a type of abbreviation where the first letters of words are used to create a new word, such as NATO (North Atlantic Treaty Organisation), and FIFA (F?d?ration Internationale de Football Association). HTML, on the other hand, is pronounced as each each letter individually, not as a single word. As such, it is an initialism, not an acronym. However, to many people, initialisms are acronyms.

The tag is used in exactly the same way as an abbreviation e.g.

<acronym title="North Atlantic Treaty Organisation">NATO</acronym>

Here is the result: NATO. Now, in Internet Explorer, when you hover over the word, you can see the full form of the acronym, as well as in most other browsers.

This leaves you with a number of choices.

  1. Use <abbr> all the time, or with <acronym>. Since acronyms are a type of abbreviation, this will always be correct usage of tags, but Internet Explorer users won't be able to see the full term if you use <abbr>. This is the option I generally use.
  2. Use <abbr>, and <acroynm> for acronyms and initialisms. Although this might not be strictly correct, it is probably an acceptable use of <acroynm>. However, I would avoid using tags in this way since it may confuse some software that tries to read words out to the user. Again, Internet Explorer can't see abbreviations.
  3. Always use <acronym>. This is the best solution for Internet Explorer users, but, in my opinion, the worst solution overall. It is incorrect usage of the tags, and could confuse some software.

I would advise people to choose option number one. It is only Internet Explorer that will suffer, and I am not willing to compromise for one application.

The other tag I'm going to cover is the <link> tag. An example is:

<link rel="start" title="Front Page" href="/" />

In browsers that support this, such as Seamonkey, Opera, Links and Lynx, this will provide a link back to the start. This makes it easier for some people to navigate around a site. The title attribute is a specific description of where the link will go, the href attribute is the URL of the destination, while the rel attribute is the type of destination. Below is a table showing the common values for rel:

Value Explanation
start The front page/starting point of your website.
up A 'level' up in your web page e.g. from an article to a list of articles.
first The first page, such as the first page of an article.
prev The previous page, such as the page before in an article.
next The next page, such as the following page in a article.
last The last page, such as the final page of an article.
help The location of the help page for your website.
search The location of the search page for your website.
author The page showing the author(s) of your website.
copyright The location of the copyright notice for your website.
alternate Alternative versions of the current page, such as an Atom feed or version without images/graphics. There can be multiple alternative versions - each one has a separate tag.

Useful Links