Monday, August 12, 2013

How to add Article Structure with hNews using HTML5

How to add Article Structure with hNews using HTML5


Here code exemple of HTML5 Article structure with hNews Microformat, it's good for seo, so i suggest to use this format to your articles.

<article class="hentry">
<header>
<h1 class="entry-title">Here article title</h1>
<time class="updated" datetime="2013-08-07 11:11:03-0400" pubdate>08-07-2013</time>
<p class="byline author vcard">
By <span class="fn">Author Name here</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>


Disqus Comments