C’est une question récurrente que tout webmaster où agence spécialisée peut se poser lors de la contruction d’un site internet. La structure sémantique peut en dépendre, faut-il prendre en considération l’ordre des balises HN (H1, H2, H3 etc) ?

À l’occasion du hangout Google du 13 Avril 2018, John Mueller a répondu de façon précise à ce point :

Cela n’a pas vraiment d’importance. Nous utilisons les titres pour comprendre un peu mieux le contexte du contenu de la page et pour cela, nous n’avons pas besoin d’un ordre strict pour les balises titres.

Si Mueller indique que l’ordre en lui même n’a pas de réelle importance, il est à noter que la balise <h1> a plus de valeur que les autres balises.

Notre conseil : Ne vous focalisez pas outre mesure à un ordre précis des balises HN. Utilisez la balise <h1> pour amplifier le nom de votre page et renforcer la balise <title>. Toutefois, prenez en considération que votre balise <h1> (tout comme la balise <title>) doit être unique et amorcer le sujet de votre page de façon concise. Utilisez ensuite la balise <h2> pour par exemple un chapeau introductif d’une page. Les autres balises, notamment la balise <h3> serviront pour l’essentiel pour des titres annexes ou en relation avec le sujet évoqué dans votre page internet. Selon notre expérience, les balises <h1> et <h2> ainsi que <title> sont essentielles. Les autres sont clairement anecdotiques. Enfin, ne tombez pas dans la suroptimisation de mots-clés, pensez la structure de votre page de façon naturelle.

En matière de rédaction web, il y a des règles d’optimisation textuelle à respecter.

D’une part, pour faciliter la lecture de la page par les internautes.

D’autre part, pour optimiser le référencement naturel de votre site web.

Découvrez comment structurer efficacement votre texte avec les balises Hn !

attention article de 2004 !
En tentant de recréer un design sophistiqué dans un courriel HTML à l'aide de CSS, on se heurte souvent à un mur qui peut se présenter soit sous la forme d'inexplicables mutilations par les clients mail, soit sous celle d'un mail sentencieux de la part d'un administrateur de messagerie, statuant que les CSS sont “contre les règles”. Si vous aussi vous en avez assez de vous taper la tête contre les murs et d'utiliser les balises font, cet article est pour vous.

Contrairement à ce que l'on peut penser, vous pouvez créer en toute tranquillité des courriels HTML avec une bonne vieille CSS façonnée à l'ancienne. Oui, vous avez bien lu. Et même si tous les attributs ne seront pas de la partie, la plupart fonctionneront de manière irréprochable avec cette méthode.
D'abord arrive l'amour : pour le meilleur et pour le pire

Entre des articles sur le web design, des conversations entre professionnels, et des retours d'administrateurs de messagerie, j'ai fini par apprendre que certains clients mail massacraient allégrement les CSS en supprimant les styles ou en tronquant les en-têtes. J'ai également réalisé que si je voulais réellement utiliser des CSS dans mes courriels, j'avais tout intérêt à lier la feuille de style plutôt que de l'encapsuler.

Comme je n'avais encore jamais lu d'ouvrage ou rencontré d'administrateur de messagerie autorisant l'usage de mes CSS sans une guerre en règle, je m'en étais remis à la sagesse populaire. Quelle n'a pas été ma surprise quand je me suis attaqué au sujet et que j'ai décidé d'expérimenter !
Puis vient le mariage : la remise en cause

Le seul moyen de trouver une méthode pour utiliser les CSS dans les courriels HTML était de remettre en cause tout ce que je savais, et de casser toutes les “règles”. Une fois affranchi de celles-ci, il devenait possible d'explorer chacune des techniques recelant la moindre petite promesse. Voici comment cela s'est passé :

J'ai tout d'abord conçu un mail lié à une feuille de style et je l'ai expédié via un serveur d'administration connecté à de multiples adresses, webmails, et clients de messagerie. Je n'ai pas réalisé de tests sur tous les clients mail, mais tous les leaders des marchés Mac, PC et Unix ont pu être testés.
Après plusieurs essais, j'ai réussi à introduire des styles encapsulés. Ce qui s'est révélé être mon premier pas vers la réussite. (Dans le cadre d'une utilisation poussée des styles encapsulés, il est important de noter que les versions 6.0 et supérieures d'AOL rejetteront tout mail lié à des feuilles de style externes. Eh oui ! Rejetés, renvoyés en vous claquant la porte virtuelle au nez virtuel)
J'ai ensuite lu les codes source (ce qui relève de l'exploit en ce qui concerne les webmails) pour voir comment mon courriel avait pu déguster.
Enfin, j'ai utilisé mon expertise sur les styles mutilés pour tester les méthodes qui devaient, en théorie, éviter un tel massacre.

Mais quand j'ai vu les codes source, j'ai découvert quelque chose de plus horrible que je ne l'aurais cru. C'était incroyable ! En fait, la plupart du HTML n'en était plus - il n'en restait qu'un bric-à-brac de code et (apparemment) de balises propriétaires.
Enfin l'enfant paraît : mode d'emploi

