Structure et Flux

Comprendre le rendu CSS des éléments Bloc et En-ligne

Bien souvent sont évoqués des éléments de type Bloc et des éléments de type En-ligne. Il est plus correct de parler d'éléments de rendu Bloc et d'éléments de rendu En-ligne.

Chaque élément (balise HTML) se caractérise par une double identité :

Les balises HTML ont toutes par défaut une valeur de rendu CSS particulière. En fait, il existe deux grands groupes principaux de balises : les balises de rendu CSS Bloc (ou block)et les balises de rendu CSS En-ligne (ou inline). Ces valeurs de rendu visuel coïncident généralement par défaut avec le groupe d'appartenance HTML.

Il est particulièrement important de comprendre que :

La différence fondamentale entre ces deux structures d'éléments est aisément compréhensible :

Les éléments Bloc

Les balises du groupe HTML Bloc possèdent par défaut un rendu CSS de type display: block. Ce rendu leur permet de bénéficier de dimensions (hauteur, largeur, profondeur), de contenir d'autres éléments dimensionnés, de posséder des marges internes (padding) et externes (margin) mais également, et surtout, d'être positionnés, c'est à dire de contribuer à la mise en page du document. La plupart de ces propriétés sont réservées aux éléments de rendu Bloc.

En règle générale, un élément de groupe Bloc peut contenir du texte normal et une (ou plusieurs) balise Bloc et/ou En-ligne, sauf exceptions. Consultez la page d' Alsacréations consacrée à ce sujet.

Les éléments Bloc sont aussi larges que possible

Les éléments Bloc sont similaires au formatage des paragraphes dans Word :

Exemples d'éléments de rendu Bloc : div, p, h1...h6, ul, ol, tabl, pre, etc...
Consultez la liste des liste des éléments de type block .

Les éléments En-ligne

Les balises de structure HTML En-ligne sont également appelées balises internes car leur but est de donner plus de sens à certains éléments contenus dans du texte ou dans des blocs, tout en restant dans ce texte.

C'est le cas par exemple des éléments de renforcement <strong> (gras pour les navigateurs graphiques) et les éléments d'emphase <em> (ou italique).

Les balises En-ligne sont faites pour rester au sein du texte pour l'enrichir et lui apporter du sens.

Par défaut, les balises du groupe HTML En-ligne possèdent un rendu CSS de type display: inline. Il n'est pas prévu qu'elles puissent se positionner sur la page (même si cela est possible), ni recevoir des dimensions (hauteur, largeur, profondeur),  leur taille va être déterminée par le texte ou l'élément qu'elles contiennent, ces éléments ne possèderont pas non plus de marges : ni internes, ni externes (valeur nulle), contrairement aux balises de rendu Bloc.

Les éléments En ligne sont subordonnés aux éléments Bloc. Une balise du groupe En-ligne ne crée pas de nouvelle ligne et ne peut contenir QUE du texte normal et une ou plusieurs autres balise En-ligne, mais pas d'élément Bloc.

Les éléments En-ligne se distinguent eux-même en deux parties : les éléments remplacés et les éléments non-remplacés :

La largeur des éléments En-ligne se limite à leur contenu

Les éléments En ligne sont similaires au formatage des caractères dans Word :

Exemples d'éléments de rendu En-ligne : span, em, strong, img, br, input, etc... Consultez la liste des liste des éléments de type inline .

Le positionnement par défaut des éléments

Du rendu CSS (display: block et display: inline) d'un élément découlent ses spécificités d'affichage :

Par exemple :

Ces deux paragraphes vont s'afficher sur deux lignes, car la balise <p> est par défaut un élément de rendu Bloc : chaque paragraphe va occuper une ligne.

Paragraphe 1

Paragraphe 2

Autre exemple :

Ce texte va s'afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS En-ligne.

Toto et moi

Possibilités de modification du rendu par défaut

Pour rappel, notez que vous pouvez aisément passer d'un rendu Bloc à un rendu En-ligne (et vice-versa) grâce à la propriété CSS display, mais vous ne modifierez pas la structure HTML (Bloc,En-ligne) inhérente de la balise.

Par défaut, la plupart des éléments de groupe HTML Bloc (en fait, tous sauf la balise neutre <div>)possèdent un rendu CSS qui s'exprime par des marges internes et externes non nulles. Ce détail est important car ces marges, interprétées différemment suivant les navigateurs, nécessitent parfois d'être annulées afin d'éviter de gros soucis de compatibilité qui peuvent être source de divergences de rendu.

Même si un élément de type Bloc (comme par exemple la balise <p>) adopte par défaut un rendu CSS de type display :block, il peut très bien adopter un rendu de type En-ligne ou Liste à l'aide des CSS. Plusclairement, on peut modifier (via la propriété CSS "display") l'affichage par défaut d'un élément, mais on ne modifie en rien la structure HTML de cet élément, qui elle, est immuable.

La notion de flux

Les différents éléments d'une page, emboités ou juxtaposés selon qu'ils sont respectivement parents, enfants ou frères, prennent par défaut place dans le flux courant du document, aussi appelé flux normal.

Ce flux correspond à l'ordre dans lequel les boites apparaissent dans le texte du code HTML, ordre qui est aussi celui de leurs balises. C'est le cas pour tous les documents HTML qu'ils soient écrits manuellement ou générés automatiquement.

L'ordre du flux courant intervient dans l'affichage par défaut, sans style, sans mise en page ni positionnement particulier, mais certaines propriétés CSS permettent de sortir des éléments du flux courant pour les positionner de façon personnalisée.

Pour comprendre la notion de Flux , consultez l'animation "LE FLIM DU FLUX"

Comment sortir du flux? : le positionnement

Dans le flux courant, deux paragraphes (balises de type bloc) s'afficheront par défaut l'un sous l'autre. Adopter un positionnement fixe (position:fixed) absolu (position:absolute) ou flottant (float:left ou float:right) permettra d'extraire l'un d'eux du flux par exemple le second, pour l'afficher ailleurs par exemple à côté du premier.

On s'aperçoit ainsi que les propriétés par défaut du html qui paraissent assez contraignantes, peuvent toujours être modifiées avec les CSS que ce soit la propriété display ou par les propriétés de positionnement.

Ainsi dans les pages de ce site on réalise avec un corps de page qui défile et un bandeau en tête fixe grâce à la propriété position:fixed, un effet similaire à celui obtenu avec des cadres .

La maîtrise du positionnement des éléments qui est essentielle pour la composition des pages HTML, ne peut s'apprendre que par la pratique elle sera donc traitée de façon détaillée dans la partie Exercices plutôt que dans un exposé théorique.

Haut de Page