Html5 Tutorial - Future Technology

Monday 10 March 2014

HTML5 Simplequiz #1

A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own).
With Dan’s blessing, we’re beginning an occasional series of HTML5 Simplequizzes. And here’s the first.
Consider a products page on a website. It might be a page showing widgets, HTML5 books or Remy’s favourite nose hair removers. What’s the best way to mark up the products?
Note: please DON’T USE ANGLE BRACKETS in your comments. Escape them with < and > or just use [foo] – we’ll know what you mean.

A:

<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>

B:

<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</article>
<article>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</article>

C:

<section>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</section>
<section>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</section>

D:

<nav>
<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>
...</nav>
Your answers below, please, with your rationale.

No comments:

Post a Comment