What is ‘semantic mark-up’?

se·man·tic adj.

1. Of or relating to meaning, especially meaning in language.
2. Of, relating to, or according to the science of semantics.

OK, so semantic has to do with 'meaning' but what has that got to do with coding web pages? Well, when referring to semantic mark-up, it means using the correct tag to accurately describe the type of content.

In the days before CSS, a lot of designers would just present their content in table cells and sometimes use font tags to create styles. Without digging up the whole tables v CSS debate, using a table cell (<td>) doesn't actually say that much about what your content is.

So how do you decide which is the right tag for the job? Well the way to do it is to not think about how you want the content to appear on screen but rather think about how it might appear on a printed page which is essentially looking at it before styles are applied.

Heading tags

Most pages start with a title or heading and then maybe a subheading or a series of subheadings and then paragraphs of text which make up the majority of your text. If a line of text is a heading for a page or a heading for a section or paragraph, it should be in a heading tag (h1 - h6).

A lot of designers moving away from tables make the mistake of thinking that everything in their tabled layout must be replaced with a <div>. Divs are just generic, block-level, containing elements that have no semantic meaning. So to use them to contain headings on your page is robbing your headings of some meaning. It is also hurting you from a SEO point of view because search engines give added weight to content appearing in heading tags.

So use headings wherever you can. (The one instance where maybe you shouldn't use a heading tag is for your site title.)

The other thing to remember about heading tags is that they be used in the correct order. In other words, your page should start with a h1 and move down to a h6 without skipping tags in between. This means that if you only have two headings on a page, they should be a h1 and a h2, not a h1 and a h6 for instance. If you choose a lower hx tag because you want it to appear smaller then you should be creating this effect through your CSS styling instead.

You can move up and down through the heading tags, but they should appear in a logical order. For instance, consider this example:

h1 - Page heading
  h2 - Section heading
    h3 - Section subheading level 1
    h3 - Section subheading level 1
  h2 - Section heading
    h3 - Section subheading level 1
    h3 - Section subheading level 1
      h4 - Section subheading level 2
        h5 - Section subheading level 3
    h3 - Section subheading level 1
      h4 - Subsection subheading level 2
  h2 - Section heading

Longer documents will be broken up into a series of sections each often having subsections with subsections within those. To facilitate the flow of information and make it easy to understand, a correct hierarchy is required which establishes relationships between the different sections. The start and end of these sections and subsections is marked by the various heading tags.

Paragraphs

The majority of your content will be blocks of text otherwise known as paragraphs and these should be presented with the <p> tag. Don't make the mistake of containing all the text on your page in a single <p></p> pair and then creating gaps between the paragraphs using line breaks (<br>). If you need to create space between your paragraphs, you can do that through your CSS with the paragraphs' margins.

Lists

Among some of the most useful, but probably underutilised tags, are the lists: unordered (<ul>), ordered (<ol>) and definition (<dl>).

Apart from presenting content that obviously looks like a list (i.e. with bullet points), lists can be used to present all sorts of groups of content or areas of repeating content.

Navigation menus are a good candidate for being styled with a list as they are a list of links. Comments on a blog post or replies in a forum thread would be suited to an ordered list because they are a list replies and are usually identified by their number (although forums that aren't built with tables are fairly thin on the ground).

Lists can also be used to present product information on shopping sites because essentially what you're looking at is a list of products. The list items can be used as the containing elements inside which you might have a heading, an image and some paragraphs to describe each product.

Likewise with an image gallery because you are presenting a list of images (maybe with associated captions and/or details).

When to use tables

The tags described above are all block level elements and as the name suggests, they're used for presenting blocks of content. The other major block level elements are divs, forms/fieldsets and tables. Of those, divs are probably the most overabused while tables are probably used incorrectly the most.

Tables should be used for tabular data. Determining when content is 'tabular' can sometimes be a bit problematic, but generally, if your content is presented in a spreadsheet with multiple columns and rows, then it should be in a table. Calendars can also be considered as likely content for a table.

Divs should be used to contain groups of other block level elements or for content for which another, more semantically-suitable tag doesn't exist. Divs are good for columns or as containers for larger groups of content. As mentioned previously, divs are often used improperly instead of other more valid elements. This kind of practice is usually referred to as Divitis.