HTML

Le rendu par défaut des éléments HTML

Les documents web sont globalement régis par deux normes de langages : la norme (X)HTML et la norme CSS.

Le langage HTML définit la structure du document à l'aide d'éléments (les balises) porteurs de sens. Le langage CSS apporte le rendu (visuel, auditif, imprimé, ...) sur les différents supports (écran, plage braille, imprimante,...). Les deux entités sont donc complémentaires mais dissociées : la première apporte le sens (la sémantique); la seconde ajoute du rendu d'affichage.

Cependant, même lorsqu'aucun style CSS n'est défini, chaque élément hérite d'un affichage par défaut (rendu initial) qui peut être légèrement différent d'un navigateur à un autre.

Voici comment comprendre le principe et s'en servir pour corriger les différences de rendus entre les navigateurs.

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (39133 lectures)
Tags : block, navigateurs, xhtml, rendu, aperçu, défaut

Selon le W3C, les éléments (X)HTML sont regroupés dans différentes entités (%flow, %block, %inline, %headings, %lists, ...) et deux types de rendus d'affichage globaux : les éléments de niveau bloc et les éléments en-ligne.

Avec HTML5, les distinctions sont plus variées entre les modèles de contenu.

Éléments de niveau bloc et éléments en-ligne

Les notions de « niveau bloc » et « en-ligne » dans les spécifications HTML 4 et XHTML 1.x sont définies ainsi :

Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fonde sur plusieurs notions :

Le modèle de contenu
De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne.
Le formatage
Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-ligne.

lien hypertexte Source : Traduction HTML 4.01 (source officielle W3C en anglais)

Ces définitions des niveaux bloc et en-ligne posent les premiers jalons du rendu par défaut des éléments HTML : si aucun style d'affichage (CSS) n'est présent, le formattage proposé par le W3C devrait être pris en considération par les navigateurs. En clair, par défaut, tous les éléments de niveau bloc s'affichent les uns sous les autres, et les éléments en-ligne se placent sur la même ligne que le précédent.

lien hypertexte Pour aller plus loin et comprendre les notions de bloc et en-ligne, suivez le tutoriel détaillé « bloc / inline », ou dans l'article de Xavier Boully « Block et Inline, en CSS et XHTML ».

Un rendu CSS initial proposé par le W3C

Les spécifications CSS proposent, elles aussi, des recommandations d'affichage initial pour chacun des éléments HTML, sous la forme d'une feuille de style d'exemple. Les développeurs de navigateurs sont invités à se conformer à cette feuille CSS « par défaut ».

Cette feuille de style illustre la façon précise dont les différents éléments pourraient être rendus sur les navigateurs. Elle va plus loin que la simple distinction HTML « bloc » et « en-ligne », et définit les marges internes et externes, les tailles de police, les mises en exergue (graisse, italique), etc.

Ainsi, par exemple, l'élément de type bloc <p> devrait avoir le rendu suivant par défaut sur chaque navigateur, si aucun style particulier ne lui est appliqué :

p {
  display: block;
  margin: 1.12em 0;
}

En clair, l'élément <p> dispose par défaut d'une marge haute et basse de 1.12em, et d'une marge gauche et droite de 0

Prendre connaissance de cette feuille de style d'exemple permet de comprendre pourquoi les éléments <blockquote> et <ul> ont un espace à gauche par défaut, pourquoi les titres de niveau 1 (<h1>) ont une taille et des marges plus grandes que les titres de niveaux inférieurs, pourquoi les paragraphes sont séparés par des marges, etc.

lien hypertexte Découvrez tous les rendus par défaut proposés par le W3C au sein de sa feuille de style d'exemple (version officielle brute). Voir une version avec syntaxe colorée.

Un rendu spécifique à chaque navigateur

Dans un monde idéal de compatibilité, tous les navigateurs et agents-utilisateurs appliqueraient à la lettre les feuilles de styles CSS initiales recommandées par le W3C... Est-ce le cas ? Pas tout à fait. Chaque navigateur est libre de proposer un rendu par défaut différent de celui proposé par les spécifications CSS, et on observe quelques discordances qui font le malheur des webdesigners. Celles-ci ne sont pas légion, mais il est important de bien les identifier.

Par exemple, CSS propose d'appliquer par défaut un margin-left de 40px à l'élément <ul>. Or chaque navigateur en fait un peu à sa guise : Internet Explorer applique un margin-left de 40px, Mozilla Firefox, Netscape et Opéra appliquent un padding-left de 40px.

