Camera Icon

Got an event that needs shooting?  I've covered multiple events for marathon-photos.com and can capture the scenes & emotions that make your event unique.

Some samples of my own work are at Digital Formula on Flickr.

Wand Icon

Do you or your business need a website but you're unsure where to start?  Get in touch now and we'll get it sorted.

I focus on usable functionality & can setup smaller sites using Wordpress within hours of the order being placed.  Magic!

Globe Icon

So, you've already got a website but need help managing it?  I can help you.

Don't worry about knowing every single detail.  I'll find out the most important stuff and work with you to reach your goal, not someone else's.

said on twitter: LOL spammers really do bank on the ignorance of their targets huh? A file with a .jpg.exe extension ... really? http://t.co/0TgobjQc

 
Short URL
Warning: This article is older than 180 days and may contain inaccurate information.  Please use the information below at your own risk.

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.

» Tags: html5, design, web design, div, section
DigitalFormula is an experiment in HTML5 and CSS3 design by Chris Rasmussen, an amateur/casual designer based in Melbourne, Australia. -37.813611 144.963056