Archived Design Uncategorized

HTML5, div and section elements

Finally, some clarity!

When I started making the version of Digital Formula before this one, I decided to have a go at creating semantically-correct markup that also validated using the industry-standard W3C Validator.

This turned out to be more difficult than I thought but not for complexity reasons. I was battling with figuring out which elements to use and when, mostly because the number of articles online that spout various opinions number in the tens of thousands. Not what I was looking for at all. So, here’s what I came up with.

Resources – are any of them correct?

The WhatWG draft says the following:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

That’s one of the resources that makes the most sense to me, especially when talking about semantic markup. I couldn’t go any further, though, without mentioning A Blog Not Limited, the website of Emily P. Lewis. Emily’s series The Beauty of Semantic Markup contains what I’d consider to the best 1-person collection of articles re markup semantics. Part 3 of that series includes the following:

<section> is used for content that can be grouped thematically. A <section> can have a <header>, as well as a <footer>. The point is that all content contained by <section> is related.

That makes perfect sense & combined with the draft specification from WhatWG really helps clear things up for me.

So I guess, no. None of them are correct as such but taken in appropriate measures any resource can be used to help your understanding of semantic markup.