HTML Semantic Markup – What should I use?

Published: | by Julian Knight Reading time ~3 min.
📖 Posts | 📎 General | 🔖None

Please note that this article may be unfinished.

Over the years, HTML has gradually been pushed towards a place where machine-readable, meta-data vocabularies are given increased value and importance. This article takes a quick look at what vocabularies are available and which ones are worth using in a web application right now.

In the past, the limited vocabulary of HTML itself has meant that authors have pushed meta-data into HTML attributes meant for other purposes such as the CSS “class” attribute (ref. “Semantics in HTML5″ at A List Apart). But of course, there are no standards for this markup and so it is not universally recognisable. There are some other design patterns that have also been used in some limited degree to address these issues such as the abbr design pattern that uses the HTML abbr tag to add meta-date. Unfortunately, these have negative side effects such as making life difficult for visually impaired users so their use is tailing off.

In more recent times, “micro-format” markup has appeared to try and resolve these issues and with the advent of HTML5, we are just starting to see these formats become mainstream.

Prior to HTML 5, there were a very limited set of semantic tags in three categories, the main ones of which are:

  1. Structural HTML tags
  2. div, span, h1-h9 (headings), ol & ul (lists), p (paragraphs)

  3. Content HTML tags

  4. abbr, address, code

  5. Rhetorical HTML tags

  6. em, strong

HTML 5 semantic markup 🔗︎

HTML version 5 introduces a new set of markup designed specifically to give HTML documents greater semantic meaning.

The main new structural tags are:


comments powered by Disqus