Outils pour utilisateurs

Outils du site


creation_d_un_site_internet_avec_html5_et_css3:les_balises_html_structurantes

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 ?
creation_d_un_site_internet_avec_html5_et_css3/les_balises_html_structurantes.txt · Dernière modification: 10/07/2019 19:30 par Stéphane LAURENT