Au revoir Block & Inline - Bienvenue HTML5

Les innovations de la spécification HTML5 sont nombreuses et beaucoup d'entre elles sont déjà prises en charge par la majorité du paysage des navigateurs - je voudrais souligner ci-dessous un changement intéressant dans les règles d'imbrication des éléments. HTML a toujours fait la distinction entre les éléments en bloc et les éléments en ligne. Par exemple, la définition de type de document HTML4 répertorie h1, p et div comme éléments de bloc et a, span et img comme éléments en ligne.


Ce concept est désormais abandonné (pour de bonnes raisons). Dans certains cas d'utilisation, de nombreux concepteurs Web ont ignoré l'exactitude de ladite règle d'imbrication selon laquelle aucun élément de bloc ne peut être situé dans des éléments en ligne, ou le comportement standard utilisant des règles CSS telles que display: inline; ou afficher: bloc; (ce qui a souvent conduit à un code invalide) sans plus tarder.

HTML5 adoucit maintenant cette distinction et nomme même 9 catégories différentes auxquelles un élément peut appartenir, dans lesquelles un élément peut être dans plusieurs catégories. La vieille distinction entre les éléments en bloc et en ligne est jetée par-dessus bord et la multitude de significations des balises sur le Web est prise en compte. En particulier, cela a pour conséquence que les constructions suivantes représentent du code valide:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

Lier un conteneur entier contenant des éléments de bloc supplémentaires n'était auparavant possible (avec un code valide) qu'à l'aide d'astuces (par exemple par le positionnement absolu d'une couche de superposition liée). Alternativement, le titre et le paragraphe étaient liés, ce qui entraînait une redondance et le conteneur n'était pas cliquable. Grâce à l'extension bienvenue de HTML5, ce n'est plus un problème.

Retour