Chaque client mail a sa propre manière de gérer le balisage, chacun avec ses propres bugs, ses fantaisies, ou ses propres méthodes de prise en charge des feuilles de style. Ce qui suit est la liste des problèmes les plus significatifs et de leurs solutions.
Problème :

L'enveloppe de chaque client basé sur la technologie web repose sur HTML, et il en résulte la présence de deux balises body lors de l'affichage d'un courriel HTML. Certains clients tentent de résoudre le problème en supprimant les deux ocurrences; d'autres y ajoutent un “x,” de sorte que <body> se mue en <xbody>. Dans les deux cas, le style définissant la balise body devient inapplicable.
Solution :

Enveloppez le contenu entier de votre mail dans une balise div et appliquez lui les attributs initialement destinés à body. That's all folks! C'est un remède simple et efficace, faisant uniquement appel à une balise <div> supplémentaire.
Problème :

Certains clients affichent purement et simplement les courriels sans aucun style. J'ai d'abord attribué ceci à la mutilation de mon style, pourtant clairement apparent dans le balisage. J'ai donc passé un temps non négligeable à traquer le coupable, testant une multitude de courriels. Hélas, la solution était en fait juste sous mon nez : les styles n'étaient pas supprimés, mais les points (.) précédant leurs noms, si. En l'occurrence, .DefinitionDeStyle{} se transformait en DefinitionDeStyle{}, provoquant ainsi une définition de style sans aucune portée.
Solution :

J'ai utilisé les sélecteurs de classe, qui assurent que chaque style défini commencera par une lettre plutôt que par un point. Ainsi .DefinitionDeStyle{} peut devenir td.DefinitionDeStyle{} ou div.DefinitionDeStyle{} (le cas échéant). Une solution quelque peu déconcertante, mais qui a le mérite d'être efficace et (une fois de plus) accommodante.
Problème :

Les webmails utilisent leurs propres feuilles de styles, et comme celles-ci précèdent les miennes, l'effet de cascade aboutit à une priorité de mes règles sur celles du webmail. De sorte que mes pseudo-classes et mes définitions d'éléments (tel a:link{} et td{}) altéraient par mégarde le design du webmail lui-même. Fichtre !
Solution :

J'ai paramétré précisément chaque définition. C'est ainsi que a:link{} est devenue à la fois span.DefinitionDeStyle a:link{} et td.Contenu a:link{} pour mettre en forme les liens HTML dans les deux niveaux de l'arbre du document. Cette approche peu orthodoxe alourdit le balisage, mais elle assure que mes styles seront appliqués uniquement aux éléments de mon courriel. Elle établit aussi un respect du travail, pour le designer du webmail comme pour ses utilisateurs. Mais surtout, le code qui en résulte est correct et fonctionne comme prévu.
Problème :

Hotmail : le plus démoniaque de tous. Aucune pitié pour les mails en HTML qui s'appuient sur des CSS. Il ne se contente pas d'éradiquer les styles, mais aussi les balises suivantes des courriels : <head>, <title>, <meta>, et <body>. Dites adieu à votre beau design.
Solution :

Je vous recommande de considérer soigneusement jusqu'où vous voulez vous plier à l'ineptie d'Hotmail, car la méthode suivante va demander du dévouement et de la rigueur. Comme la balise <body> et toutes celles qui précèdent se sont évaporées, la seule option consiste à utiliser les styles CSS en-ligne. Les styles définis en-ligne sont pénibles et peu productifs, et vous préféreriez sans doute ne pas avoir à les utiliser, mais ils fonctionnent tout de même. Si vous prévoyez une utilisation massive d'Hotmail par votre public, vous pouvez vous tourner vers cette méthode. Mais si vous n'avez pas à vous soucier d'Hotmail, sautez donc cette étape et pensez aux choses importantes de la vie, comme manger et dormir.
Remarques
Les attributs

Avant de venir me passer un savon parce que vous avez trouvé un attribut qui échoue en utilisant l'une de ces techniques, gardez à l'esprit le fait que je n'ai pas testé tous les attributs CSS. J'ai testé les attributs les plus courants et ceux que j'utilise fréquemment. Vous découvrirez peut-être que votre attribut favori ne marche guère, et c'est la raison pour laquelle je vous adresse toute ma sympathie, et mes encouragements à tester de nouvelles méthodes.
Clients testés

J'ai testé ces méthodes avec MailApp 1.3.2 (Mac), Squirrel Mail (Mac/Windows), AOL 7.0, 8.0, 9.0 (Mac/Windows), Mozilla Thunderbird 0.5 (Mac/Unix), Yahoo Mail (Mac/Windows), Hotmail (Mac/Windows), et Microsoft Outlook 2001/XP (Windows).

Tenez-moi au courant si ces techniques échouent dans votre configuration. Notez tout de même que les capacités d'Eudora en matière d'HTML sont incroyablement faibles, je l'ai donc exclu définitivement de tout test.

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.