Niveau : 
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
Comprendre la structure HTML et le rendu CSS des balises HTML
Tutoriel par Raphael (Eleveur de kiwiz, Strasbourg)
Préambule. Bien souvent sont évoqués des "éléments de type bloc" et des "éléments de type en-ligne". Il faut savoir que ces désignations qui sont issues de la spécification CSS permettent de regrouper les éléments selon les deux grands modèles de mise en forme visuels CSS (block et inline) et non pas selon une catégorisation HTML de l'élément à proprement dit. Un élément de type bloc désignant alors un élément générant une boîte de bloc et un élément inline un élément générant une boîte en-ligne.
Cette catégorisation disparait dans la nouvelle spécification HTML5.
Chaque élément (balise HTML) se caractérise par une double identité :
- Une structure HTML qui n'a "intrinsèquement" aucun rapport avec l'affichage de l'élément.
- Son rendu sur les navigateurs (affichage, positionnement, comportement). Il est défini par défaut selon le bon vouloir de chaque navigateur, et peut être modifiable à l'aide des styles CSS (en utilisant la propriété CSS "display"). Suivant la valeur de cette propriété (les plus fréquentes sont "block" et "inline"), l'élément s'affiche différemment sur le navigateur.
Retenons simplement qu'un élément possède un rendu CSS qui n'a pas forcément de rapport avec sa structure HTML.
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" 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.
Voir la liste des éléments de rendu En-ligne. Exemples : SPAN, EM, STRONG, IMG, BR, INPUT, etc.Voir la liste des éléments de rendu Bloc. Exemples : DIV, P, H1...H6, UL, OL, TABLE, PRE, etc.
Structure HTML : fonction et emboîtements
La norme HTML4 définit chaque élément par:
- Un groupe d'appartenance HTML dans lequel a été classé cet élément (%block, %inline, %flow, %heading,...),
- Une spécification qui indique la fonction de l'élément, pour quel type de contenu l'employer,
- Une définition dans la DTD qui liste très précisément les éléments que peut contenir l'élément défini,
- Une liste d'éléments qui peuvent contenir l'élément défini,
- Une liste d'attributs valides pour l'élément défini.
A noter que les groupes d'appartenance ont été entièrement revus sur la version HTML5 et que les groupes %inline et %block n'en font plus partie.
Note : la confusion entre la structure HTML et le rendu CSS vient du fait que les termes se rejoignent ("%block" pour l'un, "display: block" pour l'autre)
- En règle générale, un élément de groupe %block peut contenir une (ou plusieurs) balise %block et/ou %inline, sauf exceptions.
- Une balise du groupe %inline ne peut contenir QUE une (ou plusieurs autres) balise %inline.
Exemples d'imbrications :
<div><p>Paragraphe 1</p><p>Paragraphe 2</p></div>La balise <div> (structure %block) englobe les deux paragraphes (structure %block). Ceci est autorisé.
Par contre, nous n'aurions pas pu écrire :
<span><p>Paragraphe 1</p><p>Paragraphe 2</p></span>car la balise <span> (balise dont la structure est %inline) n'est pas autorisée à contenir des éléments de structure %block comme les paragraphes.
Rendu CSS : l'aspect par défaut des éléments
Du rendu CSS ("display" : block, inline, list-item, inline-block, table, table-cell,...) d'un élément découlent ses spécificités d'affichage, son positionnement dans le Flux :
- les éléments de rendu CSS "block" se placent toujours l'un en dessous de l'autre par défaut (comme un
retour chariot). Par exemple: une suite de paragraphes (balise <p>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur et peut être dimensionné à l'aide des propriétés telles que
width,height,min-width, oumin-height,... - les éléments de rendu "inline" se placent toujours l'un à côté de l'autre afin de rester dans le texte (par exemple la balise <strong>).
Par défaut, il n'est pas prévu qu'ils puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : leur taille va être déterminée par le texte ou l'élément qu'ils contiennent.
Certaines propriétés de marges peuvent être appliquées aux éléments, comme les marges latérales. - les éléments de rendu "inline-block" conservent les mêmes caractéristiques que les "inline", mais peuvent être dimensionnés, par exemple la balise <input>.
- les éléments de rendu "list-item" ont un rendu de type "block" mais peuvent bénéficier des propriétés CSS liées aux puces (list-style, ...), par exemple la balise <li>.
- les éléments de rendu "table", "table-row", "table-cell" ont un rendu que l'ont retrouve par défaut sur les éléments HTML de tableaux et cellules, permettent de centrer les contenus verticalement et d'avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.
- etc.
Par exemple :
<p>Paragraphe 1</p><p>Paragraphe 2</p>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.
Autre exemple :
<strong>Toto</strong> et <em>moi</em>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".
Pour information, voici ci-dessous la feuille de style par défaut proposée par la norme CSS2.1 par le W3C. Les navigateurs sont invités à l'appliquer :
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
input, select { display: inline-block }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 (%block, %inline) inhérente de la balise.
Par défaut, la plupart des éléments de groupe HTML %block (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.
Résumé, pense-bête.
Il est important de retenir qu'un élément se caractérise par :
- Une appartenance à un groupe HTML (%block, %inline, %flow, %heading, %phrase, %list, %preformatted, ...) au sein de sa DTD. Il s'agit de son type, sa structure, qui au fond n'a que peu d'importance à part pour les imbrications autorisées;
- Un comportement, ou une apparence, définie par défaut selon le bon vouloir de chaque navigateur, ou modifiable via les styles CSS (propriété Display). Il s'agit de son rendu sur les navigateurs.
Ces deux notions ne sont pas forcément dépendantes : même si un élément de type %block (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 "inline" ou "liste" à l'aide des CSS. Plus clairement, 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.
A présent que la structure des balises n'a plus aucun secret pour vous, vous pouvez passer sans encombre le chapitre suivant, celui du Positionnement.
Article soumis à licence Creative Commons "by" : Vous devez citer le nom de l'auteur original et mentionner la source (url) de l'article.
