Semantic HTML

In my last lens I introduced the idea of Semantic HTML (POSH). For those that missed my expanation, Semantic HTML is the use of tags/elements that have a specific meaning to describe the content and also what that content is for. We want to use HTML to describe the structure of the document, but not for describing the presentation. We leave presentation to CSS.

How do we use HTML to semantically describe the structure of the document? We do this by using common sense and the same basic markup that we used when first learning HTML (except without the font and other deprecated tags).

Here's some basics. For the documents heading we'll want to use a heading element. The first heading in the document will use the <H1> element. Search engines also regard <H1> as important when indexing your pages. If we include paragraphs in our document, we should use <P> elements instead of <BR>'s. When we include a quote the correct element to describe this would be one of, <blockquote>, <q>, or <cite> element. If we include a list of items then we'll be representing this list using <UL> or <OL> tags. This all sounds like common sense and mostly it is. We're using elements that provide meaning to the content. This creates a solid, semantically correct HTML structure.

These basic rules also work the other way around. We shouldn't be using header elements to represent content that isn't a header. Some people may use elements like this to increase the font size, but that's not semantically correct.

Give consideration to a variety of elements. There are loads of elements that very few people use, such as <label>, <acronym> and <address>. Finally, validate your markup.