So, this week I’ve been teaching web design at Shillington College in Sydney. Today we had an interesting discussion about <section> vs <div> for marking up regions on a page in HTML5 – in our case: particularly the main content region (which previously we style as <div id=”content”>. The debate stemmed from the (somewhat obsessive) idea that <div>’s are evil.
The evil part of the <div> tag has more to do with the sloppy, messy usage that has become rife with the advent of WYSIWYG software that invariably writes terrible HTML.
What people seem to not understand – or be reluctant to accept is that <div> is still a perfectly acceptable element in HTML5.
Furthermore, I would suggest that there is no more semantic meaning in the use of <section> than <div>. As far as I see it, neither of them carries any intrinsic meaning. The other new HTML5 elements all have embedded meaning.. but section is really no more meaningful than <div> or <span> or any of our other un-semantic tags.
The issue here stems from the seemingly conflicting messaging in the spec. on one hand we are being told to avoid the <div> tag, while on the other hand we are told to use it instead of section to markup a region:
Note: 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
So, while I understand the intended use of section, I really don’t know if it’s the best choice for a content region. Whether I agree with this definition is irrelevant, taking a current reading of the spec, I’m sticking with <div> for my content area (for now).