[Skip navigation]

DEMOS Project

Online Materials for Staff Disability Awareness
[Home] Home • [Modules] Modules • [Resources] Resources • [Project] Project • [Contact Details] Contact • [Sitemap] Sitemap • [Help] Help
: Techniques

Structural mark-up

The first step towards accessibility is clean and simple HTML. This mark-up language was designed to allow the sharing of (originally text-based) information independent of platform or user agent. Javascript and other additional techniques should be avoided if possible because they often 'break a page' in older browsers. Sticking to clean HTML will also make webpages readable on PDAs, mobile phones, Internet kiosks and similar devices.

HTML provides a structural mark-up of text by declaring paragraphs, hyperlinks, and headers in a logical order. This improves interpretation by screenreaders, helps visually impaired users, and users who are scanning a document for information.

Discouraged:

<p><font size="+2">Header</font></p>
<p>Paragraph with some text.</p>
<p><font size="+1">Subheader</font></p>
<p>Paragraph with some more text.</p>

In this example the FONT tag is used to increase the size of text visually but not structurally.

Recommended:

<h1>Header</h1>
<p>Paragraph with some text.</p>
<h2>Subheader</h2>
<p>Paragraph with some more text.</p>

In this example structural mark-up is used correctly and the header tags are used in a logical order.

Misuse of structural mark-up

Just as presentational tags, such as the FONT tag, should not be used to define structure, structural mark-up should not be used to create visual formatting.

Some of the most common misuses of structural mark-up for presentational purposes are the use of header tags to display something in bold and the use of BLOCKQUOTE to indent a paragraph rather than to mark up a quotation.

Example:

It is tempting to use definition lists incorrectly to achieve a visual effect like indentation.

Correct use of a definition list:

<dl>
  <dt>definition title</dt>
    <dd>definition</dd>
</dl>

An example from the glossary:

Well-formed
A documents is well-formed if it is structured according to rules defined by standards and recommendations.

Visual and presentational effects are better specified in an external style sheet.

[Previous] | Previous || Table of Contents || Next | [Next]