Home > Webmasters Resources > HTML 5 section is not just a “semantic div”

HTML 5 section is not just a “semantic div”

James Graham of Opera has a post about how section is not just a semantic div that argues against the folks that think that we can get by with just div class="section" for example:

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).

You can also talk about other items such as the new menu tag that the browser can render with an interesting native menu item.

Categories: Webmasters Resources Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.