Colin Robson says:

I’d go with ‘D’, an article to me, represents the page, and sections represent parts of the article. Although you can have many ‘article’s actually within a page it makes more semantic sense (to me) to use ‘sections’ of a page

Anders Fisher says:

I’d go for D as it’s clearly a section within the context of a search as opposed to a stand alone article, and the image with caption is a clear use cae of figure and figcaption!

Matthew Somerville says:

My thought process, from the spec – a pin is an independent item of content that could be syndicated, so article preferred to section, so not D. I don’t think figure is appropriate, because it’s for things that can be taken out of flow and moved to an appendix, and the pins on the page are the whole point of the flow. So not C. nav says it’s for major navigation, so not A. aside is for things that can be considered separate from the main content – not true here, where the nav/stats only make sense within that context, so not A, B, or, oh, E. I’m out :) Perhaps an article just containing divs?

Richard says:

Yeah. The Nav on C seems weird. I think figure seems OK as they could be put on their own with the caption and still make sense.

Convo does look like a footer.

The person above looks like what I’d do.

Fabrizio Calderan says:

I agree too with Matthew Somerville for the same exact reason.

Alejandro Moreno says:

Taking Matthew Somerville’s comments into account, I put together the sample solution. But I put the comments on a footer.


<article 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>
<div class="stats">
<span>25 likes</span>
<span>2 comments</span>
<span>100 repins</span>
</div>
<footer 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>
</footer>
</article>


Pete says:

@Alejandro – I think we agree that the stats wrapper doesn’t contain actual content; this is meta data. Therefore it needs a descriptive wrapper to distinguish it from the content. The question is: which element do we use?

<aside> is very clearly meant to be used for tangentally related content. The stats are not “related” or “slightly connected” to our content, they directly describe it so I would argue that according to the specs <aside> is appropriate.

To quote html5doctor “The footer element typically contains metadata about its enclosing section” which seems to me to be bang on the money.

Evan Mullins says:

Yes, I think we’ve come to something much stronger than the initial 5 choices.

I think footer for the stats makes sense, especially if we’re putting the .actions into a header. I know neither are required but it gives a sense to me that this is the whole entity.

Luke Padgett says:

What is being pinned? The picture and it’s description. Everything else relates to those and don’t really stand on their own. The picture is the article. Links at the top are all commands for actions, not necessarily places to go which fits a menu. The bottom is information about the author which describes a footer. The stats are an aside to what actions have been performed on the picture. So to me it would be:


<article class="pin">
<div class="pin-holder">
<menu class="actions">
<a href="#repin">Repin</a>
<a href="#like">Like</a>
<a href="#comment">Comment</a>
</menu>
<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>
<footer 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>
</footer>
</article>


Jasper Rijkeboer says:

[edit: sorry for the spam, I’m a newbie here]

I would combine answer C with some of the great comments here. Note that the greyed section can also have child boxes with comments (there’s one added in my example below).

As a Pinterest user I can experience a pin as an actual discernable item and i therfore use the <article> tag to define it as such.
As a pin is the sum of the actual image and the pinner’s personal comment, i would group these together in a <section>. It is on this part of the article that I want run an action. As the actions are not on a different page or in a hierarchy i would elect to use the <menu> tag and not a <nav> tag for these.
As for the stats, they are seemingly related to the figure, yet they are in actual fact related to the pin are therefore outside of this section.
Lastly, the attribution and comments are footnotes to the actual pin and are therefore contained within a <footer>.
But as the attribution and the comments are related to the actual pin each is also contained in an <aside> rather than a <div>.

I was uncertain on the comments though, and I used a data* attribute to uniquely identify a comment.


<article class="pin">
<section class="pin-holder">
<menu class="actions">
<a href="#repin">Repin</a>
<a href="#like">Like</a>
<a href="#comment">Comment</a>
</menu>
<figure>
<a href="me/cat/">
<img src="cat.jpg" alt="My awesome cat" />
<figcaption>Awesome cat description.</figcaption>
</a>
</figure>
</section>
<aside class="stats">
<span>25 likes</span>
<span>1 comments</span>
<span>100 repins</span>
</aside>
<footer class="convo">
<aside class="attribution">
<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>
</aside>
<aside class="comments">
<div data-comment-id="42">
<a href="/user_name/">
<img src="/avatars/user_name_1337.jpg" alt="Profile picture of User Name">
</a>
<p><a href="/user_name/">User Name</a> this pin is cool!</p>
</div>
</aside>
</footer>
</article>


Luke Padgett says:

Can someone advocating the usage of figure & figcaption, particularly someone who thinks it is clear/obvious, explain their reasoning for me? I’m with Pete, I don’t see how you can remove the picture and description while maintaining meaning. I’m still learning this so if I’m missing something I want to know.

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
W3C Specification

Emphasis mine. If you were to use figure & figcaption could you really move it to an appendix or another page without affecting the meaning of the article? Both the stats & convo sections would really have no meaning if you were to do so.

Pete Schuster says:

