Article predstavlja deo stranice (logičku celinu) koja je nezavisna od ostatka sadržaja. Npr. blog post, novinski članak, komentar koji korisnici ostavljaju, odgovor na forumu, itd.
Code:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time datetime="2009-10-09">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
Na stranici možeš imati dosta sadržaja, ali ovaj članak (The Very First Rule of Life) predstavlja nezavisnu celinu, isto kao što tvoj post i moj post na ovoj temi predstavljaju dve nezavisne celine.
Header i
Footer elementi nisu obavezni.
Article element može da sadrži ugnježdene
article elemenate i onda se oni odnose na sadržaj spoljašnjeg elementa.
Code:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time datetime="2009-10-09">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article id="c1">
<footer>
<p>Posted by: George Washington</p>
<p><time datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article id="c2">
<footer>
<p>Posted by: George Hammond</p>
<p><time datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
U ovom primeru svaki komentar predstavlja jednu nezavisnu celinu ali se nalaze unutar glavnog article elementa. Kada Google bude parsirao ovu stranicu, znaće da se ova dva komentara odnose na na članak
The Very First Rule of Life, a ne na bilo koji drugi članak koji se može nalaziti na stranici. Lista komentara opet predstavlja jednu logičku celinu/sekciju i zato se nalaze unutar
Section elementa.
Evo još jedan primer:
Code:
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
Ove imamo jedan članak koji govori o jabukama:
Red Delicious i
Granny Smith. Ove dve celine nisu izdvojene u posebne article (kao što je bio slučaj sa komentarima) jer nisu nezavisne od glavnog članka već samo predstavljaju njegov deo. Kao kada smo u osnovnoj školi morali da pišemo sastav iz srpskog jezika: sastav bi bio jedan
article koji bi imao tri sekcije: uvod, razradu i zaključak. Takođe, vodi računa da ovde svaki
section element može imati svoj
h1 element jer
h1 element koji pripada sekciji nije isto što i
h1 element koji pripada članku.
HTML5 jeste zaživeo i Google odlično barata sa njim. Npr. ako na stranici nemaš
meta description tag, ali imaš Article element, Google će koristiti tekst iz Article elementa u svojim rezultatima pretrage. Ako nemaš ni
meta description tag ni Article element, onda će Google koristiti tekst koji se nalazi u Body elementu jer ne zna šta predstavlja navigaciju, a šta sadržaj koji je namenjen korisniku. Npr. za Google
Code:
<body>
<div class="nav">
<ul>
<li><a href="#">Prvi link</a></li>
<li><a href="#">Drugi link</a></li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor</p>
</div>
</body>
nije isto što i ovo:
Code:
<body>
<nav>
<ul>
<li><a href="#">Prvi link</a></li>
<li><a href="#">Drugi link</a></li>
</ul>
</nav>
<article>
<p>Lorem ipsum dolor</p>
</article>
</body>