Groupement - Cours

p

La balise p est une balise fréquente, elle sert à délimiter le contenu d'un paragraphe.

div

La balise div est utile à chaque fois que l'on veut regrouper un ensemble de blocs et que l'on n'a pas de raison de regrouper cet ensemble à l'aide des balises vues dans la page structure. La balise div n'a pas a priori de signification sémantique, contrairement aux balises de la page structure.

Le regroupement est dans ce cas en général rendu visible par une règle css concernant l'ensemble de la balise div.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Niveaux de titre  </title>
        <style>
            div{
                /* on limite la largeur à 80% de la largeur du conteneur : */
                width: 80%;
                /* on centre horizontalement le div  :*/
                margin : 0 auto;
                /* bordure verte autour du div : */
                border: 1px solid green;
                /* texte centré dans le div : */
                text-align:center;
            }
        </style>
    </head>
    <body>
          
          <div>
             Section à laquelle on veut donner une unité visuelle     regroupant divers blocs.
          </div>
    </body>
</html>

Avant html5, les balises telles que header, footer, article, section, aside n'existaient pas : tout était placé dans des balises div. On les différentiait ensuite avec des attributs class différents (voir le cours css pour l'attribut class).

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Niveaux de titre  </title>
        <style>
            .theoreme{
                /* on limite la largeur à 80% de la largeur du conteneur : */
                width: 80%;
                /* on centre horizontalement le div  :*/
                margin : 0 auto;
                /* bordure verte autour du div : */
                border: 1px solid green;
                background-color : #eeeeee;
            }
            .enonceTheoreme{
                background-color : red;
                width: 80%;margin : 0 auto;
                margin-bottom: 5px;
            }
            .exemple{
                background-color : yellow;
                width: 80%;
                margin : 5px;
            }
            .demonstration{
                background-color : purple;
                width: 80%; 
                margin: 5px;
            }
        </style>
    </head>
    <body>
          
          
          <div class="theoreme">
                <div class="enonceTheoreme">
                  Tout entier pair a, en écriture décimale, un chiffre des unités égal à 0, 2, 4, 6 ou 8.
                </div> 
                <div class="exemple">
                 L'entier   12 = 2 * 6  est pair et son chiffre des unités est 2.
                </div>
                <div class="demonstration">
                  bla bla bla... 
                </div>
                <p> La réciproque est vraie : </p>
                <div class="enonceTheoreme">
                  Tout entier dont le chiffre des unités, en écriture décimale, est  égal à 0, 2, 4, 6 ou 8 est un entier pair.
                </div>
                <div class="exemple">
                 L'entier   4584478   est pair car son chiffre des unités est 8.
                </div>
                <div class="demonstration">
                  bla bla bla... 
                </div>
          </div>
          
    </body>
</html>

En html5, on évitera cet excès de div en utilisant, à chaque fois que cela s'y prête du point de vue de la sémantique, les balises de structure.

Autres balises de groupement

Les balises table (tableau), ul (liste non ordonnée), ol (liste ordonnée), dl (liste de définition) sont les principales autres balises de groupement. Elles seront vues dans d'autres pages de cours.