I agree with Jeremy Keith

frappacanu says:

same like Brian Dukes… even though i had read this before http://html5doctor.com/avoiding-common-html5-mistakes/

kevinTelluLater says:

Luke Padgett skinned the cat. Many great solutions here but I do agree w/ Luke and Pete.

steve faulkner says:

Statements in regards to use of the the figure element in these comments has lead me to believe the current definition of the figure element in HTML is incorrect and should be changed:
current definition of in HTML is problematic.

Alohci says:

Steve and Michael – I’ve always taken that phrase to intentionally have the effect of discouraging figure for the main content. The reason, I believe, is that “figure” on a web page, is directly analogous to a figure in printed book, i.e. a diagram or inset that helps to understand the main content but can be independently positioned to suit the limitations of layout on a printed page.

This is consistent with the way <b> and <i> are defined in HTML5 in terms of standard typographic conventions.

It shouldn’t be necessary to use figure when the image is the main content, because all the text on the page is automatically it’s caption.

Fireh says:

I think the key here is that the <figure> can be referenced later like you would reference a table for its data.
I think of it as a loaded version of <img>.

icaaq says:

a little easier view on a gist https://gist.github.com/4633892

Stefan says:

A rough translation of my answer (posted in German) on my blog):

I’d use none of the given answers.

A/B/C uses article for .convo, probably because it is displayed similar to following repins/comments. But the first entry in .convo is not the “first repin” (maybe technically, but it’s about the meaning here) but the authorship and category info. So using article here is not correct (otherwise you’d use a separate article element for the authorship info of a blogpost, too).

C/D uses figure+figcaption for the main content. But this use is not in compliance with the specification. figure requires two things: the content has to be self-contained (it’s the case here) and it is typically referenced as a single unit from the main flow of the document (it’s not the case). One could argue that typically could mean that other uses might be allowed, too. But I guess it’s clear where the definition is heading to. See the following sentence in the spec:

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

Let’s think of the Pinterest homepage, where the most popular pins might be listed, or think of a detail page where only one pin is shown … you can’t remove the figure without affecting the flow of the document, and the content isn’t referred to from the main content because, well, it is the main content.

D uses section instead of article. Why? A pin perfectly matches every aspect of article in the spec. A section wouldn’t be wrong, but article fits perfectly and is more specific.

E uses div instead of a sectioning element as container. While this wouldn’t be incorrect per se, it results in a document outline error. The aside containing the statistics isn’t part of the included article element. Therefor the aside is related to the whole document (resp. the next parenting sectioning element) instead of the article resp. the div. So it is lost (for the document outline and the sectioning) to which pin the statistics applies.

Now to my answer. As the first step I discuss the usage of sectioning elements (section, article, aside, and nav) and how to “get” the main content by marking-up metadata (address, footer, and header). The second part is about how to markup the actual content and details. At the end I include the whole code.

Part 1: sectioning

Let’s see what the structure of such a pin is:

· image and description (→ main content)
· statistics
· author avatar/name, source (not in the example), category
· comments/repins (not in the example)
· actions

1.1: container

I think it’s clear that we need a sectioning element as container for the whole pin. Possible would be article or section. I think the article element is the right choice here: each post is a self-contained composition and in principle, independently distributable or reusable, e.g. in syndication; it has (or could have) an own author, an own URL, a publication date etc.

1.2: main content

The main content of the article consists of the image and the description. It doesn’t need any markup. Everything else needs to be in its own sectioning element or marked-up with address, footer, or header.

1.3: statistics

The statistics are metadata to the article (resp. the main content). We have two choices here: aside or footer. A footer typically contains information about its section, an aside contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content. The main difference: aside is a sectioning element, so it creates an entry for the document outline. I think the footer element is appropriate here, because statistics are more than just tangentially related.

1.4: author

The avatar and the paragraph about the author/category should be placed in a footer. The spec is pretty clear about it: typically contains information about its section such as who wrote it […].

One might want to include the paragraph in an address element, because it contains the link to the user’s profile, which could be seen as a way to contact the user. However, two problems: the paragraph contains more than the profile link (e.g. the category), but address must not contain information other than contact information. Also, at least for guests, there is no way to contact a user via the profile (so at most they could add an address element only for logged-in users, if they provide a contact form for them).

1.5: comments

They are missing in this example, therefor I don’t include the markup in my answer. But in general: each comment and repin should be enclosed in its own article element. As already noted, the “first” thing looking like a repin isn’t a repin but the author metadata of the pin. See → 1.4.

1.6: actions

For the three actions the following elements might be possible: aside, menu (in aside or footer), or nav. I think the header element is not an option, because these actions hardly count as introductory or navigational aids.

