Advanced Search

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.

Expand | Embed | Plain Text

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.