structure - Cours

L'élément body

Rappelons que l'élément body est le conteneur de tous les autres éléments qui sont affichés par le navigateur.

Il n'y a qu'un seul élément body dans une page.

Les balises de titre

Les balises h1, h2, h3, h4, h5, h6 servent aux différents niveaux de titre. h1 est souvent utilisé comme titre principal de la page.

Plus bas, on trouvera des exemples de découpage d'une page, mais il n'y a rien "d'absolu" dans ces exemples, il faut adapter au contenu l'utilisation de ces niveaux de titre en essayant de respecter une hiérarchie (h1 pour les "grands titres", h2 pour les parties principales, h3 pour les sous-parties...)

Les navigateurs donnent par défaut une mise en forme à ces niveaux de titre rappelant cette "hiérarchie". Mais dans la plupart des cas, on sera bien sûr amené à redéfinir cette mise en forme pour les pages particulières que l'on veut écrire.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Niveaux de titre  </title>
         
    </head>
    <body>
         <h1>Mise en forme par défaut par votre navigateur</h1>

        <h2> Niveau 2</h2>
        
         <h3> Niveau 3</h3>
         
         <h4> Niveau 4</h4>
         
         <h5> Niveau 5</h5>
         
         <h6> Niveau 6</h6>
    </body>
</html>

Donnons tout de suite un exemple de structure de page complet afin de donner un peu plus de sens aux autres éléments de structure qui suivent.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> structure  </title>
         
    </head>
    <body>
          <header> <!-- entête de la page -->
                    <h1>Titre de la page</h1>
                    <nav> éléments de navigation du site </nav>
          </header>
          
          <main> <!-- partie contenu de la page -->
          
            <aside> aside</aside>
            
            <section>
                <header>
                    <h2> titre section</h2>
                </header>
                <p> un paragraphe</p>
                <p>un paragraphe</p>
            </section>
                
            <section>
                <h2> titre section</h2>
                <article>
                    <h3> titre article</h3>
                    bla bla
                </article>
                
                <article>
                    <h3>titre article</h3>
                    <p> un paragraphe</p>
                    blublu
                    <aside>un à-côté </aside>
                </article>
            </section>
            
          </main>
          
          <footer> <!-- pied de page -->
          pied  de page
          </footer>
    </body>
</html>

La mise en forme (avec le langage css, placé ici entre les balises style) permet de souligner les différents éléments de structure :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> structure  </title>
        <style>
        body{ 
            height:100%;
            height:600px;
        }
        body>header{
            height:100px;
            background-color: pink;
            margin : 5px;
        }
        body>footer{
            clear: both;
            height:100px;
            background-color: pink;
        }
        main{
            float:left;
            width : 70%;
            height : 100%;
            background-color: yellow;
            margin: 5px;
        }
        body>aside{
            float: right;
            width: 25%;
            background-color: red;
            height : 100%;
        }
        section{
            width: 80%;
            height: 45%;
            background-color: purple;
            margin: 0 auto;
        }
        article{
            width: 80%;
            height: 30%;
            background-color: blue;
        }
        </style>
    </head>
    <body>
          <header> <!-- entête de la page -->
                    <h1>Titre de la page</h1>
                    <nav> éléments de navigation du site </nav>
          </header>
          
          <aside>partie aside : liens divers, éléments en lien avec la page, section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires. </aside>
          
          <main> <!-- partie contenu de la page -->
           main
            <section>
                <header>
                    <h2> titre de section </h2>
                </header>
                <p> ...</p>
                <p>...</p>
            </section>
                
            <section>
                <h2>titre de section </h2>
                <article>
                    <h3> titre d'article</h3>
                </article>
                
                <article>
                    <h3>titre d'article </h3>
                    <p> ...</p>
                    <aside> </aside>
                </article>
            </section>
            
          </main>
          
          <footer> <!-- pied de page -->
          pied de page, contient souvent des liens (contact par exemple)
          </footer>
    </body>
</html>

header

L'élément header définit l'en-tête (le début) de la structure dans laquelle il se trouve. Il est en général destiné à accueil_ICNlir des éléments de titre.

Il peut y avoir plusieurs éléments header dans un même document (par exemple l'en-tête de la page et des en-têtes de section ou d'article ou même de parties aside).

footer

L'élément footer définit le pied (la fin) de la structure dans laquelle il se trouve. Il peut donc y avoir plusieurs éléments footer dans un même document (un pied de page et des pieds d'articles par exemple).

nav

L'élément nav définit un bloc dans lequel on disposera les liens principaux permettant la navigation sur le site ou sur la page en cours.

main

L'élément main définit le bloc principal de la page, il délimite le contenu.

Un seul élément main par page, fils direct de l'élément body. Les en-têtes, pieds de page et hors-textes latéraux sont hors de cet élément.

section

L'élément section définit un bloc dont le contenu est relié au même thème.

Une section ne contient pas obligatoirement un ou des articles. Une section peut être le seul élément structurel d'une partie de contenu.

Si un article (ou un hors-texte latéral) est très long, on peut aussi utiliser l'élément section pour découper ce contenu en thèmes différents.

Une section peut avoir un en-tête (header) et un pied (footer).

article

L'élément article définit un bloc dont le contenu doit pouvoir être diffusé dans sa totalité de façon autonome et indépendante. Un article de journal ou de revue, un billet dans un blog, sont des exemples type d'éléments article.

Un article peut avoir un en-tête (header) et un pied (footer).

aside

L'élément aside est utilisé comme conteneur pour ce qui n'a pas de relation vraiment directe avec le contenu principal de la structure dans laquelle il se trouve (mais qui peut apporter souvent des compléments).

Un élément aside n'est pas fait spécifiquement pour être placé sur le côté droit ou gauche de la structure dans laquelle il se trouve (cela relève de la mise en forme). Le terme "à côté" fait plutôt référence au contenu qui complète ou est périphérique du contenu principal (sémantique).