Attention, ce post ne sert à rien. Il n'apportera pas de solution au problème posé, et devrait vous laisser avec plus d'interrogations qu'avant sa lecture.
Donc un conseil : ne le lisez pas.

Vous êtes encore là ? Vous ne pourrez pas dire que j'ai pas prévenu. Et de toute façon y aura pas de remboursements…
La question du jour porte sur HTML.

Nous avons d'un côté le W3C qui définit les standards du web. L'intention est louable !
Lisons un extrait de la documentation officielle décrivant les headings :

Headings : The H1, H2, H3, H4, H5, H6 elements

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

Je n'invente rien, ça vient de cette page.

D'un autre côté, nous avons les User Agent, plus connus sous le nom de navigateur (ou butineur pour les poétiques). Le navigateur est censé transformer la norme en ligne de code pour avoir le même rendu partout – ça c'est la théorie, après il y a aussi Internet Explorer…

La symbiose des deux permet normalement d'avoir un web interopérable ; mais ici nous avons un exemple flagrant de problème.
Vous ne le voyez pas ? Visual browsers usually render more important headings in larger fonts : cette phrase est assez ambigue pour vouloir dire tout et son contraire. Et aujourd'hui, nous allons voir que "son contraire" a été choisi !

Continuons de fouiller un peu : on tombe sur « default style sheet for HTML4 » qui définit la base de la mise en page.
Un minimum de précision s'impose : depuis CSS1, on a abandonné l'idée des balises de mise en forme pour proposer une solution purement sémantique dans laquelle les balises n'ont aucune représentation graphique. Aucune ? En fait, CSS1 propose que chaque navigateur « [ait] une feuille de style par défaut qui présentera les documents de façon raisonnable » (très clair, ça aussi). L'idée est bonne : nos balises sont déconnectées de leur affichage, mais on place des thèmes par défaut qui pourront être modifiés. CSS2 passe de « may » à « must » : conforming user agents must apply a default style sheet.

Il s'agit d'une proposition, et on encourage les développeurs à l'utiliser ; mais ce n'est pas une obligation.

La feuille de style proposée offre (entres autres) les règles suivantes qui nous intéressent ici :

 
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
 

(C'est les mêmes valeurs pour CSS2 et CSS2,1)
Si on trace le graphique :

Maintenant, arrêtons le jargon du W3C et penchons-nous vers le monde réel.
Allez hop, ni une ni deux on crée une page de test et on examine le résultat (si aucune feuille de style n'est associée).

 
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
 

Rien d'étrange à première vue, on a bien une décroissance régulière… et c'est ce qui est étrange : car le graphique proposé par le W3C est discontinu.
Donc on sort Firebug, on lui demande d'afficher la feuille de style système de Firefox (le lien ne fonctionne que sur Firefox évidemment ! ), et on note les valeurs :

Marrant ça, ils ont changé les valeurs de h4 et h6. Pourquoi ? Mystère…
Allons voir chez la concurrence, Google Chrome par exemple :

Tiens, ils ont les mêmes valeurs que chez Firefox. Et nous voilà irrémédiablement perdus : d'où sortent ces chiffres qui n'ont aucun lien entre eux ? Pourquoi le W3C donne une feuille de style aussi discontinue ? Chrome a-t-il copié chez Firefox ?

Allez, juste pour rire, regardons chez Internet Explorer v6 et v7. Eux, ils expriment leur unité en pt ce qui ne facilite pas la tâche. Comme c'est une police standard, on prend 12 pt = 1em et on obtient alors :

 
h1 {
  display: block;
  font-size: 24pt;
  font-weight: bold;
  margin: 14pt 0;
}
 
h2 {
  display: block;
  font-size: 18pt;
  font-weight: bold;
  margin: 14pt 0;
}
 
h3 {
  display: block;
  font-size: 13.55pt;
  font-weight: bold;
  margin: 14pt 0;
}
 
...
 

Encore des différences, mais pas sur les mêmes éléments !
Allez, toujours pour rire voyons le CSS d'IE8 : cette fois ils sont passés en em (ce qui est bien plus cohérent, mais bon avec IE… ).

Leurs valeurs ?

Tiens, les voilà calés sur Firefox et Chrome… j'en perds mon latin. Et qu'on ne vienne pas me dire qu'en fait c'est Firefox le copieur, les valeurs sont restées les mêmes depuis la v0,8 (y a un sacré bout de temps).

Et je vous épargne Safari qui a décidé d'utiliser sa propre unité (le quirk-em, __qem) dans sa feuille de style. En fait non, je ne vous l'épargne pas :

 
h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}
 
h2 {
    display: block;
    font-size: 1.5em;
    margin: .83__qem 0 .83em 0;
    font-weight: bold
}
 
...
 

Oui, c'est encore la même. J'y comprends rien. Doit y avoir quelqu'un qui a défini ces valeurs comme « ultimes », mais qui ? Et pourquoi ? Moi je vais me coucher, ça me fera du bien.

Et si vous avez une idée, n'hésitez pas ;)