<< Retour au sommaire

 

HTML 5, balises de structure de page

 

 

Table des matières

  1. Présentation ;
  2. Les balises <header> <nav> <section> <aside> <article> et <footer>
  3. Un exemple complet.

 

Présentation

 

Les balises qui vont vous être présentées maintenant constituent les principales balises qui structurent une page sous la forme de blocs, l’entête, le bloc navigation, la section et le pied de page.

Dans bien des cas de figure, certains blocs sont répétés à l’identique dans les différentes pages de votre site, c’est le cas par exemple pour l’entête et le pied de page.

 

Rappel :

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

 

Les balises <header> <nav> <section> <aside> <article> et <footer>

 

La balise <Header>

 

Cette balise permet de définir un entête dans une page. Bien souvent, on y place une bannière composée de texte et d’images.

Cette balise est de type « super bloc », c’est-à-dire que vous pouvez y intégrer des balises de type « bloc », <h1>, <h2>, <p> etc.

La syntaxe :

<header>

ici le contenu de votre entête

</header>

 

Par exemple :

<header>

<p>

<img src="images/bobine.png" alt="Une bobine de projecteur" />

<br />

<mark>Le petit journal du village de Saint-Laurent de la Prée !</mark>

</p>

</header>

 


La balise <nav>

 

Cette balise permet de spécifier les liens de navigation de votre site.

Cette balise est de type « super bloc », c’est-à-dire que vous pouvez y intégrer des balises de type « bloc », <h1>, <h2>, <p> etc.

 

La syntaxe :

<nav>

ici les liens de navigation

</nav>

 

Par exemple :

<nav>

<p>

<ul>

<li><a accesskey="a" href="#contenu">Accès au contenu</a></li>

<li><a accesskey="c" href="index.html">Accueil</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</p>

</nav>

 

Les balises <section>, <aside> et <article>

 

La balise « section » intègre le contenu spécifique à la page.

Cette balise est de type « super bloc », c’est-à-dire que vous pouvez y intégrer des balises de type « bloc », <h1>, <h2>, <p> etc.

 

La syntaxe :

<section>

Ici le contenu de la page

</section>

 

Par exemple :

<section>

<h1>Les news de la semaine</h1>

<p>

Aucune nouvelle, tout va bien !

</p>

</section>

 

Dans le bloc section, vous avez la possibilité d’employer 2 nouvelles balises :

  1. La balise <aside>, permet d’afficher un commentaire relatif à la section ;
  2. La balise <article>, permet d’afficher un article.

 

Par exemple :

<section id="contenu">

<h1>Les news de la semaines</h1>

<p>

<img src="images/calendrier.png" alt="Un calendrier" />

<br />

<strong>Journal du 17 octobre 144 avant Jésus-Christ</strong>

</p>

<!-- Commentaire sur la section -->

<aside>

<p>

<em>Articles rédigés par Roger DURAN</em>

</p>

</aside>

<!-- Article N°1 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>Un lion dans la forêt</strong>

<br />

Bertrand DUPONT, un chasseur du village, a aperçu un lion de couleur bleue dans la forêt après avoir bu l'apéritif plusieurs heures durant avec ses meilleurs amis...

</p>

</article>

<!-- Article N°2 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>Une chute d'astéroïde</strong>

<br />

Hier après-midi, un astéroïde géant est tombé dans le petit centre-ville de Saint-Laurent de la Prée, on déplore aucune victime, en effet, cet évènement n'a pas intéressé le journal national... Et merde !

</p>

</article>

<!-- Article N°3 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>La boulangerie Galili</strong>

<br />

Bertrand MARTIN, le boulanger annonce qu'il fera du pain dimanche prochain, les habitants du village n'en reviennent pas...

</p>

</article>

</section>

 

La balise <footer>

 

Cette balise offre la possibilité de créer un pied de page. Généralement, les informations qui sont contenus dans le pied de page sont répétées dans toutes les pages.

