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><em> for italics (default style for these elements;)
    • Do not use <strong> 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:
  • 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 <b> and <i>).

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:

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>
<p>Tim Berners Lee</p>

Strong and emphasis

this is <em>important</em> but this is <strong> even more important </strong>

do not misuse <blockquote> to create an indent, or <em> to create italic. Use <strong> not <b> 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.)