DEV 5.5 Use structural and semantic markup properly and validate code

Markup such as headings, paragraphs, lists, definitions and quotations add useful semantic (inherently meaningful) information. Markup used solely for presentation purposes doesn't. You should make full use of structural and semantic coding.

Valid code ensures the widest possible acceptance by the multitude of devices and a clearer upgrade path to new standards.

Use the structural/semantic markup wherever possible to add meaning to a page:
- use CSS to style the elements as required.
Do not misuse semantic / structural markup for presentation effects, e.g.
- Do not use <blockquote> for indents;
- Do not use <th> for centre align in layout tables;
- Do not use <address>,  for italics (default style for these elements;)
- Do not use  for bold (default style.)
Do not use presentation elements to simulate structure:
- e.g. do not use bolding and increased font size to make a heading:
 - use <h1>, <h2> etc. (see DEV 5.2.)
Do not use deprecated features of HTML:
- see the list in the examples.
Write HTML and CSS according to the specified standards.
Ensure all code is validated against the appropriate standard.

Note: The quotation tag <q> isn't well supported by browsers at the moment - avoid using for now.

Tip: The emphasis tags em and strong should be used to mark important phrases or words. Semantically strong is supposed to be 'stronger' than em.

One advantage of using these is that screen reader users can potentially hear the difference (when they would not with and ).

Tip: Many code validators will help weed out deprecated tags and syntax problems, and assist you to code to standards, for example use the following free resources:

The W3C Markup Validation Service (validator.w3c.org);
The W3C CSS Validation Service (jigsaw.w3c.org/css-validator.)

Video Clip

Watch how semantic markup can assist a screen reader user browse effectively through a page.

Alternative Formats

If you experience any problems viewing the video above or wish to download a copy to your desktop select one of the alternative formats below.

Address example

<address>National Disability Authority, 25 Clyde Road, Dublin 4</address>

Blockquote example

<blockquote>The power of the Internet is in its universality... </blockquote> Tim Berners Lee

Strong and emphasis

this is important but this is even more important ...

do not misuse <blockquote> to create an indent, or to create italic. Use not if something deserves highlighting

Structural / semantic coding - use these:

h1...h6, p;
em, strong;
cite, blockquote;
ul, ol, li;
dl, dt, dd;
address;
code.

Deprecated - Do not use these:

applet, basefont, center, dir, font, menu, s, strike, u;
although not deprecated, avoid b, i (use CSS instead.)

I want to

Elsewhere

Get involved

Privacy | Disclaimer | Accessibility

©CEUD 2010

The CEUD is part of the National Disability Authority
25 Clyde Road, Ballsbridge, Dublin 4, Ireland. Tel: +353 (0) 1 608 0456

DEV 5.5 Use structural and semantic markup properly and validate code

Recommendations

Video Clip

Alternative Formats

Examples

I want to

Elsewhere

Get involved