> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Apprenez à créer votre site web avec HTML5 et CSS3

> Mise en page du site

> Structurer sa page

> Lecture du tutoriel

Structurer sa page

Par

Mathieu Nebra (M@teo21)

Mise à jour : 01/11/2011

Difficulté : Facile Facile

208 199 visites depuis 7 jours, dont 5 712 sur ce chapitre classé 1/786

Nous approchons de plus en plus du but. Si nos pages web ne ressemblent pas encore tout à fait aux sites web que nous connaissons, c'est qu'il nous manque les connaissances nécessaires pour faire la mise en page.

En général, une page web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas).

Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la structuration du site. Ces balises ont été introduites par HTML5 (elles n'existaient pas avant) et vont nous permettre de dire : « Ceci est mon en-tête », « Ceci est mon menu de navigation », etc.

Pour le moment, nous n'allons pas encore faire de mise en page. Nous allons en fait préparer notre document HTML pour pouvoir découvrir la mise en page dans les prochains chapitres.

Retour en haut

Sommaire du chapitre :

Les balises structurantes de HTML5
Exemple concret d'utilisation des balises
Assurer la compatibilité avec IE
Q.C.M.

Retour en haut

Les balises structurantes de HTML5

Je vais vous présenter ici les nouvelles balises introduites par HTML5 pour structurer nos pages. Vous allez voir, cela ne va pas beaucoup changer l'apparence de notre site pour le moment, mais il sera bien construit et prêt à être mis en forme ensuite !

<header> : l'en-tête

La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site…

Vous devrez placer ces informations à l'intérieur de la balise <header> :

Code : HTML

1
2
3

<header>
    <!-- Placez ici le contenu de l'en-tête de votre page -->
</header>

La figure suivante, par exemple, représente une partie du Site du Zéro et vous pouvez voir son en-tête.

L'en-tête peut contenir tout ce que vous voulez : images, liens, textes…

Il peut y avoir plusieurs en-têtes dans votre page. Si celle-ci est découpée en plusieurs sections, chaque section peut en effet avoir son propre <header>.

<footer> : le pied de page

À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.

Code : HTML

1
2
3

<footer>
    <!-- Placez ici le contenu du pied de page -->
</footer>

La figure suivante vous montre à quoi ressemble le pied de page du Site du Zéro.

<nav> : principaux liens de navigation

La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site.

Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> :

Code : HTML

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="forum.html">Forum</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

En figure suivante, vous pouvez observer le menu principal de navigation du Site du Zéro, qui pourrait utiliser la balise <nav>.

<section> : une section de page

La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page.

Code : HTML

<section>
    <h1>Ma section de page</h1>
    <p>Bla bla bla bla</p>
</section>

Sur la page d'accueil du portail Free.fr, on trouve plusieurs blocs qui pourraient être considérés comme des sections de page (figure suivante).

Des sections de page sur le portail de Free

Chaque section peut avoir son titre de niveau 1 (<h1>), de même que l'en-tête peut contenir un titre <h1> lui aussi. Chacun de ces blocs étant indépendant des autres, il n'est pas illogique de retrouver plusieurs titres <h1> dans le code de la page web. On a ainsi « Le titre <h1> du <header> », « Le titre <h1> de cette <section> », etc.

<aside> : informations complémentaires

La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).

Code : HTML

1
2
3

<aside>
    <!-- Placez ici des informations complémentaires -->
</aside>

Il peut y avoir plusieurs blocs <aside> dans la page.

Sur Wikipédia, par exemple, il est courant de voir à droite un bloc d'informations complémentaires à l'article que l'on visualise. Ainsi, sur la page présentant la planète Saturne (figure suivante), on trouve dans ce bloc les caractéristiques de la planète (dimensions, masse, etc.).

Bloc d'informations complémentaires sur Wikipédia

<article> : un article indépendant

La balise <article> sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).

Code : HTML

<article>
    <h1>Mon article</h1>
    <p>Bla bla bla bla</p>
</article>

Par exemple, voici un article sur le Site du Zéro en figure suivante.

Résumé

Ouf, cela fait beaucoup de nouvelles balises à retenir.
Heureusement, je vous ai fait un petit schéma (figure suivante) pour vous aider à retenir leur rôle !

Sections de la page identifiées par les balises

Ne vous y trompez pas : ce schéma propose un exemple d'organisation de la page. Rien ne vous empêche de décider que votre menu de navigation est à droite, ou tout en haut, que vos balises <aside> sont au-dessus, etc.
On peut même imaginer une seconde balise <header>, placée cette fois à l'intérieur d'une <section>. Dans ce cas-là, elle sera considérée comme étant l'en-tête de la section.
Enfin, une section ne doit pas forcément contenir un <article> et des <aside>. Utilisez ces balises uniquement si vous en avez besoin. Rien ne vous interdit de créer des sections contenant seulement des paragraphes, par exemple.

Retour en haut

Exemple concret d'utilisation des balises

Essayons d'utiliser les balises que nous venons de découvrir pour structurer notre page web. Le code ci-dessous reprend toutes les balises que nous venons de voir au sein d'une page web complète :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Zozor - Le Site Web</title>
    </head>

    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Carnets de voyage</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
            </aside>
            <article>                
                <h1>Je suis un grand voyageur</h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
        
        <footer>
            <p>Copyright Zozor - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
        
    </body>
</html>

Ce code peut vous aider à comprendre comment les balises doivent être agencées. Vous y reconnaissez un en-tête, un menu de navigation, un pied de page… et, au centre, une section avec un article et un bloc <aside> donnant des informations sur l'auteur de l'article.

À quoi ressemble la page que nous venons de créer ?

À rien !
Si vous testez le résultat, vous verrez juste du texte noir sur fond blanc (figure suivante). C'est normal, il n'y a pas de CSS ! Par contre, la page est bien structurée, ce qui va nous être utile pour la suite.

Les liens sont volontairement factices (d'où la présence d'un simple #), ils n'amènent donc nulle part (eh, c'est juste une page de démo) !

Je ne comprends pas l'intérêt de ces balises. On peut très bien obtenir le même résultat sans les utiliser !

C'est vrai. En fait, ces balises sont seulement là pour expliquer à l'ordinateur « Ceci est l'en-tête », « Ceci est mon pied de page », etc. Elles n'indiquent pas, contrairement à ce qu'on pourrait penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous le verrons dans peu de temps maintenant.

À l'heure actuelle, pour tout vous dire, ces balises ont encore assez peu d'utilité. On pourrait très bien utiliser des balises génériques <div> à la place pour englober les différentes portions de notre contenu. D'ailleurs, c'est comme cela qu'on faisait avant l'arrivée de ces nouvelles balises HTML5.

Néanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent à tirer parti intelligemment de ces nouvelles balises. On peut imaginer par exemple un navigateur qui choisisse d'afficher les liens de navigation <nav> de manière toujours visible ! Quand l'ordinateur « comprend » la structure de la page, tout devient possible.

Retour en haut

Assurer la compatibilité avec IE

Les nouvelles balises que nous venons de voir ne sont reconnues par Internet Explorer que depuis sa version 9 (IE9). Cela va poser un problème car, quand les anciennes versions d'IE ne connaissent pas une balise… elles ne traitent pas correctement la page (impossible de modifier leur CSS par exemple) !

Cela peut heureusement se régler assez facilement à l'aide d'un script JavaScript. Les scripts sont des petits morceaux de code qui permettent de manipuler la page web et d'effectuer certaines actions. Nous n'allons pas nous intéresser ici au JavaScript (ce n'est pas le sujet de ce cours) mais il faut savoir que ce type de script est appelé depuis les pages HTML d'une façon assez similaire à l'appel des fichiers CSS.

Les fichiers JavaScript portent généralement l'extension .js. Dans le code HTML, on les place en général dans la balise <head> avec cette balise :

Code : HTML

1	<script src="monscript.js"></script>

Si je vous présente (brièvement) JavaScript ici, c'est parce qu'un petit script répondant au doux nom de HTML5shiv permet de faire en sorte que les balises que nous venons de voir (<header>, <footer>, <section>…) s'affichent correctement sur les anciennes versions d'Internet Explorer (IE6, IE7, IE8). Concrètement, il vous suffit d'ajouter les lignes suivantes dans votre code :

Code : HTML

1
2
3

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Placez ce code dans la balise <head> comme ceci :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Inclusion de HTML5shiv</title>
    </head>

    <body>

    </body>
</html>

Et voilà, votre site s'affichera désormais sans problème dans Internet Explorer !

Sans rentrer dans le détail, sachez que <!--[if lt IE 9]> est un commentaire conditionnel. C'est un commentaire spécial qui n'est lu que par Internet Explorer. Il permet de faire en sorte que le script s'exécute uniquement sur les versions d'Internet Explorer inférieures à IE9 (les autres navigateurs n'en ont pas besoin et ignoreront le commentaire).

Retour en haut

En résumé

Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web :
- <header> : en-tête ;
- <footer> : pied de page ;
- <nav> : liens principaux de navigation ;
- <section> : section de page ;
- <aside> : informations complémentaires ;
- <article> : article indépendant.
Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.
Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page si on le souhaite.
Le code JavaScript HTML5shiv permet de faire en sorte que ces balises soient reconnues pour les versions d'Internet Explorer antérieures à IE9.

Retour en haut

Retour en haut

15 commentaires pour "Structurer sa page"

Note moyenne : 3.85 / 4 (3160 votes)

Pseudo	Commentaire
Mickaël83	# Posté le 30/12/2011 à 19:48:00
	j'ai pas très bien compris les balises <header>,<footer> il faut les mettres dans head ou dans body, parce que moi quand je les met sa fait comme si j'avais pas mis les balises
Fabinfomania	# Posté le 23/02/2012 à 15:01:56
Avis : Très bon Blog Twitter close	Bonjour, Alors ici j'ai eu un petit soucie alors j'ai utiliser le CSS avec float : seulement dés que je veux placer mon <aside></aside> il se mes sous les article hors de la section. Mais il n'est pas hors de la section dans le codage alors pourquoi se met-il hors zone. Grazier a tou(te) et tous qui pourrons me répondre
titico	# Posté le 22/03/2012 à 14:54:34
	Je n'arrive pas à faire une section comprenant un article et deux aside exactement comme sur le schéma de votre page, comment faire s'il vous plait je bloque la dessus depuis un bon moment alors que mon site est presque fini a part ça..
Julien-SiteWeb	# Posté le 25/03/2012 à 12:07:49
	D'abord, ça fait 2 jours que je suis vos tuto' et je suis ravi car c'est génial ! Mais j'ai une question : Maintenant qu'on connait : aside, section et tout, devons-nous utiliser les bordures et les alignements css pour les structurer, " à gauche, à droite, ... " ? Où ça sera plus loin dans le cours ? Merci d'avance, L'avenir est faîtes de belles choses si nous faisons de bons choix. Fin d'Apprentissage : HTML5, CSS3.
azizha	# Posté le 27/04/2012 à 12:55:04
Avis : Très bon	merci pour ce tuto ;p j'ai un code html qui va vous résoudre tous les problèmes avec Internet explorer même pour les IE moins 7 qui va leur demander de télécharger d'autre navigateur et pour IE moins que 9 ou pour Mozilla ou n'emporte quelle autre navigateur ancien il va lire votre code html normalement . sans être long voici le code html 5 : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href=".css"/> <meta content="width=device-width, user-scalable=yes initial-scale=1.0" name="viewport" /> <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; margin-bottom: 20px;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'> Vous utilisez un navigateur ancien.</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'> Pour un bon usage de ce site, nous vous conseillons d'installer l'un des navigateurs récents suivants : </div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'> <img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]-->™ <style> abbr,article,aside,audio,canvas,datalist,details,figure,dialog,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video {display:block;} </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>Titre de la page</title> </head> <body> </body> </html> yeahha!!!