Semantic Markup

In short, semantic markup is using markup to describe what it contains. For example, using a <p> to markup a paragraph of text or using a <ul> (and <li> elements) to markup a list of navigational links. HTML 4.01 and XHTML 1.0 are semantically the same. We feel strongly that semantically correct markup is more important than many people seem to think, so we encourage you to read some of the articles listed below under Related Links.

A <table> should be used to mark up tabular data, which consists of rows and columns. Using <table>s to layout pages was a hack to be able to layout pages before CSS was widely supported. Now that browsers have adequate support for CSS2, we can use correct markup and use CSS to style it how we want. However, due to IE's lack of support for some things, including display:table and display:table-cell, there are still some things that we can't do cross-browser with CSS alone, so we must resort to using a <table> or JavaScript to maintain cross-browser compatibility for certain design elements.

<div>s and <span>s

Both are generic elements; they don't have semantic meaning. They should be used when no element with the required meaning to mark up the given content exists.

<div>s are block-level. They are used to group elements. Anything that can go in <body> can go in a <div>. Inline elements can also be placed inside a <div> but, in general, it's best not to. <span>s are inline elements; they are used to give a special effect to some text. They may only contain text and other inline elements.

Common Semantic Errors

  • Using more than one <h1> on a page. If you have multiple topics that need more than one, then it might be a good idea to split the contents of the page across multiple pages.
  • Using header elements to increase the font size of text and/or make it bold.
  • Using <br> (line breaks) to add white space between elements. You should use CSS properties like margin, padding, and/or border to do that.
  • Embedding what is semantically a list in a paragraph with <br> elements to put each item on it's own line. For example:
    <p>I went to the store and bought:<br>
    - 5 apples<br>
    - a bunch of bananas<br>
    - a crate of clementines</p>
    should be marked up something like this:
    <p>I went to the store and bought</p>
    <ul>
      <li>5 apples</li>
      <li>a bunch of bananas</li>
      <li>a crate of clementines</li>
    </ul>
Last update: 2009-10-11