HTML5 Article Structure with News


/ Published in: HTML
Save to your folder(s)

This example is a full HTML5 article structure. Just copy/paste it into your page to check.


Copy this code and paste it in your HTML
  1. <article class="entry">
  2. <header>
  3. <h1 class="entry-title">What you think about all this?</h1>
  4. <time class="updated" datetime="2013-12-01 01:12:02-0300" pubdate>01-12-2013</time>
  5. <p class="byline author vcard">
  6. By <span class="fn">John Smith</span>
  7. </p>
  8. </header>
  9.  
  10. <div class="entry-content">
  11. <p>...article text...</p>
  12. <p>...article text...</p>
  13.  
  14. <figure>
  15. <img src="tammy-strobel.jpg" alt="Avatar of Mirt Boum" />
  16. <figcaption>Mirt Boum in hisr pared-down, 250sq-ft apt.</figcaption>
  17. </figure>
  18.  
  19. <p>...article text...</p>
  20. <p>...article text...</p>
  21.  
  22. <aside>
  23. <h2>Share this Article</h2>
  24. <ul>
  25. <li>Facebook</li>
  26. <li>Twitter</li>
  27. <li>Etc</li>
  28. </ul>
  29. </aside>
  30.  
  31. <div class="entry-content-asset">
  32. <a href="photo-full.png">
  33. <img src="photo.png" alt="The objects Mirt removed from his life after moving" />
  34. </a>
  35. </div>
  36.  
  37. <p>...article text...</p>
  38. <p>...article text...</p>
  39.  
  40. <a class="entry-unrelated" href="http://fake.site.com/">Find Great Vacations</a>
  41. </div>
  42.  
  43. <footer>
  44. <p>
  45. A version of this article appeared in print on December 1,
  46. 2013, on page BU1 of the New York edition.
  47. </p>
  48. <div class="source-org vcard copyright">
  49. Copyright 2013 <span class="org fn">The New York Times Company</span>
  50. </div>
  51. </footer>
  52. </article>

URL: http://www.apphp.com/index.php?snippet=html-5-article-structure

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.