Posted By

apphp-snippets on 06/05/17

Tagged

html5

Versions (?)

Last Edited at 06/05/17 05:06am

Statistics

Viewed 1041 times

Favorited by 0 user(s)

Related snippets

HTML5 Article Structure with News

/ Published in: HTML

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

Highlighted TextExpand

<article class="entry">
   <header>
      <h1 class="entry-title">What you think about all this?</h1>
      <time class="updated" datetime="2013-12-01 01:12:02-0300" pubdate>01-12-2013</time>
      <p class="byline author vcard">
         By <span class="fn">John Smith</span>
      </p>
   </header>
 
   <div class="entry-content">
      <p>...article text...</p>
      <p>...article text...</p>
 
      <figure>
        <img src="tammy-strobel.jpg" alt="Avatar of Mirt Boum" />
        <figcaption>Mirt Boum in hisr pared-down, 250sq-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 Mirt removed from his life after moving" />
        </a>
      </div>
 
      <p>...article text...</p>
      <p>...article text...</p>
 
      <a class="entry-unrelated" href="http://fake.site.com/">Find Great Vacations</a>
  </div>
 
  <footer>
    <p>
      A version of this article appeared in print on December 1,
      2013, on page BU1 of the New York edition.
    </p>
    <div class="source-org vcard copyright">
      Copyright 2013 <span class="org fn">The New York Times Company</span>
    </div>
  </footer>
</article>

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.