Structure HTML et rendu CSS des balises HTML : Une différence importante !

Introduction

Nous savons tous qu’il est difficile de rendre compatible l’affichage des sites web sur les différents navigateurs existant, mais d’où provient cette difficulté ? est-ce la faute des développeurs ? est-ce la faute des navigateurs ?

La réponse est bien-entendu la faute des navigateurs, ou plus précisément de leur moteur de rendu HTML. Les normes dictées par le World Wide Web Consortium (ou W3C) ne sont pas respectées (ou interprétées de la même façon) par les différents moteurs de rendu HTML actuels.

Ce qui veut donc dire que d’un navigateur à l’autre nous obtenons un affichage un peu voire totalement différent (positionnement des éléments, dimensions, tailles, etc.), voici les moteurs de rendu HTML utilisés par les navigateurs web les plus utilisés (dans l’ordre de leur utilisation) :

1. Internet Explorer : Trident
2. Mozilla Firefox : Gecko
3. Google Chrome : WebKit
4. Safari : WebKit
5. Opera : Presto

Ce petit comparatif est flagrant, parmi les 5 navigateurs web les plus utilisés, 4 moteurs de rendu HTML différents sont utilisés, bien joué les gars !

Toute la difficulté réside après tout à obtenir un affichage et un placement quasi identique des éléments que composent une page web, c’est à dire des balises HTML. Pour cela il faut bien saisir la différence entre structure HTML et rendu CSS qui caractérisent la double identité de chaque balise HTML.

Structure HTML

La structure HTML n’a aucun rapport avec l’affichage de l’élément, elle permet juste de donner des fonctions possibles aux balises ainsi que les emboîtements permis.
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, etc.)
• La fonction de l’élément et pour quel type de contenu l’employer
• Une liste d’éléments que peut contenir l’élément
• Une liste d’éléments qui peuvent contenir l’élément
• Une liste d’attributs valides

La norme HTML5 a revu intégralement les groupes d’appartenance HTML des balises, ainsi les groupes %inline et %block n’en font plus partie.

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.

• Exemple autorisé, deux balises de type %inline imbriquées :

[xml]
<span>Le petit chaperon <strong>rouge</strong></span>
[/xml]

• Exemple non-autorisé, une balise de type %inline ne pouvant imbriquer une balise de type %block :

<span>Les trois petits <div>cochons</div></span>

Rendu CSS

Les balises HTML ont toutes par défaut une valeur de rendu CSS particulière, c’est à dire un aspect particulier (spécificité d’affichage, positionnement dans la page, etc.). Cette valeur par défaut est différente d’un navigateur à l’autre dû au moteur de rendu HTML utilisé.Les balises HTML se distinguent cependant en plusieurs groupes de rendu CSS, dont deux grands cités ci-après en premier :

1. Les balises de rendu CSS bloc : Voir la liste complète des éléments
2. Les balises de rendu CSS en-ligne (ou ‘inline’) : Voir la liste complète des éléments
3. Les balises de rendu list-item
4. Les balises de rendu inline-block
5. Les balises de rendu table, table-cell, etc.

Ces valeurs sont à utiliser avec le mot clé « display » qui permet de changer le rendu CSS d’un élément HTML. Voici quelques différences entre ces différents groupes pour y comprendre un peu plus :

• Les éléments de rendu CSS « block » se placent toujours l’un en dessous de l’autre par défaut (comme un retour chariot, exemple la balise <div>). Il occupe automatiquement toute la largeur disponible de son conteneur et peut être dimensionné à l’aide des propriétés telles que width, height, min-width, ou min-height, etc.
• Les éléments de rendu « inline » se placent toujours l’un à côté de l’autre afin de rester dans le texte (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’on retrouve par défaut sur les éléments HTML de tableaux et cellules, ils permettent de centrer les contenus verticalement et d’avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.

Conclusion

Ce qu’il faut retenir est qu’un élément possède un rendu CSS qui n’a pas forcément de rapport avec sa structure HTML. Ces deux notions ne sont d’ailleurs pas forcément dépendantes : il est possible de 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.

Cet article a été écrit par :

Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• Bien découper et structurer le code de nos pages Web
• 8 raisons d’adapter votre site à l’internet mobile
• Menu fixe mais flottant selon la scrollbar (JS + CSS)
• jCookies : Gestion simple des cookies avec jQuery
• LESS : Changez la façon d’écrire vos CSS