HTML5: semantics of page elements

HTML5 derives much of its semantics from the DocBook specifications. DocBook is a free, open DTD for XML whose primary goal is to provide a common set of elements for marking up web documents, particularly those related to online publications. The HTML5 elements whose source of inspiration is clearly DocBook are section and article. I'd like to explain how these elements should be properly used.

First of all, section cannot contain the whole document of a web page. As its name says, this element can contain only a specific section of a document. You should consider section as a wrapper for a part of a page that must be distinguished from the rest of the document. Obviously there could be more sections per page. It's exactly the same thing that happens when you have split paper documents into several subparts: you have a chapter with more sections inside or, in the broadest sense of the term, a book with many chapters. Each subpart is a section of the whole chapter or book.

article, instead, it's more suitable for marking up a part of content which focuses on a specific topic. For example, blog posts are a typical case when this element is really useful. Before HTML5, you had something like this:

<div class="post">

With HTML5, you can use article:


Just as section, this element should not be used to contain the whole page content. You should start thinking in terms of electronic documents or, more precisely, structured documents. I think that DocBook's website is a good place to start thinking in terms of structure and semantics. Check it out!

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.