Thursday, March 03, 2011

HTML5: The new 'semantic elements'

One of the news in HTML5 consists in the so called 'semantic elements'. The goal of these elements is provide better way for web authors to define the parts of a document and, potentially, to improve accessibility (i.e. screen readers). Some of these elements are: section, nav, article, aside, hgroup, header, and footer.

Let's say I want to create the main page of a blog. My page is going to have a header and probably a footer. If you look at web pages source code, you will notice that these two elements are present in almost every page in many different variants. The blog you are reading already uses <header> and <footer>.

The elements <header> and <footer> can be used not only for defining the structure of the main page but also for defining headers and footers of sections, articles and asides.


If you look at the structure of the blog you are reading, this is pretty much similar to the one depicted in the above figure. The 'nav' areas is correspondent to the 'Blog Archive' and the 'aside' area is collecting my picture, 'label' and 'links'. Using these new elements - together with the new features brought by CSS3 - is certainly a way to avoid the well known 'Div Mania'.

Once we have a <header>, it is possible to use the element <hgroup>: it represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Also, in the specs, given the following example, it is stated that the point is to mask the h2 element (which acts as a secondary title) from the outline algorithm.
<hgroup>
  <h1>The Coolest Application</h1>
  <h2>Alpha Release</h2>
</hgroup>
I have to admit, it seems a bit rigid and I feel my code will end up with one element more than usual. I have to force myself in not using <div> or <span> or <p> for things that look more like a subtitle and do something like:
<header>
  <hgroup>
    <h1>The Coolest Application</h1>
    <h2>Alpha Release</h2>
  </hgroup>
  <p>Description...</p>
</header>
One thought, the new elements seems still structural - with different level of granularity - and not semantic to me. Maybe structure can be seen as a kind of semantic, but I don't think the name is a good idea as it intersect with the pool of the technologies of the Semantic Web. In other words, saying a chunk of the document is a section does not help machine understanding of the content - besides that it knows where it starts and where it ends - , but if I say the section is a 'http://rdfs.org/sioc/types#BlogPost' we are starting to attach meaning we can leverage. And we can certainly do that with RDFa for example.