Friday, March 20th, 2009

HTML 5 section is not just a “semantic div”

Category: Standards

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.

Posted by Dion Almaer at 5:48 am

4 rating from 21 votes


Comments feed TrackBack URI

Interesting to notice that the HTML 4 deprecated menu tag is now part of the HTML 5 draft/standard. That means we can already use it, hooray!

Comment by igstan — March 20, 2009

“The menu element is redefined in HTML 5, and should now be used to list form controls.”

Is that a joke ?

Comment by ywg — March 20, 2009

They should really work on file upload for html 5. It says something that sites have to hack around the input type = file to do anything remotely custom to their app.

Comment by ilazarte — March 20, 2009

@ilazarte, where “it says”?

Comment by igstan — March 20, 2009

@igstan “It says something that XXXX” is an English idiom meaning that XXXX is negative / unwanted :)

Comment by jeromew — March 20, 2009

@jeromew, thanks for clarification. If it had some intonation I would have understood it from the first time.

Comment by igstan — March 20, 2009

@jeromew, that’s not exactly what the idiom means. It just means that it’s noteworthy. “It says something that HTML 5 is so much more capable by adopting and formalizing existing practices” is just as correct a use of the turn of phrase. /pedant

Comment by eyelidlessness — March 20, 2009

If only w3c was as quick to complete specification, as we all are to get off-track :D

Comment by sixtyseconds — March 20, 2009

We need a flag set on a web page to indicate if the markup is intended to be semantic or not… for example a heavy “one page” web application can never really be semantic in my opinion.

I think there should be more allowance for and demarcation between these two uses of the web… standard blog type semantic HTML and HTML to design complicated application UI’s

Comment by RoryH — March 23, 2009

Leave a comment

You must be logged in to post a comment.