Il en va de même pour plusieurs (pas énormément heureusement) autres éléments HTML.

loupe Certains navigateurs, dont le code-source est ouvert, permettent aisément de consulter (voire modifier) leurs réglages CSS par défaut. Pour Firefox, les rendus CSS par défaut des éléments sont consultables dans les fichiers html.css, et forms.css (par défaut dans \Program Files\Mozilla\Firefox\res).

Voici un extrait de la feuille de style par défaut appliquée par Firefox sur les élements HTML :

html, div, map, dt, isindex, form {
  display: block;
}
body {
  display: block;
  margin: 8px;
}
p, dl, multicol {
  display: block;
  margin: 1em 0;
}
blockquote {
  display: block;
  margin: 1em 40px;
}
h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}
...

lien hypertexte Voir l'ensemble de la feuille de style initiale de Firefox 1.5.

Malheureusement, il n'est pas toujours aussi facile de se procurer les réglages par défaut des navigateurs. Pour Internet Explorer par exemple, il semblerait que ces informations sont distillées dans des fichiers .dll et non extractibles.

Un outil de calcul du rendu initial

Puisqu'il n'est pas simple de pouvoir accéder aux réglages par défaut de tous les navigateurs, l'idéal serait de disposer d'un outil qui fournirait ces données directement sur votre navigateur. Cet outil de comparaison entre navigateurs, vous l'avez deviné, nous l'avons conçu pour vous !

outil Tester l'outil de rendu des éléments HTML

Cet outil conçu par Julien Royer, permet d'observer les différences de rendu par défaut... et mieux comprendre certaines divergences d'affichage.

Recommandations d'usage

  • Les résultats obtenus correspondent aux valeurs calculées (computed values). Cela signifie que les valeurs « spécifiées » en unités fluides comme « em » ou « % » seront remplacées par les valeurs calculées.
  • Même si les résultats sont a priori fiables, cela reste un outil expérimental.
  • Pour voir si une valeur est en « em », vous pouvez modifier la taille de la police de votre navigateur et recharger la page afin d'observer d'éventuelles modification des chiffres.
  • L'outil a été testé avec succès sur les navigateurs suivants : Internet Explorer, Mozilla Firefox, Opera, Netscape, Safari et Camino.
  • JavaScript doit être activé pour que le script fonctionne.

Voici des captures d'écran des résultats obtenus sur divers navigateurs :

Reset CSS

Convaincus à tort que les différences entre les styles par défaut des navigateurs sont « ingérables », de nombreux concepteurs web recommandent l'application du Reset CSS, dont la forme la plus basique est la suivante :

* {margin: 0; padding: 0;}

En utilisant le sélecteur universel *, on remet à zéro toutes les marges et tous les retraits internes (padding) des éléments HTML.

Cette technique est problématique, car elle impose de repréciser, dans la feuille de style, des marges et padding pour tous les éléments qui le nécessitent, sous peine d'obtenir un document peu lisible. Une opération qui non seulement prend du temps, mais en plus n'est pas fiable : on risque d'oublier de redonner des marges à certains éléments, et de se retrouver avec un rendu problématique sur telle ou telle page du site. Elle pose également problème pour la mise en forme des formulaires HTML.

Mais surtout, cette technique est largement inutile ! Car, le plus souvent, les différences de rendu et le caractère « imprévisible » des marges par défaut ne sont pas liés aux styles par défaut, mais plutôt :

lien hypertexte Attention donc aux solutions de facilité. Pour aller plus loin : La technique du Reset CSS et Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design.

Intégrer ces rendus initiaux dans vos développements web

Cet article aura mis en évidence plusieurs données déterminantes pour afficher vos pages web de façon similaire sur l'ensemble des navigateurs :

  1. Les normes (X)HTML ont défini deux niveaux d'éléments : les éléments de niveau bloc et les éléments en-ligne. En terme de rendu, les premiers sont censés s'afficher les uns sous les autres, les seconds les uns à côté des autres sur la même ligne,
  2. Les normes CSS proposent un rendu d'affichage initial pour chaque élément HTML, sous la forme d'une suggestion de feuille de style CSS par défaut. Les différents navigateurs sont invités à s'y conformer,
  3. Chaque navigateur possède sa propre interprétation des suggestions de rendus, mais les différences sont peu nombreuses et aisées à identifier. Notamment à l'aide de l'outil développé par Julien Royer sus-mentionné.

Au final, en tenant compte de ces trois réalités du terrain, il vous sera bien plus commode de gérer les différences d'affichages entre chaque navigateur.

Ressources