Structurer vos pages Web

Les divisions

Les divisions sont des éléments de niveau bloc qui permettent de regrouper ensemble les éléments de vos pages Web qui ont un thème commun ou auxquels vous voulez donner un formatage donné.

Les divisions prédéfinies

HTML5 a un certain nombre de divisions prédéfinies pour structurer votre code. Elles sont utilisées pour délimiter des parties du code qui ont un thème ou une fonction commune. Ce sont par exemple :

  • Les balises <article></article> pour délimiter un contenu distinct qui peut être consulté indé­pen­dam­ment du reste de la page ;
  • Les balises <header></header> pour délimiter l'en- tête d'une page ou d'un article (« header » = en- tête) ;
  • Les balises <section></section> pour délimiter un contenu ayant un thème commun, qui peut faire partie d'un article ou, au contraire, contenir plusieurs article ayant des thèmes similaires ;
  • Les balises <footer></footer> pour délimiter un pied de page ou le bas d'un article (« footer » = pied de page) ;
  • Les balises <aside></aside> (« aside » = à côté) pour délimiter un contenu en relation avec un article, mais indépendant du contenu principal de cet article (p.ex. « Saviez-vous que … ? ») ;
  • Les balises <nav></nav> pour délimiter un menu de navigation principal.

Dans les situations mentionnées, ces éléments sont à préférer à l'élément générique div qui suit à cause de leur contenu sémantique.

Les balises <div></div>

Il y a d'autres situations où vous voulez simplement regrouper une partie du contenu de votre page Web pour des raisons purement de formatage ou encore vous voulez regrouper un contenu avec un thème commun, mais dans une situation qui n'est pas couverte par les divisions prédéfinies ci-haut. Dans ce cas, l'élément à utiliser est l'élément div.

Par exemple, si, comme dans cette page Web-ci, vous voulez limiter la largeur de votre page Web et donner un arrière-plan différent à votre contenu et au reste de l'écran, vous pouvez intercaler un élément div entre l'élément body et le contenu de votre page Web. Ceci vous permettra, en utilisant le CSS, de donner un certain arrière-plan à cet élément div (contenu de la page Web) et un autre à l'élément body (qui sera le reste de l'écran).

Classes et identifiants

Le langage HTML permet d'identifier des éléments de manière unique avec un identifiant ou au contraire d'utiliser la notion de classe pour spécifier un groupe d'éléments auxquels on veut donner un traitement commun.

L'attribut class

Tous les éléments HTML acceptent un attribut nommé class, qu'on peut utiliser pour associer une ou plusieurs classes à cet élément :

<p class="intro theme_vert"> … </p>

<div class="conclusion theme_vert fond-bleu-clair">
…
</div>

Comme on le verra, ces classes permettent entre autres d'appliquer à ces éléments des stylisations particulières.

On recommande que les noms que vous choisissez pour vos classes ne contiennent que des lettres non-accentuées, des chiffres, des traits d'union et des barres de soulignement et que le premier caractère soit une lettre. Les lettres peuvent être majuscules ou minuscules, ce n'est pas important, le HTML ne faisant pas de différence entre les deux. Si on associe plus d'une classe à un élément, leurs noms doivent être séparés par un espace vide. Il est permis d'attribuer une classe donnée à plusieurs éléments de la même page.

L'attribut id

En HTML5, tous les éléments acceptent également un attribut nommé id, qui peut être utilisé pour attribuer à cet élément un identifiant unique :

<div id="maDivision">
…
</div>

Le nom de cet identifiant ne peut pas comporter d'espace vide et les recommandations pour les noms d'identifiants sont les mêmes que pour les noms de classes. Contrairement aux classes, deux éléments dans le même fichier HTML ne peuvent pas partager le même identifiant.

Comme les classes, les identifiants peuvent être utilisés pour la stylisation. Ils peuvent également servir à d'autres fins, comme on le verra quand on parlera d'hyperliens.

L'élément span

L'élément span est en quelque sorte l'équivalent en-ligne de l'élément div. Il permet de regrouper des éléments en-ligne ou de les sélectionner pour leur appliquer une stylisation particulière avec CSS, comme dans l'exemple de droite.

<p>L'élément span permet d'isoler <span id="sp1">cette section</span> de ce paragraphe pour lui appliquer une stylisation particulière</p>

Accueil