Cette balise est de type « super bloc », c’est-à-dire que vous pouvez y intégrer des balises de type « bloc », <h1>, <h2>, <p> etc.

 

La syntaxe :

<footer>

<p>

<em>La rédaction vous remercie de votre visite</em>

</p>

</footer>

 


Un exemple complet

 

Voici le code de 2 pages, index.html et contact.html.

Dans ces pages, seul le contenu du bloc « section » varie.

 

Tester les pages

Télécharger l'exemple


Code de index.html :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Le journal de campagne</title>

<bgsound src="../../audio/exemple.mp3" />

</head>

<body>

<!-- L'entête de la page -->

<header>

<p>

<img src="images/bobine.png" alt="Une bobine de projecteur" />

<br />

<mark>Le petit journal du village de Saint-Laurent de la Prée !</mark>

</p>

</header>

<!-- Les liens de navigation de la page -->

<nav>

<p>

<ul>

<li><a accesskey="a" href="#contenu">Accès au contenu</a></li>

<li><a accesskey="c" href="index.html">Accueil</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</p>

</nav>

<!-- La section de la page -->

<section id="contenu">

<h1>Les news de la semaine</h1>

<p>

<img src="images/calendrier.png" alt="Un calendrier" />

<br />

<strong>Journal du 17 octobre 144 avant Jésus-Christ</strong>

</p>

<!-- Commentaire sur la section -->

<aside>

<p>

<em>Articles rédigés par Roger DURAN</em>

</p>

</aside>

<!-- Article N°1 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>Un lion dans la forêt</strong>

<br />

Bertrand DUPONT, un chasseur du village, a aperçu un lion de couleur bleue dans la forêt après avoir bu l'apéritif plusieurs heures durant avec ses meilleurs amis...

</p>

</article>

<!-- Article N°2 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>Une chute d'astéroïde</strong>

<br />

Hier après-midi, un astéroïde géant est tombé dans le petit centre-ville de Saint-Laurent de la Prée, on déplore aucune victime, en effet, cet évènement n'a pas intéressé le journal national... Et merde !

</p>

</article>

<!-- Article N°3 -->

<article>

<p>

<img src="images/clap.png" alt="Un clap électronique" />

<br />

<strong>La boulangerie Galili</strong>

<br />

Bertrand MARTIN, le boulanger annonce qu'il fera du pain dimanche prochain, les habitants du village n'en reviennent pas...

</p>

</article>

</section>

<!-- Le pied de page -->

<footer>

<p>

<em>La rédaction vous remercie de votre visite</em>

</p>

</footer>

</body>

</html>

 


Code de contact.html :

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Le journal de campagne</title>

<bgsound src="../../audio/exemple.mp3" />

</head>

<body>

<!-- L'entête de la page -->

<header>

<p>

<img src="images/bobine.png" alt="Une bobine de projecteur" />

<br />

<mark>Le petit journal du village de Saint-Laurent de la Prée !</mark>

</p>

</header>

<!-- Les liens de navigation de la page -->

<nav>

<p>

<ul>

<li><a accesskey="a" href="#contenu">Accès au contenu</a></li>

<li><a accesskey="c" href="index.html">Accueil</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</p>

</nav>

<!-- La section de la page -->

<section id="contenu">

<h1>Contact</h1>

<adress>

<img src="images/adresse.png" alt="Un répertoire d'adresses" />

<br />

<mark>Le journal de campagne</mark>

<br />

61 avenue des sapins

<br />

17450 Saint-Laurent de la Prée

</adress>

<p>

<img src="images/e-mail.jpg" alt="Un E-Mail" />

<br />

<em>N'hésitez-pas à nous envoyer un courrier !</em>

<br />

<a href="mailto:redaction@campagne.com">Cliquez ici pour nous écrire</a>

</p>

</section>

<!-- Le pied de page -->

<footer>

<p>

<em>La rédaction vous remercie de votre visite</em>

</p>

</footer>

</body>

</html>

 

Philippe BOULANGER