web
web > Xhtml / Css - Balises bloc et en-ligne
La compréhension de la structure des éléments va avoir de nombreuses implications par la suite, et paradoxalement c’est souvent un sujet peu connu des webmasters.
Les balises HTML ont une structure particulière. En fait, il existe deux grands groupes principaux de balises : les balises de type "bloc" et les balises de type "en-ligne" (ou "inline"). Ceci est particulièrement important car de la structure des balises vont dépendre tous leurs comportements, positionnements, affichages, imbrications, etc.
On peut comprendre assez facilement la différence fondamentale entre ces deux structures d’éléments : les éléments "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.).
En-ligne. Exemples : SPAN, EM, STRONG, IMG, BR, INPUT, etc. -> http://htmlhelp.com/reference/html40/inline.html
Bloc. Exemples : DIV, P, H1...H6, UL, OL, TABLE, PRE, etc. -> http://htmlhelp.com/reference/html40/block.html
Conséquence sur le positionnement
De ces deux groupes découlent des spécificités d’affichage :
les "blocs" 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>).
les "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 une balise de type "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 balises qui le définissent sont de type "en-ligne".
Imbrications et dimensions
Au niveau structurel et imbrications, il y a également des différences notables :
Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou en-ligne, sauf exceptions, et avoir une dimension (largeur, hauteur définies).
Une balise en-ligne ne peut contenir QUE une (ou plusieurs autres) balise en ligne.
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".
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 en-ligne ("non-remplacés") n’ont pas de dimension à proprement parler (ils n’occupent que la place minimum nécessaire à leur contenu). C’est le cas des éléments <strong>, <em>, <span>, etc.
Par exemple :
<div><p>Paragraphe 1</p><p>Paragraphe 2</p></div>
La balise <div> (bloc) englobe les deux paragraphes (blocs). 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 en-ligne) n’est pas autorisée à contenir des éléments blocs comme les paragraphes.
Une mise en page se fera donc à l’aide de balises blocs, la balise <div> étant la plus indiquée pour cet usage car elle est une balise générique servant de conteneur, de zone neutre (elle signifie Diviseur).
Les balises en-ligne
Les balises, ou éléments, "en-ligne" sont également appelées "balises internes" car leur but est de donner du sens à des parties de texte ou de bloc, tout en restant dans le texte. C’est le cas par exemple des éléments de renforcement (gras pour les navigateurs graphiques), et les éléments d’emphase (italique).
Les balises en-ligne sont faites pour rester au sein du texte pour l’enrichir et lui apporter du sens. 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.
Par défaut, les balises en-ligne ont des marges internes et externes inexistantes (valeur nulle), contrairement aux balises bloc.
Les balises bloc
Les balises de "bloc" ont une structure qui 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 bloc. Par exemple, comme nous l’avons expliqué, une balise en-ligne comme <em> ne pourra pas posséder de dimensions propres, celles-ci dépendront du contenu (texte) de la balise.
Notez que vous pouvez aisément passer d’une structure bloc à une structure en-ligne (et vice-versa) grâce à la propriété CSS "display".
Par défaut, la plupart des éléments bloc (en fait, tous sauf la balise neutre <div>) possèdent des marges internes et externes non nulles. Ce détail est important car ces marges sont souvent différentes selon les navigateurs et il faut parfois les annuler pour éviter de grosses différences de rendu visuel. La prise en compte de ces marges par défaut peut vous permettre d’éviter de gros soucis de compatibilité entre les navigateurs. ( Voir tuto : CSS )
PDF
72350
