4. GRAMMAIRE HTML ET SEMANTIQUE

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
2 min read

Table des matières

4.1 Conformité

4.1.1 Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé

Sur chaque page, le DOCTYPE transitionnel doit être utilisé et le code HTML doit être valide selon les règles de grammaire de ce dernier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR" "http://www.w3.org/TR/html4/loose.dtd">

Il est particulièrement important de veiller à :

  • La correcte imbrication des balises.

  • Les correctes ouverture et fermeture des balises.

  • L’absence d’attributs dupliqués sur une même balise.

  • L’unicité des valeurs de l’attribut « id » au sein d’une même page.

REMARQUES

Seules les erreurs de validation W3C sont à corriger. Les avertissements renvoyés par le validateur ne sont pas à prendre en compte dans le cadre de ce critère, car ils n'ont pas d'effets sur l’accessibilité.

HTML5

En HTML5, l'appel du DOCTYPE se fait comme suit :  <!DOCTYPE html>

ASTUCES

Utiliser le validateur NU du W3C (Nouvelle fenêtre) pour tester la validité de votre code HTML.

ATTENTION

La mise en place d’attributs ARIA dans le code HTML est un véritable avancement pour l’accessibilité, mais ne devraient être utilisés qu'en HTML5. Le cas échéant, les erreurs détectées relatives à des attributs ne seront pas à corriger.

4.2 Usage des attributs et balises HTML

4.2.1 Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme

Les balises et attributs HTML destinés exclusivement à la mise en forme ne doivent pas être utilisés, car ils sont dépréciés et ne seront pas éternellement supportés :

  • C’est le cas des attributs : align, alink, background, basefont, bgcolor, border, color, link, text, vlink, heightet width.

  • Ainsi que les balises : <basefont> , <blink> , <center> , <font> , <marquee> , <s> , <strike> ,<tt>  et <u> .

Utiliser une feuille de style pour obtenir le rendu visuel souhaité.

REMARQUES

Les balises <b>  et <i>  ne sont pas dépréciées, mais elles n'apportent aucune sémantique au texte. Utiliser plutôt  <em> en remplacement du  <i> et <strong> en remplacement du  <b>.

RESSOURCES

Voir la liste des balises dépréciés et obsolètes (Nouvelle fenêtre) (À la toute fin de la page)

4.2.2 Employer les balises HTML pour leur valeur sémantique

Les balises HTML doivent être utilisées pour leur valeur sémantique, et non pour leur rendu visuel.

Par exemple :

Balises

Mauvais usage

Bon usage

<a>

Obtenir un bouton d’action sans arrière-plan et bordure

Baliser un lien hypertexte

<hr />

Obtenir une ligne séparatrice

Séparer des sujets différents dans un bloc de texte

<blockquote>

Indenter le texte

Baliser un bloc de citations

<ul> et <li>

Obtenir une puce à l’écran

Baliser des listes

<fieldset>

Obtenir une bordure

Regrouper des éléments de formulaire de même nature

<q>

Obtenir un texte entre guillemets

Baliser une citation courte

<h1> à <h6>

Obtenir des textes plus ou moins longs

Baliser des titres et sous-titres

<sup>

Positionner une portion d’un texte plus haut que sa ligne initiale

Baliser un exposant

REMARQUES

Noter bien, qu'oublier un attribut obligatoire à l'intérieur de la balise est aussi considéré comme une erreur de sémantique. Ex. <img> a comme attribut obligatoire src et alt,  <a> a comme attribut obligatoire href, etc.

ASTUCES - BONIFICATION

Une bonne pratique d'accessibilité consiste à entourer les abréviations avec la balise <abbr> dans le corps du texte. Nb: La balise <acronym>  est déprécié depuis HTML 5

RESSOURCES

Voir aussi :

Voir aussi Contributeur éditoriaux - Expliciter les abréviations et les acronymes