Alsacréations

1. Page d'accueil
2. Bases et indispensables

Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne

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.

Il est particulièrement important de comprendre que :

• de leur structure HTML vont dépendre les imbrications et emboîtements autorisés;
• et de leur rendu CSS vont dépendre leurs comportements, positionnements, affichages, etc.

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

• les éléments de rendu "bloc" servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc. ;
• les éléments "en-ligne sont prévus pour rester dans le texte pour l'enrichir (lien hypertexte, emphase, renforcement, etc.).

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.

Imbrications et emboîtements

Du groupe d'appartenance HTML, autrement dit de la structure HTML de l'élément, vont dépendre les imbrications et emboîtements autorisés.

Il existe plusieurs groupe d'appartenance HTML (%block, %inline, %flow ...). Ces groupes d'appartenance n'ont rien à voir avec le rendu CSS, ils n'ont d'incidence que sur les imbrications autorisées.

• 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.

Les éléments %inline se distinguent eux-même en deux parties : les éléments "remplacés" et les éléments "non-remplacés".

Les éléments "remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments <img>, <input>, <textarea>, <select> et <object>.

Tous les autres éléments %inline ("non-remplacés") n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <strong>, <em>, <span>, etc. Mais tout ceci est laissé au bon vouloir des navigateurs.

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.

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 :

• les éléments de rendu "bloc" 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>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
• les éléments de rendu "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>.

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".

Les balises en-ligne

Les balises de structure HTML %inline 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 (gras pour les navigateurs graphiques) et les éléments d'emphase (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, il n'est pas prévu qu'elles puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : exception faite des balises en-ligne "remplacées" (cf. explications plus haut), leur taille va être déterminée par le texte ou l'élément qu'elles contiennent.
Certaines propriétés de marges peuvent être appliquées aux éléments "non-remplacés", comme les marges latérales.

Par défaut, les balises du groupe HTML %inline possèdent un rendu CSS de type "display: inline". Par voie de conséquence, ces éléments ne posséderont pas de marges : ni internes, ni externes (valeur nulle), contrairement aux balises de rendu bloc.

Les balises bloc

Les balises du groupe HTML %block 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". Par exemple, comme nous l'avons expliqué, une balise de rendu "en-ligne" comme <em> ne pourra pas posséder de dimensions propres, celles-ci dépendront du contenu (texte) 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.

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.

Un problème, une question ?

Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon "Service Après Vente" du Forum Alsacréations.

---