Décision sur la conception 15 – Suppression de la barre oblique finale pour les éléments vides (balises à fermeture automatique)

Suppression de la barre oblique finale pour les éléments vides (balises à fermeture automatique) se trouvant de la section de l’en-tête (<head>) des gabarits de Canada.ca.

Sommaire

  • Design decision number: 15
  • Expert: @Ricokola
  • Submited: 2022-11-16
  • Validated: by @[username] on YYYY-MM-DD
  • Status: Approved on YYYY-MM-DD
  • Type: Validation du balisage HTML5

Portée

Dans le contenu Web, éviter l’utilisation de barres obliques finales pour les éléments vides (balises à fermeture automatique) afin d’éviter les erreurs de validation du balisage HTML5.

Problème

Génère un message d’information lors de la validation d’une page qui inclut des éléments vides (balises à fermeture automatique).

Recommandation

En HTML5, maintenant que les barres obliques finales ne sont plus requises et de moins en moins recommandées pour les éléments vides (balises à fermeture automatique), nous recommandons de supprimer les barres obliques finales pour tous les éléments vides (balises à fermeture automatique) tels que <meta>, <link >, <img>,<input>, <hr> et autres éléments vides trouvés dans la section de l’en-tête <head> de tous les modèles Canada.ca.

Obsolète

Auparavant obligatoires en XHTML, les barres obliques de fermeture sont désormais facultatifs et sont maintenant fortement déconseillés pour les éléments vides (balises à fermeture automatique) en HTML5.

Migration

Supprimez la barre oblique à la fin de chaque élément vide (balises à fermeture automatique) situé à l’intérieur de l’en-tête <head> et du pied de page global des modèles Canada.ca.

Exemple

Maintenant :

<meta charset="utf-8">
<link rel="alternate" hreflang="fr" href="https://www.canada.ca/fr.html">
<img src="/etc/designs/canada/wet-boew/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo">
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<hr>

Avant :

<meta charset="utf-8"/>
<link rel="alternate" hreflang="fr" href="https://www.canada.ca/fr.html"/>
<img src="/etc/designs/canada/wet-boew/assets/sig-blk-fr.svg" alt="Gouvernement du Canada" property="logo"/>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca"/>
<hr/>

Mise à l’essai

Exécutez le validateur W3 Nu HTML Checker sur une page Canada.ca où les barres obliques ont été supprimées des éléments vides (balises à fermeture automatique) situés dans l’en-tête ou le pied de page global et n’obtenir aucun message d’information d’information lié à la barre oblique finale.

Validation Nu

Page d’accueil Canada.ca (Français).

Résultat prévu :

Ne pas avoir le message d’information suivant :

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Preuve

Le standard HTML stipule de ne pas utiliser de barre oblique finale pour marquer les balises de début comme se fermant automatiquement.

La norme HTML stipule que vous pouvez utiliser une barre oblique à la fin d’une balise de début d’élément vide à toutes fins, sauf pour marquer la balise de début comme se fermant automatiquement.

Ainsi, par exemple, les raisons suivantes sont toutes acceptables pour l’utilisation d’une barre oblique finale dans une balise de début d’élément vide :

  • J’utilise une barre oblique finale parce que j’aime son apparence.
  • J’utilise une barre oblique finale parce que j’exécute mon balisage HTML via un outil de formatage codé de façon statique pour ajouter des barres obliques finales à toutes les balises de début d’élément vide, sans aucune option d’empêcher l’outil de le faire.
  • J’utilise une barre oblique finale parce que j’écris beaucoup de code JSX, et le code JSX nécessite la barre oblique finale - sans aucune option pour moi d’empêcher JSX de le faire - donc pour la cohérence avec ce que je suis habitué de faire dans JSX, je suis le même style que dans les documents HTML réels.

Ref: W3C Validator Wiki Github - Trailing slashes in void-element start tags do not mark the start tags as self-closing

Lors de l’apprentissage du HTML, de l’enseignement du HTML et de la conception d’outils HTML, il est important d’avoir et de promouvoir le bon modèle mental sur le fonctionnement réel du HTML.

Et la façon dont HTML fonctionne est qu’il y a un ensemble discret d’éléments vides, codés de façon statique dans les analyseurs HTML, et les personnes qui écrivent du HTML doivent apprendre et se souvenir de quels éléments il s’agit - sans qu’aucune barre oblique finale ne soit ajoutée à ces éléments pour indiquer qu’ils sont spéciaux.

Ref: W3C Validator Wiki Github - Promoting the right mental model for void elements

Contexte

La raison pour laquelle une barre oblique finale était utilisée sur les éléments vides (balises à fermeture automatique) dans le passé était en premier lieu pour se conformer au balisage XHTML précédemment utilisé pour les modèles Canada.ca. En HTML5, les barres obliques finales sur les éléments vides (balises à fermeture automatique) sont désormais facultatives et fortement déconseillées.

Recherche et découvertes

  • Le validateur HTML Nu de The W3C Markup Validation Service signale les barres obliques de fin sur les éléments vides (balises à fermeture automatique) en tant qu’avertissement. Bien qu’il n’y ait aucune restriction pour que la page s’affiche correctement, depuis HTML5, il est fortement recommandé de ne plus les utiliser.
  • Le guide de rédaction HTML/CSS de Google recommande d’utiliser des balises à fermeture automatique (éléments vides) sans ajout de barres obliques à la fin.
  • La barre oblique finale peut interférer avec les valeurs d’attribut sans guillemets.
  • Le MDN Web Docs semble préférer conserver les barres obliques finales pour les balises à fermeture automatique (éléments vides) car cela rend la structure du document plus claire pour les lecteurs novices et parce que le formateur de code Prettier.io semble ajouter des barres obliques finales aux balises à fermeture automatique (éléments vides) lors du nettoyage du code, mais sur une autre note, ils ont également déclaré que les balises à fermeture automatique n’existent pas en HTML.
  • Le site Code Guide dans sa syntaxe HTML, indique de ne pas inclure de barre oblique finale dans les balises à fermeture automatique.
  • Le guide de rédaction HTML GoCardless n’inclut pas de barre oblique sur les éléments vides.
  • Dans la section Learn HTML - document structure du site web.dev, les exemples qui ont des éléments vides (balises à fermeture automatique) n’utilisent pas la barre oblique de fin.
  • Comme sité dans le problème MDN Github #20523, “Les barres obliques finales pour les éléments vides ne semblent plus recommandées car elles sont inutiles et ralentissent les choses”.

Références