HTML5 : La balise ARTICLE
Structure d'une balise <article> html5
Nous avons, ici, une page html5 avec un en-tête (balise <header>), une barre de navigation (balise
<nav>), une colonne de gauche (balise <aside>) et une zone pour mettre le contenu principal de
la page. C'est dans cette zone que l'on va placer notre balise ARTICLE.
Il ne peut y avoir qu'une seule balise article dans une page html5. Pour subdiviser la zone, on peut utiliser d'autres balises sémantiques html5 telles que <header>, <section>, <footer>, ou encore des simples balises
Code html5:
<article>
<header>
<h1>Titre du header de l’article: h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet orci ante, sed sollicitudin nis
</p>
</header>
<section>
<h2>Titre de cette section: h2</h2>
<p>Sed ultricies tortor nec nunc aliquam hendrerit.
Donec tempor scelerisque bibendum. Fusce accumsan convallis fringilla.
Cum sociis natoque penatibus et magnis dis parturient montes,
sed feugiat mauris libero ornare neque.
</p>
</section>
<footer>
<h3>Titre du footer de l’article: h3</h3>
<p>Maecenas ut felis orci. Praesent vel nulla enim, auctor mollis odio.
Suspendisse ultricies lacus est, fringilla interdum mi.
Nunc quis magna purus, a mollis felis
</p>
</footer>
</article>
<header>
<h1>Titre du header de l’article: h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet orci ante, sed sollicitudin nis
</p>
</header>
<section>
<h2>Titre de cette section: h2</h2>
<p>Sed ultricies tortor nec nunc aliquam hendrerit.
Donec tempor scelerisque bibendum. Fusce accumsan convallis fringilla.
Cum sociis natoque penatibus et magnis dis parturient montes,
sed feugiat mauris libero ornare neque.
</p>
</section>
<footer>
<h3>Titre du footer de l’article: h3</h3>
<p>Maecenas ut felis orci. Praesent vel nulla enim, auctor mollis odio.
Suspendisse ultricies lacus est, fringilla interdum mi.
Nunc quis magna purus, a mollis felis
</p>
</footer>
</article>