Skip to content

Instantly share code, notes, and snippets.

@mko
Created July 15, 2014 19:02
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mko/f05e8cb0d2423f6deaa7 to your computer and use it in GitHub Desktop.
Save mko/f05e8cb0d2423f6deaa7 to your computer and use it in GitHub Desktop.
h-entry as photo vs h-entry as note with photo
<article class="h-entry">
<figure class="e-content p-name">
<img src="/path/to/image" alt="Description of Image" class="u-photo">
<figcaption class="p-summary">Description of Image</figcaption>
</figure>
<p>Published by <a class="p-author h-card" href="https://domain.ext">Photographer</a>
on <time class="dt-published" datetime="2014-07-14 12:00:00">July 14<sup>th</sup>, 2014</time></p>
</article>
<figure class="h-entry">
<img src="/path/to/image" alt="Description of Image" class="e-content u-photo">
<figcaption class="p-name p-summary">Description of Image</figcaption>
<p>Published by <a class="p-author h-card" href="https://domain.ext">Photographer</a>
on <time class="dt-published" datetime="2014-07-14 12:00:00">July 14<sup>th</sup>, 2014</time></p>
</figure>
@ojohnny
Copy link

ojohnny commented Aug 1, 2015

Nice distinction!

Minor nitpick: I don't think the second example is valid HTML5. The spec says that <figcaption> may only be the FIRST or the LAST child in a <figure> element.
http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment