Les balises indispensables pour que le HTML fonctionne comme prévu

• Pour qu’une page web s’affiche comme prévu dans le navigateur, il faut absolument inclure quelques balises HTML de base
• `` garantit un rendu en mode standard et évite les erreurs de calcul de mise en page
• `` fournit une information de langue qui améliore l’accessibilité, la recherche et la qualité de la traduction
• et contrôlent respectivement l’encodage des caractères et l’échelle d’affichage sur mobile
• Ces balises ne sont pas de simples éléments de forme : ce sont des composants essentiels pour préserver la cohérence des standards web et de l’expérience utilisateur

---

Structure de base du HTML et aperçu des balises essentielles

• L’article est inspiré de la présentation d’Alex Petros, « Incantations that make HTML work correctly »
  • L’auteur y récapitule le snippet de base à toujours inclure lorsqu’on ouvre directement un fichier HTML dans un navigateur
  • La structure de base donnée en exemple est la suivante

• Chaque balise aide le navigateur à interpréter et afficher le HTML conformément aux standards
  • En leur absence, le navigateur peut passer en mode non standard (quirks mode), provoquer des problèmes d’encodage ou réduire l’affichage sur mobile

`` — déclaration du mode standard

• `` est une déclaration qui indique au navigateur de faire le rendu en mode standard (standards mode)
  • Sans cette déclaration, le navigateur bascule en quirks mode et émule les anciens comportements HTML non standard
  • Le résultat est une différence dans les calculs de mise en page, dimensions et alignement, avec des erreurs d’affichage inattendues
• n’est pas sensible à la casse, et des formes comme ou `` sont aussi reconnues
  • L’auteur plaisante en disant que « si vous voulez écrire du balisage façon 1998, vous pouvez aussi le mettre en majuscules »

`` — définir la langue du document

• `` est la balise qui spécifie la langue principale du document
  • Cette information est utilisée par de nombreux outils : navigateurs, moteurs de recherche, lecteurs d’écran, etc.
• Exemples d’usage principaux
  • Les lecteurs d’écran choisissent la bonne prononciation et la bonne intonation
  • Les moteurs de recherche améliorent la qualité de l’indexation et de la traduction
  • Les fonctions basées sur la locale, comme le correcteur orthographique, peuvent être appliquées
• Même si l’omission de cet attribut ne semble pas poser de problème visuel à l’écran, les outils autour du navigateur peuvent mal traiter le document
  • Il est donc préférable de l’indiquer explicitement dans le HTML
• Il est aussi possible de transmettre l’information de langue via les en-têtes de réponse du serveur, mais pour un fichier local ouvert directement, la déclaration dans le HTML est plus sûre
  • Exemple de code

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — définir l’encodage des caractères

• `` permet au navigateur de reconnaître l’encodage des caractères du document
  • Cela permet d’afficher correctement les caractères non ASCII comme é, ü, ñ, ©, ™, ®, …, 👍
• Sans cette balise, les caractères spéciaux ou les guillemets typographiques peuvent s’afficher de façon corrompue
  • L’auteur cite comme exemple des « smart quotes » mal rendus sur son propre blog
• Comparaison d’exemple
  • Sans `` : les caractères spéciaux et les emoji s’affichent mal
  • Avec cette balise : tous les caractères s’affichent correctement
• Le billet de blog inclut une capture d’écran comparant les deux cas

`` — configurer le viewport mobile

• Cette balise contrôle les proportions de l’écran et le niveau de zoom dans les navigateurs mobiles
  • Si elle manque, la page apparaît réduite et trop petite sur les appareils mobiles
• L’auteur raconte avoir eu un cas où « tout allait bien sur desktop, mais une fois ouvert sur mobile, tout paraissait minuscule », simplement parce que la balise meta viewport avait été oubliée
  • Une capture d’écran comparative, à gauche (sans la balise) et à droite (avec la balise), illustre visuellement la différence
• Même pour un prototype simple, il faut donc inclure cette balise afin de conserver les proportions de mise en page attendues

Conclusion — les vrais fondamentaux du HTML

• L’auteur termine sur une plaisanterie en disant qu’il avait « oublié le snippet le plus important »
  • Il donne l’exemple de code suivant

• C’est une allusion ironique à la structure d’application basée sur JavaScript fréquemment utilisée dans le développement web moderne
• Dans l’ensemble, l’article souligne que les balises fondamentales du HTML sont des éléments clés pour garantir un comportement conforme aux standards du web

[ahwjdekf]

Si c’est indispensable, pourquoi ça ne fonctionne pas par défaut ? Bref, le web est vraiment bizarre. Leur façon de penser est décidément à part.

[dongho42]

N’est-ce pas à cause de la rétrocompatibilité ? Si on change simplement le mode de fonctionnement par défaut, ce qui tournait bien auparavant risque de se casser.

[GN⁺]

Avis Hacker News

• Fait intéressant, HN et paulgraham.com sont tous deux rendus en Quirks Mode faute de déclaration DOCTYPE On peut le vérifier dans les outils de développement avec document.compatMode J’utilise un userscript pour copier facilement le texte de l’élément survolé, et en Quirks Mode il fonctionne de manière instable On peut forcer le changement avec document.write("" + document.documentElement.innerHTML), mais cela réinitialise tout le document et provoque des problèmes Je me demande s’il existe, du point de vue de l’utilisateur, un moyen plus propre de forcer le Standards Mode
  • J’aimerais que dang améliore un peu l’ergonomie de HN La taille de police par défaut est de l’ordre de 12 px, ce qui paraît trop petit sur la plupart des appareils modernes On dirait aussi que le CSS reprend tel quel l’ancien code publié il y a environ 13 ans
  • On peut le corriger avec un filtre uBlock Exemple : `||news.ycombinator.com/*$replace=/