One of our readers commented on an article a while ago (I won’t tell you which one just now 😉 asking about marking up items on Pinterest. It struck me that this would be a prime candidate for a Simplequiz, so here we are.
Pinterest, for the uninitiated of you, allows you to organise and share things you love — mostly food, drink, and kittens.
We’re going to look at how to mark up a single pinned item, as shown below:
The existing markup is below (I’ve simplified it a little to make it easier to read):
<div class="pin"> <div class="pin-holder"> <div class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </div> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> </a> </div> <p>Awesome cat description.</p> <p class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </p> <div class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </div> </div>So, all’s well and good, but how should it be marked up in HTML5? As the saying goes, there are a hundred ways to skin a cat (excuse the pun). We’ve created five possible options, one of which achieved some consensus amongst the Doctors. Be warned: some of the differences between options are small and may be difficult to spot. Look carefully at each option!
Let us know which answer you would go with (or roll your own) in the comments. Make sure you show your working out. Also, please escape your HTML (or use pseudo code), or we’ll put a severed unicorn head skinned cat in your bed.
Answer A: #
An <article>, with <nav> and <aside> elements:
<article class="pin"> <div class="pin-holder"> <nav class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </nav> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> </a> </div> <p>Awesome cat description.</p> <aside class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </aside> <article class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </article> </article>Answer B: #
An <article>, with <aside> elements:
<article class="pin"> <div class="pin-holder"> <aside class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </aside> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> </a> </div> <p>Awesome cat description.</p> <aside class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </aside> <article class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </article> </article>Answer C: #
An <article>, with <nav>, <figure>, and <aside> elements:
<article class="pin"> <div class="pin-holder"> <nav class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </nav> <figure> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> <figcaption>Awesome cat description.</figcaption> </a> </figure> </div> <aside class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </aside> <article class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </article> </article>Answer D: #
A <section>, with <aside> and <figure> elements:
<section class="pin"> <div class="pin-holder"> <aside class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </aside> <figure> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> <figcaption>Awesome cat description.</figcaption> </a> </figure> </div> <p class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </p> <div class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </div> </section>Answer E: #
A <div>, with child <article> and <aside> elements:
<div class="pin"> <article class="pin-holder"> <aside class="actions"> <a href="#repin">Repin</a> <a href="#like">Like</a> <a href="#comment">Comment</a> </aside> <a href="me/cat/"> <img src="cat.jpg" alt="My awesome cat"> <p>Awesome cat description.</p> </a> </article> <aside class="stats"> <span>25 likes</span> <span>2 comments</span> <span>100 repins</span> </aside> <div class="convo"> <a href="/me/"> <img src="me.jpg" alt="Profile picture of me"> </a> <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p> </div> </div>Your answers below, please, with your rationale, by Tuesday, 29th January.
Simplequiz #7: Pinterest originally appeared on HTML5 Doctor on January 22, 2013.
[plinker]
