HTML5 Article Structure with hNews

The spec for 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>

Comments

  1. User Avatar
    praveen
    Permalink to comment#

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

    • User Avatar
      Rahul Gupta
      Permalink to comment#

      yes praveen you are right.. it is very eaisy to create reponsive website.. i think Upcoming version are soo diffrent.

  2. User Avatar
    Dan Avery
    Permalink to comment#

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

  3. User Avatar
    Android Tablet PC review

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

  4. User Avatar
    html5

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

    • User Avatar
      Chris Coyier

      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.

    • User Avatar
      Tyrone
      Permalink to comment#

      Nice Chris, that made me laugh…

  5. User Avatar
    Nick @ Leicester Computers

    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. User Avatar
    Wouter J

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

  7. User Avatar
    Kristian Feldsam
    Permalink to comment#

    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. User Avatar
    Mono
    Permalink to comment#

    A demo might be nice.

  9. User Avatar
    l2aelba
    Permalink to comment#

    Cool but can we use

    <div class="entry-content">

    to…

    <section class="entry-content">

    ????

  10. User Avatar
    Thoufeeq
    Permalink to comment#

    Great article, Chris. And the comment preview is awesome BTW :)

  11. User Avatar
    gamer
    Permalink to comment#

    You should not use <header> tag insde <article> – it should be used once on a page – for the main page header.

  12. User Avatar
    Nasser
    Permalink to comment#

    why we nee header inside article , we can use H tags or p to accomplish the session, is it necessary to have it.
    on thing.. we can also use without the need for article.. my question is article tag some thing we should stick to it what addition it adds

  13. User Avatar
    Nasser
    Permalink to comment#

    sorry… i forget
    ..we can also use without the need for .

  14. User Avatar
    Nasser
    Permalink to comment#

    my question is can we use Sections without the need for articles.. is it something we should always used it when we use sections… or it is optional and up to us .

  15. User Avatar
    Wasim
    Permalink to comment#

    Really good article about article tag. Can we use this technique for list of news articles , example as on css-tricks.com landing page. there is list of articles.

  16. User Avatar
    Kuldeep
    Permalink to comment#

    Really useful tag for my work process.

  17. User Avatar
    Antagobonisk
    Permalink to comment#

    Well one thing in html that never changes is its basics ,you look at the whole segment you still have your p tag and the most commonly used div tag well atleast now adays using tables for weblayout is becoming rather outdated….other than that love the semantics of html and how its been used thumbs up boss

  18. User Avatar
    MarvelSlots
    Permalink to comment#

    I am still a little worried about IE8 that cannot translate HTML5 elements.
    How would I make this more compatible for all widely used browsers?

  19. User Avatar
    Internet Explorer
    Permalink to comment#

    I don’t understand any of this. Please use tables for presentation.

  20. User Avatar
    nerijusgood
    Permalink to comment#

    First of all, great article. Also, what about Schema.org? Also, I would put the author inside an <address rel="author"> , I heard its more semantic. Is it true?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag