Using structural markup
HTML is not a language for describing presentation, but one for describing document structure. Using markup to describe structure makes the document more accessible, especially to specialist browsers, and also allows better indexing by search engines. There are a number of presentational tags, which should not be used as they are meaningless outside of a visual medium.
Mis-using structural markup to achieve a particular layout can cause severe accessibility problems. The use of Cascading Style Sheets to describe the presentation of structural markup is more accessible and gives greater flexibility of presentation.
Web Accessibility Initiative Guidelines
This page explains how to meet:
- Guideline 3.1: "When an appropriate markup language exists, use markup rather than images to convey information."
- Guideline 3.3: "Use style sheets to control layout and presentation."
- Guideline 3.5: "Use header elements to convey document structure and use them according to specification."
- Guideline 3.6: "Mark up lists and list items properly."
- Guideline 3.7: "Mark up quotations. Do not use quotation markup for formatting effects such as indentation."
- Guideline 11.2: "Avoid deprecated features of W3C technologies."
- Guideline 12.3: "Divide large blocks of information into more manageable groups where natural and appropriate."
Reasons for following these recommendations
The use of correct structural markup makes documents easier to process in a wider range of browsers and search engines. If headings are marked up correctly, then the automatic generation by a browser, script or search engine of a table of contents for a page becomes possible. This can allow users to skip straight to the part of the document they are interested in. This is especially useful in a speech browser such as IBM Home Page Reader.
Structural markup for the document, and stylesheets for presentation also produces more reliable designs in graphical display media, with less chance of non-standard browser settings producing large display errors.
The misuse of markup to achieve a formatting effect can give undesirable results. For example,
<blockquote> is often displayed indented in graphical browsers. However, in speech browsers it may be spoken in a different voice. This means that a formatting effect in visual media is creating unwanted side effects in non-visual media. There is also no guarantee that every visual browser will display block quotations indented.
By using stylesheets, the text could still be displayed indented in visual media, while being presented as a normal paragraph in non-visual media.
The use of presentational markup to attempt to duplicate the effect of structural markup is also bad for accessibility. If, instead of using a heading tag, a heading is 'faked' by using the
<font> tag, in text and speech browsers which cannot sensibly display font changes, and search engines which cannot determine the meaning of a
<font> tag, the heading will appear to be normal text.
Warren Steel's essay on problems with the
<font> element gives an example of problems arising from the use of presentational markup.
Structural markup also allows specialist processing of text. For example:
- The tidy program has a feature that creates a slide show from a document by breaking it up around the
- Code could be placed on a website marked up with the
<code>tag, and commented on in normal HTML. After reading the HTML documentation around the code, a user could run a script that extracted all the code from the page and automatically compiled it. The compiling could even be used as an automatic process for a code submission library.
- An application could use the
citeattribute of the
<blockquote>tags to automatically download all the references for a research paper.
How to use structural markup.
If you are writing HTML directly, then use the Strict Doctype, and validate your code. The use of the Strict version of HTML disallows any presentational markup. Therefore, you can use the validator to find it so that you can replace it.
Dreamweaver, unfortunately, tends to use presentational markup by default. Therefore, when using it, you must be careful to only ask for structural elements. You can also use the tidy -c -o cleaned.html input.html command in Unix to convert Dreamweaver's presentational markup to structural markup and stylesheets. This conversion is not perfect, however, and avoiding presentational markup is advised.
Headings should be used to structure a document into sections. There should be one
<h1> in the document, with
<h2> tags inside it, and no
<h3> tags except inside the structure of
In Dreamweaver, use the 'Text -> Paragraph Format -> Heading 1-6' menu, or the 'h1', 'h2' and 'h3' icons to mark text as a heading.
Do not nest headings improperly (for example having no Heading 1, or having Heading 4 following a Heading 2) to achieve a particular style. You can use style sheets to suggest the appearance of a heading in a browser.
The Header Ordering Checker checks that headers are logically ordered within the document. It also displays the headers out of their context on the page to make it easier to check that they provide good descriptions of the section they head.
There are two ways of marking up quotations. For short quotations that are part of a paragraph of text, the
<q> tag (in Dreamweaver, the 'Insert -> Tag' menu option, followed by choosing 'q' from the list).
For long quotations, use the
<blockquote> tag and then include paragraph tags inside it. Quotations can be nested inside each other if a quote itself quotes something. In Dreamweaver, use the blockquote button (it looks like two quotation marks enclosed in square brackets).
If you ask Dreamweaver to indent text, it will use
<blockquote> to do it. Therefore, never indent text directly with Dreamweaver - use style sheets instead.
There are three types of list available in HTML.
- Unordered list:
<ul>- often represented by bullet points. Use this where order is unimportant and the list could be (for example) sorted alphabetically by the browser instead.
- Ordered list:
<ol>- often represented as a numbered list, but alphabetical lists, roman numeral lists, and other types are possible. Use this where order is important.
- Definition list:
<dl>- in visual browsers the definition is usually indented relative to the definition title. Use this where definitions are used.
Lists can be nested in each other, but there can be a problem with loss of context. Only the number for the current level is displayed by default. Advanced style sheet properties can be used to get a better heirarchy of list numbers in ordered lists (so '1, 1.1, 1.1.1, 1.1.2, 1.2, 1.3, 2' instead of '1,1,1,2,2,3,2'), but this is poorly supported by browsers in practice. Try and include some context for the level of the list within each item.
Style sheets allow suggestion of presentation. Users may, if they wish, have their own style sheet to selectively override parts of the author stylesheet. For example, a user might set all text to be twice as large as normal.
Style sheets can suggest different presentations for different display media. It is possible to use the generic
<span> tag with appropriate styles to mark telephone numbers to be read out as a series of numbers rather than as a number. Without this, users may hear 'please telephone three million, seven hundred forty one thousand five hundred fifteen' rather than the more useful 'please telephone 3-7-4-1-5-1-5'.
At the moment, unfortunately, style sheets for non-graphical media types remain at largely unimplemented, so this technique is of little practical use now.
If you are unfamiliar with style sheets, the Web Design Group's CSS Resources are a good place to start from, although it only covers CSS 1, an earlier version of the specification. CSS 2, the current version, allows much greater flexibility in suggestion of presentation.
Dividing a document into sections
In addition to using headings and nested lists, you can group related information with the generic
<div> tag, though you should only use this if there is not a more suitable grouping tag, as generic tags lack structural meaning. For example, when dealing with form fields, you can use the
fieldset tag to group elements instead (in Dreamweaver, use the 'Insert -> Form Objects -> Fieldset' option).
Structural markup is a difficult thing for accessibility checkers to assess. Most will attempt to detect the use of presentational markup, but the use of the Strict Doctype means that a validator will find these errors far more effectively.
No accessibility checker is capable of accurately determining whether structural markup has been used properly, with the exception of checking for the proper nesting of headings. Some checkers will detect the use of structural markup and ask you to manually check that it is appropriate.
The correct use of structural markup must always be checked manually.