Catégories d'éléments : en ligne et bloc

La catégorisation des éléments en HTML5 est assez complexe et nous ne l'aborderons pas ici. Nous nous contenterons de mentionner les deux catégories utilisées traditionnellement pour classer les éléments, à savoir les éléments de type « en ligne » et les éléments de niveau « bloc ».

Les éléments de type en ligne

On peut comparer une page Web à une page dans un logiciel de traitement de texte : si vous tapez du texte, tant que vous ne faites pas de retour de ligne, votre texte sera disposé sur la page en prenant toute la place disponible en largeur, passant à la ligne suivante seulement lorsque c'est nécessaire. Si vous finissez une phrase et en commencez une autre, cette autre phrase prendra place à côté de la première sans que le flux du texte soit interrompu.

Les éléments en ligne (en anglais : inline) se comportent de la même manière que ce texte : ils occupent toute la largeur de l'élément qui les contient et si plusieurs de ses éléments se suivent, dans la mesure du possible, ils seront disposés sur la page Web l'un à côté de l'autre.

Les éléments de type en ligne qu'on a rencontré jusqu'à présent sont nombreux : ce sont ceux délimités par les balises <i></i>, <b></b>, <u></u>, <em></em>, <strong></strong>, <small></small>, <sub></sub>, <sup></sup>, <mark></mark>, <var></var> et <cite></cite>.

Les éléments de niveau bloc

Les éléments de niveau bloc (block en anglais), au contraire, interrompent le flux de l'information sur la page Web. Un exemple de ce genre d'élément est fourni par les titres <h1></h1><h6></h6>. Chaque fois qu'on utilise un titre dans une page Web, celui-ci insère un retour de ligne à la fin de son contenu. C'est le cas de tous les éléments de niveau bloc.

Les titres partagent aussi un autre comportement par défaut de tous les éléments de niveau bloc¹ : deux titres qui se suivent sur la page Web apparaitront superposés verticalement et non pas juxtaposés sur une même ligne, même s'ils sont assez courts tous les deux pour pouvoir le faire.

Un autre exemple d'élément de niveau bloc est fourni par les balises <blockquote></blockquote> qui permettent d'insérer une longue citation d'un texte (essayez-les !). L'élément de niveau bloc le plus souvent utilisé est probablement le paragraphe : <p> … </p>.

Imbrication

Les éléments de niveau bloc peuvent contenir aussi bien des éléments de type en ligne que des éléments de niveau bloc.

Un élément de type en ligne peut aussi contenir d'autres éléments de type en ligne ; par contre, il ne peut pas contenir d'éléments de niveau bloc. Ainsi, le code :

<p><i>Voici du texte en italique.</i></p>

est légal alors que le code :

<i><p>Voici du texte en italique.</p></i>

ne l'est pas.

______________________________________________________________________________

¹ Il est possible de modifier ce comportement de diverses manières en utilisant CSS.

Accueil