File Under: HTML5

Test Your Markup Smarts With HTML5 Simplequiz

One of our favorite series of articles on HTML is developer Dan Cederholm’s Simplequiz series, which would give you a real-world chunk of content and then suggest several ways to mark it up. Readers were invited to chime in, picking the solution they believed to be the best and explaining why. At the end of each week, Cederholm would weigh in with his own ideas.

The series is still worth a read, though in some cases the HTML options Cederholm presents have been superseded by HTML5′s new semantic elements. HTML5′s new semantic tags aren’t without their own subtle complexities though — even something as seemingly simple as figuring out when to use <section> and when to use <article> is not as simple as it ought to be. (See Opera’s Bruce Lawson’s blog for a great overview of when to use section and when to use article.)

Given the potential confusion surrounding some of HTML5′s new elements and the general success of Cederholm’s Simplequiz series, the gurus over at HTML5Doctor have (with Cederholm’s blessing) invoked a new series: The HTML5 Simplequiz.

The first quiz in the series seems fairly simple: given a page of widgets for sale, what’s the best way to mark up the products? However, digging into the four choices reveals the often confusing, subtle differences between, <section>, <article>, <div> and (less so) <nav>.

If you’ve got opinions or want to see how other people would handle the markup, head on over to HTML5doctor, read through the comments and offer your own ideas.

For the record, I would use the <article> tag, since, despite having a bias toward blog and news sites, the actual definition of <article> — “a self-contained composition in a document, page, application, or site” — seems to fit the bill. [aside: possible <article> should have be named <item> to make it a bit less biased toward particular types of content.]

If you disagree, be sure to post your own ideas over at HTML5Doctor.

Math teacher photo by foundphotoslj/Flickr/CC

See Also: