Les balises HTML structurantes

Pour réaliser un site web, il faut créer une charte graphique que l’on va retrouver sur les différentes pages. Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web.

Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent.

<header> : en-tête
On y trouve le plus souvent un logo, une bannière, le slogan du site…

<footer> : pied de page
On y trouve des informations comme des liens de contact, le nom de l’auteur, les mentions légales, etc.

<nav> : liens de navigation
Elle regroupe les principaux liens de navigation.

<section> : section de page
Elle regroupe des contenus en fonction de leur thématique.

<article> : article
Elle 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.

<aside> : informations complémentaires
Elle contient les informations complémentaires au document que l’on visualise. Ces informations sont généralement placées sur le côté.

<div> : balise universelle
La balise <div> n'a aucun sens particulier (contrairement à <p> qui veut dire « paragraphe », <h1> « titre », etc.). Généralement la balise <div> est utilisée pour contenir et imbriquer d'autres éléments html.

Pour résumer :

Ces balises peuvent être imbriquées les unes dans les autres.

<body>
    <header>
        <div>
        ...
        </div>
        <nav>
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            ...
        </article>
    </section>
 
    <footer>
        <div>...</div>
    </footer>
</body>

A faire vous-même 1	index4.html	style4.css
Reprendre le fichier index4.html. Structurer votre page en utilisant les nouvelles balises de ce chapitre. L'apparence de votre site est-elle modifiée ?