Les niveaux ou « types » d’éléments HTML block et inline

Nous avons pour le moment défini et étudié les grands mécanismes de fonctionnement du CSS tout en présentant certaines propriétés CSS impactant l’aspect visuel des éléments.

Pour aller plus loin dans notre étude du CSS, nous allons devoir maintenant comprendre comment est définie la place prise par chaque élément dans une page.

 

Les niveaux ou « types » d’éléments HTML

De manière schématique, on peut considérer qu’Il existe deux grands types d’affichage principaux pour les éléments HTML : un élément HTML va pouvoir être soit de niveau (ou de type) block, soit de niveau (ou de type) inline.

Ces types d’affichage vont définir la façon dont les éléments vont se comporter dans une page par rapport aux autres et la place qu’ils vont prendre dans la page.

Connaître le type d’affichage d’un élément HTML va donc être essentiel pour créer et mettre en forme nos pages web car les éléments de type block et ceux de type inline vont se comporter de façon radicalement différente dans une page et certaines propriétés CSS vont avoir des comportements différents selon le type d’affichage d’un élément.

 

Comprendre comment est défini le type d’affichage d’un élément HTML

Le type d’affichage d’un élément va toujours être défini en CSS par la propriété display. Si cette propriété n’est pas explicitement renseignée pour un élément, c’est la valeur par défaut de display qui va être appliquée à l’élément c’est-à-dire display: inline.

Ainsi, par défaut, on peut dire que tout élément HTML va posséder un type d’affichage inline (nous allons voir par la suite ce que signifie ce type d’affichage).

Cependant, rappelez-vous que chaque navigateur possède une feuille de styles (c’est-à-dire un fichier CSS) qui sera appliquée par défaut pour les différents éléments dont nous ne précisons pas le comportement dans nos propres feuilles de style.

La plupart des navigateurs possèdent aujourd’hui des feuilles de style similaires notamment pour la définition des styles basiques et c’est une très bonne chose pour nous développeur puisque cela va nous éviter d’avoir à définir le comportement de chaque propriété pour chaque élément de notre page.

Parmi ces styles par défaut appliqués par n’importe quel navigateur se trouve la définition du type d’affichage ou du display pour chaque élément.

Aujourd’hui, la plupart des navigateurs suivent les recommandations du W3C (l’organisme en charge de l’évolution et des standards des langages Web). Ce W3C spécifie pour chaque élément HTML quelle devrait être la valeur de son display.

Attention cependant : encore une fois, ce ne sont que des recommandations et chaque navigateur est libre de ne pas en tenir compte et de définir une autre valeur de display pour chaque élément !

C’est la raison pour laquelle il reste important de définir nous-mêmes la plupart des styles CSS impactant et qui pourraient être définis différemment par défaut par différents navigateurs.

Le W3C va donc indiquer quel devrait être le type d’affichage d’un élément par défaut et l’immense majorité des navigateurs va appliquer ces recommandations ce qui fait que l’un des display suivants à la plupart des éléments HTML en fonction de l’élément :

• display : block : affichage sous forme d’un bloc ;
• display : inline : affichage en ligne ;
• display : none : l’élément n’est pas affiché.

Notez que le W3C préconise d’autres types d’affichage pour certains éléments HTML particuliers. Les deux autres valeurs de display généralement respectées et appliquées par les navigateurs sont :

• display : list-item va être appliquée par défaut pour les éléments de liste li. L’affichage se fait sous forme de bloc mais une boite avec un marqueur est également générée ;
• display : table va être appliquée par défaut pour les éléments de tableau table. L’affichage se fait sous forme de bloc.

Certains navigateurs dans certains cas très particuliers peuvent également utiliser la valeur inline-block pour afficher certains éléments.

Ici, vous devez bien comprendre que ces valeurs ne sont que les valeurs préconisées par le W3C. Rien ne nous empêche de définir un type d’affichage différent de celui préconisé pour un élément en utilisant la propriété display avec la valeur souhaitée. Cela va pouvoir être utile pour aider à la mise en page de certains éléments.

Bon à savoir : Jusqu’à récemment (jusqu’au HTML 4.1), le W3C utilisait la simple distinction « bloc-level elements » vs « inline-level elements » (éléments de type block vs éléments de type inline) pour catégoriser les éléments HTML. Cependant, l’évolution des langages HTML et CSS et de leur complexité a amené le W3C à repenser la façon dont les éléments devaient être catégorisés. Aujourd’hui, donc, les éléments sont classés selon des catégories ou des modèles de contenus (« content categories » ou « content models »). Nous reparlerons de ces concepts avancés plus tard.

 

Rapide introduction au modèle des boites

Le modèle des boites (que nous étudierons plus tard dans ce cours) nous dit que tout élément HTML peut être représenté sous forme d’une boite rectangulaire. C’est une représentation qu’il vous faut connaitre et qu’il vous faudra comprendre.

