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.
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.
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.
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.
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;
}
...
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.
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 :
- à des bugs des navigateurs ;
- à une incompréhension, du côté du concepteur web, de certains mécanismes de base comme la fusion des marges entre un élément et son bloc parent.
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 :
- 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,
- 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,
- Chaque navigateur possède sa propre interprétation des suggestions de rendus, mais les différences sont peu nombreuses et aisées à identifier.
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.