Code Snippet

Home » Code Snippets » HTML » HTML5 Article Structure with hNews

HTML5 Article Structure with hNews

<article class="hentry">
  <header>
    <h1 class="entry-title">But Will It Make You Happy?</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>08-07-2010</time>
    <p class="byline author vcard">
        By <span class="fn">Stephanie Rosenbloom</span>
    </p>
  </header>

  <div class="entry-content">
      <p>...article text...</p>
      <p>...article text...</p>

      <figure>
        <img src="tammy-strobel.jpg" alt="Portrait of Tammy Strobel" />
        <figcaption>Tammy Strobel in her pared-down, 400sq-ft apt.</figcaption>
      </figure>

      <p>...article text...</p>
      <p>...article text...</p>

      <aside>
        <h2>Share this Article</h2>
        <ul>
          <li>Facebook</li>
          <li>Twitter</li>
          <li>Etc</li>
        </ul>
      </aside>

      <div class="entry-content-asset">
        <a href="photo-full.png">
          <img src="photo.png" alt="The objects Tammy removed from her life after moving" />
        </a>
      </div>

      <p>...article text...</p>
      <p>...article text...</p>

      <a class="entry-unrelated" href="http://fake.site/">Find Great Vacations</a>
  </div>

  <footer>
    <p>
      A version of this article appeared in print on August 8,
      2010, on page BU1 of the New York edition.
    </p>
    <div class="source-org vcard copyright">
        Copyright 2010 <span class="org fn">The New York Times Company</span>
    </div>
  </footer>
</article>

Reference URL

Subscribe to The Thread

  1. it’s too different from html 4!! but it’s cool :)

  2. Now this is a handy piece of code. HTML5, microformat, my goodness. Thank you!

  3. Google, like codes of HTML5. I tried to adapt the codes on my website. Nice article.

  4. html5

    The aside element in an article should include the autor details. Look it up.

    • YOU GUYS. HTML5 HIMSELF commented here! Wow! You heard it here first, all aside elements must include the Romanian word “autor” which is the “feminine equivalent autoare.” Oh HTML5, you so crazy.

    • Nice Chris, that made me laugh…

  5. I really like the look of HTML5 its seems clearer and less fussy.
    I need to get my head in the game and do some catching up with HTML5 & CCS3!!

  6. Wouter J

    Why don’t you use microdata? See http://schema.org/ for more information.

  7. Hi, I think that is better to use itemtype itemscope and itemprop atributes instead of class. So look at schema.org. them you can test your microdata on this url http://www.google.com/webmasters/tools/richsnippets

  8. Mono

    A demo might be nice.

  9. Cool but can we use

    <div class="entry-content">

    to…

    <section class="entry-content">

    ????

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~