Les balises de type block et inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de deux catégories :

Les balises inline : c'est le cas par exemple des liens <a></a>.
Les balises block : c'est le cas par exemple des paragraphes <p></p>.

Il existe en fait plusieurs autres catégories très spécifiques, par exemple pour les cellules de tableau (type table-cell) ou les puces (type list-item). Nous n'allons pas nous y intéresser pour le moment car ces balises sont minoritaires.

Mais comment je reconnais une balise inline d'une balise block ?

C'est en fait assez facile :

block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise « en ligne »).

Pour bien visualiser le concept, voici en figure suivante un petit schéma que je vous ai concocté.

Différence entre une balise inline et une balise block

Sur fond bleu, vous avez tout ce qui est de type block.
Sur fond jaune, vous avez tout ce qui est de type inline.

Comme vous pouvez le voir, les blocs sont les uns en-dessous des autres. On peut aussi les imbriquer les uns à l'intérieur des autres (souvenez-vous, nos blocs <section> contiennent par exemple des blocs <aside> !).
La balise inline <a></a>, elle, se trouve à l'intérieur d'une balise block et le texte vient s'insérer sur la même ligne.

Quelques exemples

Afin de mieux vous aider à assimiler quelles balises sont inline et quelles balises sont block, voici un petit tableau dressant la liste de quelques balises courantes.

Balises block	Balises inline
<p>	<em>
<footer>	<strong>
<h1>	<mark>
<h2>	<a>
<article>	<img />
…	…

Ce tableau n'est pas complet, loin de là. Si vous voulez avoir la liste complète des balises qui existent et savoir si elles sont de type inline ou block, reportez-vous à l'annexe donnant la liste des balises HTML.

Les balises universelles

Vous les connaissez déjà car je vous les ai présentées il y a quelques chapitres. Ce sont des balises qui n'ont aucun sens particulier (contrairement à <p> qui veut dire « paragraphe », <strong> « important », etc.).
Le principal intérêt de ces balises est que l'on peut leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne convient.

Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux est que l'une d'elle est inline et l'autre est block :

<span></span> (inline) ;
<div></div> (block).

Respectez la sémantique !

Les balises universelles sont « pratiques » dans certains cas, certes, mais attention à ne pas en abuser. Je tiens à vous avertir de suite : beaucoup de webmasters mettent des <div> et des <span> trop souvent et oublient que d'autres balises plus adaptées existent.

Voici deux exemples :

Exemple d'un span inutile : <span class="important">. Je ne devrais jamais voir ceci dans un de vos codes alors qu'il existe la balise <strong> qui sert à indiquer l'importance !
Exemple d'un div inutile : <div class="titre">. Ceci est complètement absurde puisqu'il existe des balises faites spécialement pour les titres (<h1>, <h2>…).

Oui, vous allez me dire qu'au final le résultat (visuel) est le même. Je suis tout à fait d'accord. Mais les balises génériques n'apportent aucun sens à la page et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible. Google lui-même le conseille pour vous aider à améliorer la position de vos pages au sein de ses résultats de recherche !

Créé avec HelpNDoc Personal Edition: Générateur de documentation et EPub facile