Cette boite rectangulaire représentant l’élément contient d’autres boites (une qui contient le contenu, une autre qui contient en plus les marges intérieures, etc.) et ces différentes boites vont se comporter de manière différente selon le type d’affichage qui va lui être attribué, c’est-à-dire selon la valeur donnée à la propriété display pour cet élément.

Cependant, retenez bien ici que quelle que soit la valeur donnée à la propriété display, l’élément va toujours pouvoir être représenté sous forme d’une boite. Cela peut vous sembler flou pour le moment, mais intégrer cela va beaucoup vous aider pour bien comprendre comment créer des mises en page efficaces en CSS.

 

Les éléments de type inline

Par simplicité, on appellera « élément de type inline » (ou « inline level element » en anglais) un élément auquel a été appliqué un display: inline.

Les éléments de type inline vont posséder les caractéristiques suivantes qui vont les différencier des éléments de type block :

• Un élément de type inline ne va occuper que la largeur nécessaire à l’affichage de son contenu par défaut ;
• Les éléments de type inline vont venir essayer de se placer en ligne, c’est-à-dire à côté (sur la même ligne) que l’élément qui les précède dans le code HTML ;
• Un élément de type inline peut contenir d’autres éléments de type inline mais ne devrait pas contenir d’éléments de type block.

De plus, notez qu’on ne va pas par défaut pouvoir appliquer de propriété width ou height à un élément de type inline puisque la caractéristique principale de ce type d’éléments est de n’occuper que la place nécessaire à l’affichage de leur contenu.

Les éléments HTML dont le type d’affichage recommandé par le W3C est le type inline les plus courants sont les suivants :

• Les éléments de distinction d’importance du contenu em et strong ;
• L’élément span ;
• L’élément de liens a ;
• L’élément button ;
• Les éléments de formulaire input, label, textarea et de liste de choix select ;
• L’élément d’insertion d’images img (cas intéressant et souvent source de confusions car on va pouvoir passer une largeur et une hauteur à l’image à afficher en soi qui va « remplacer » l’élément img lors de l’affichage, mais il n’empêche que l’élément img est bien inline en soi);
• Les éléments code, script, etc.

See the Pen Cours HTML CSS 3.8.1 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple ci-dessus, j’ai rajouté une couleur de fond aux éléments inline afin que vous puissiez bien voir l’espace qu’ils prennent dans la page.

 

Les éléments de type block

Par simplicité, on appellera « élément de type block » (ou « block level element » en anglais) un élément auquel on va appliquer un display: block.

Les éléments de type block vont posséder les caractéristiques de disposition suivantes :

• Un élément de type block va toujours prendre toute la largeur disponible au sein de son élément parent (ou élément conteneur) ;
• Un élément de type block va toujours « aller à la ligne » (créer un saut de ligne avant et après l’élément), c’est-à-dire occuper une nouvelle ligne dans une page et ne jamais se positionner à côté d’un autre élément par défaut ;
• Un élément de type block peut contenir d’autres éléments de type block ou de type inline.

Les éléments HTML dont le type d’affichage recommandé par le W3C est le type block les plus communs sont les suivants :

• L’élément body, cas particulier mais qui est concrètement considéré comme un élément block ;
• L’élément de division du contenu div ;
• Les paragraphes p et titres h1, h2, h3, h4, h5, h6 ;
• Les éléments structurants article, aside, header, footer, nav et section ;
• Les listes ul, ol, dl et éléments de listes de définition dt et dd ;
• L’élément de définition de tableaux table ;
• L’élément de définition de formulaires form et l’élément fieldset ;
• Les élément figure et figcaption ;
• Les éléments canvas, video, etc.

See the Pen Cours HTML CSS 3.8.2 by Pierre (@pierregiraud) on CodePen.

Bon à savoir : Les éléments HTML comme video et img décrits ci-dessus comme étant respectivement de types block et inline sont des éléments HTML très particuliers : ils sont dans la catégorie des éléments « void » (j’utilise ici le mot anglais car utiliser « vide » porterait à confusion) et ce sont également ce qu’on appelle des éléments HTML remplacés. Un élément void est un élément qui ne peut pas posséder de contenu qui lui soit propre et un élément remplacé est un élément qui fait appel à du contenu extérieur (qui va être « remplacé » par un contenu extérieur) possédant déjà des dimensions propres. Notez que la plupart des éléments remplacés sont également des éléments void.

 

Les autres valeurs de la propriété display

Nous allons passer de nombreuses autres valeurs à la propriété display en plus des valeurs inline, block et none comme par exemple inline-block, table, list-item, flex, etc.

Nous aurons l’occasion de reparler des différentes valeurs de la propriété display dans la leçon qui lui est dédiée plus tard dans ce cours.

Pour le moment, retenez simplement ici que toutes ces « sous » valeurs d’affichage vont toujours reposer sur un affichage pour l’élément en soi block ou inline auquel vont pouvoir s’ajouter différentes règles, contraintes ou variations.

Je vous demande donc pour l’instant de considérer que tous les éléments sont soit de type block, soit de type inline et de bien retenir les différences entre ces deux types d’affichage.