nav and aside are both sectioning elements. Which one of those two would I choose? It depends on the question: Do these actions link to a certain part of the page resp. to a different page? If yes, then I’d go with nav. Btw: the often quoted for sections that consist of major navigation blocks is just a Note, and therefor not normative. However, if these actions would be classical links, I’d consider them the major navigation for that article, too. However, I don’t think that the answer to the question would be yes (I only assume here, because I never used Pinterest). “Like” sounds to me like an instant action, not loading a new page or jumping to a part of the current page. It fires and you are done. So it’s more like a button than a link. “Comment” would probably be a link suitable for nav, while “Repin” is probably somewhere inbetween. I wouldn’t want to separate the three actions, though.

So, what about the menu element? The definition represents a list of commands sounds good for our case here. We don’t need a context menu or a toolbar, so we could go with the default (list) type (so I don’t think we’d run into any serious browser compatibility issues; however, for this quiz browser issues aren’t relevant anyway). To “exclude” this from the main content, we’d need to enclose the menu in an aside element (some might use a footer for that, but I think these kind of links are not good candidates for a footer, as they are in no way about the section).

Part 2: details

I removed the div with the class pin-holder. It’s not relevant for the markup. If needed as CSS/JS hook, simply add it back.

Each of the three action links (inside of menu) should go into a li element.

The statistics (p with class stats) are no “paragraph” (a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic). Use a div instead. Also, instead of using span for each statistic rather use div, too. Otherwise users of textbrowsers etc. would see one line of text without separators: “25 likes 2 comments 100 repins”. Instead of using a div with span elements, a ul would also be possible here.

The image is linked with the detail page of that pin. Therefor we should use the link type bookmark.

The avatar and the author name are linked to the user profile page. Therefor we should use the link type author. This is possible because we used article as sectioning element. Otherwise the authorship link type would apply to the whole document.

Part 3: my answer (code)


<article class="pin">

<aside>
<menu class="actions">
<li><a href="#repin">Repin</a></li>
<li><a href="#like">Like</a></li>
<li><a href="#comment">Comment</a></li>
</menu>
</aside>

<a href="me/cat/" rel="bookmark">
<img src="cat.jpg" alt="My awesome cat">
</a>

<p>Awesome cat description.</p>

<footer>

<ul class="stats">
<li>25 likes</li>
<li>2 comments</li>
<li>100 repins</li>
</ul>

<div class="convo">
<a href="/me/" rel="author">
<img src="me.jpg" alt="Profile picture of me">
</a>
<p><a href="/me/" rel="author">Me</a> onto <a href="/here/">here</a></p>
</div>

</footer>

</article>

If the markup order can also be changed, I’d place the main content (img and p) at the top, followed by the aside, followed by the footer (followed by comments).

Dillon says:

I would wrap the whole thing inside an <article> element for sure, considering repinning is some form of syndication.

This is what the spec sais about the <nav> element: The nav element represents a section of a page that links to other pages or to parts within the page. Even though the actions are <a> elements, they aren’t linking to anything, they are actions. That’s why I don’t think they should be inside a <nav> element.

I wouldn’t use <aside> either, as I consider it as content related to, but not part of the main content. But I’m in doubt about that one.

All that said, I would use something like this:

<article class="pin">
<div class="actions">
<a href="#repin">Repin</a>
<a href="#like">Like</a>
<a href="#comment">Comment</a>
</div>
<figure class="pin-holder">
<a href="me/cat/">
<img src="cat.jpg" alt="My awesome cat"/>
</a>
<figcaption>Awesome cat description.</figcaption>
</figure>
<footer>
<div class="stats">
<span>25 likes</span>
<span>2 comments</span>
<span>100 repins</span>
</div>
<div class="attribution">
<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 class="comments">
<article class="comment">...</article>
</section>
</footer>
</article>

About using the <figure> element “out of spec”, Bruce said:

I think that the definition of <figure> will be used to caption such content. and that the spec should be clarified and widened slightly to allow this.

And I’m going with that.

Also, I’ve included the comments section (not in the answers), containing each comment as an <article> as this is a pattern w3 is using in an example about articles.

Off-topic: There are some misplaced </p> tags in the figure elements on this page. ;)

steve faulkner says:

@Alohci

The question I keep asking myself and keep drawing a blank is:

What benefit does constraining the use of figure/legend as intepreted do? What benefit is it to users who actually consume the semantics?

The HTML spec is not set in stone it can and suggest should and will be changed in this case unless good reasons can be found not to do so.

steve faulkner says:

Hi Alohci

Note the suggested change is not a normative change, it is informative. It, if changed would advise nothing more than is already advised in other parts of the spec in respect to use of figure figcaption. For example have a look at their usage in 4.8.1.1.10 A key part of the content.

In relation to teachability of their use, I would suggest that “the elements can be used to markup an image or other content whenever it has a caption”, is about as simple as it gets, the complexity occurs when we start to try to explain the more esoteric advice (not requirements) in the spec.

steve faulkner says:

Hi Alohci,

Depends on what you mean by “meaning” in practical terms figure maps to the group role in accessibility APIs. If it has no associated figcaption its a figure without an accessible name.

What is the author intent in the example? What we know is that the h1 won’t appear in the document outline, but that is a theoretical concern. Is that the authors intent? At worst in practical terms the use in this case is crufty.