BCW-2 Recommandations pour le codage en HTML

Validité du code

Version : 1.1.1, date : , permalink : https://yannisdelmas.github.io/beau-code-web/guide-html.html#validite

  1. L’encodage doit être précisé [Opquast Règle 225]. Recommandé : UTF-8, sans BOM [Opquast Règle 226].

  2. Le balisage doit être valide. En particulier, les éléments doivent être correctement imbriqués et les caractères spéciaux doivent toujours être correctement échappés par des entités, en particulier les & dans les adresses.

  3. Le document devrait être conforme à une version donnée du format choisi. Format recommandé : HTML5 en syntaxe HTML.

  4. Les éléments devraient toujours avoir une balise de fermeture, sauf éventuellement pour les éléments toujours vides (link, img, br).

    De même, les valeurs d’attribut devraient toujours être entre guillemets (simples ' ou doubles "), sauf peut-être pour les attributs booléens (p. ex. required, disabled ou open).

Justification

  1. Service, sécurité : Les éditeurs de code devinent souvent l’encodage d’une page. En revanche, les navigateurs utilisent un encodage par défaut, quand celui-ci n’est pas spécifié. Pour obtenir un affichage correct, en particulier quand des données doivent être échangées, il est donc nécessaire d’expliciter l’encodage [Opquast Règle 225].

    Respect des standards, cohérence : les processeurs XML doivent accepter les encodages UTF-8 et UTF-16 [XML 1.0]. À un autre niveau, d’ailleurs, la politique de l’IETF impose à tous les prococoles d’Internet de reconnaître au minimum UTF-8. Ceci permet une communication dans toutes les langues et sur toutes les plateformes, Unicode décrivant de façon universelle tous les glyphes en usage.

    Performance : L’encodage le plus souvent le plus économe en quantité d’information est UTF-8. Sécurité : De plus, UTF-8 permet de ne pas utiliser de BOM, lequel est parfois mal pris en charge ou mal signalé par certains logiciels auteur.

  2. La validité est un simple respect des standards. De plus, il s’agit de la dimension la plus immédiatement visible de la qualité d’un code et cela est également utile pédagogiquement.

    Pour des raisons de maintenabilité et de lisibilité, il est important de coder par des entités les caractères invisibles (mais pas les caractères affichables).

  3. Ne pas confondre validité du balisage et conformité du document : les différentes version du format HTML imposent un certain nombre de contraintes supplémentaires, en particulier l’unicité de l’id.

    La conformité des documents HTML est, là aussi, un simple respect des standards.

  4. Respect des standards, sécurité : Si ce code doit être utilisé dans du XML, par exemple dans un document HTML utilisant la syntaxe XHTML, il est impératif de scrupuleusement respecter celle-ci. En effet, la moindre erreur fait basculer les lecteurs en syntaxe HTML, dont la sémantique est différentes pour certains éléments.

    En syntaxe XHTML (XML), tout élément, même vide doit être fermé. En syntaxe HTML, cela n’est pas imposé, mais il est utile pour la lisibilité et la compréhension de certains codes, donc pour leur maintenabilité, de toujours indiquer les balises de fin facultatives (p. ex. </p>), sauf peut-être pour les balises toujours vides, pour lesquelles il n’y a aucune ambiguïté.

    Le même raisonnement s’applique aux attributs. Cela réduit également les risques d’erreur de lecture ou d’oubli d’une fermeture.

Ancres

Version : 1.0.1, date : , permalink : https://yannisdelmas.github.io/beau-code-web/guide-html.html#ancres

  1. La balise a ne devrait être utilisée que pour représenter un hyperlien, dont la destination est donnée par l’attribut href, ou éventuellement un emplacement où pourrait se situer un lien, quand il n’y a pas d’attribut href.

  2. L’attribut href doit être une URL valide. Il ne doit ni être vide, ni se limiter au caractère #.

  3. La construction <a name="…" …> est obsolète. Elle ne devrait pas être utilisée.

  4. On peut utiliser l’attribut rel pour qualifier la relation entre le document ou la section en cours et la destination d’un hyperlien.

Justification

  1. Respect des standards : [HTML 5.2, l’élément a].

  2. Respect des standards : [HTML 5.2, the href attribute].

  3. Respect des standards : [HTML 5.2, Obsolete but conforming features].

  4. Respect des standards : [HTML 5.2, Link types].

Textes alternatifs aux images et autres médias

Version : 1.0.2, date : , permalink : https://yannisdelmas.github.io/beau-code-web/guide-html.html#alt

Les images et autres médias non textuels sont associés à un texte alternatif qui est rendu par le navigateur quand ils ne sont pas disponibles, que cette situation soit temporaire ou non. Pour les images de balise img, il s’agit de l’attribut alt. Il convient d’adapter les recommandations suivantes aux autres types d’éléments (area, picture, video, embed…). Si aucun attribut de texte alternatif n’est disponible, envisagez d’utiliser l’attribut générique aria-label.

  1. L’attribut alt de la balise img est obligatoire, éventuellement vide.

  2. Si une image est seulement décorative, qu’elle n’ajoute pas d’information à ce qui est déjà présent dans son contexte, son texte alternatif devrait rester vide.

  3. Si une image apporte une information, son texte alternatif devrait reprendre l’essentiel de cette information.

    Par exemple, si l’image est une icône, le texte alternatif doit normalement renvoyer à sa fonction, et non à son aspect.

    De même, si l’image est le logo d’une société ou d’une institution, le texte alternatif sera le nom de cette entité.

  4. Le texte alternatif peut utiliser des mots-clés pertinents pour le référencement de l’image ou du texte à proximité. Toutefois, ce texte alternatif ne doit pas être trop long.

Justification

Respect des standards : recommandation HTML 5.2.

Accessibilité : WCAG 2.0, §1.1.

Les règles d’accessibilité, sont souvent également pertinentes pour le référencement naturel, ce qui améliore le service rendu aux utilisateurs ainsi que le nombre de visiteurs, si ce référencement est bien pensé (SEO). Il faut veiller à ne pas abuser des mot-clés dans un texte alternatif : un texte déraisonnablement long pourrait être repéré par un moteur de recherche comme abusif et entraîner une pénalité.