En mai 2001, un article publié par Tim Berners-Lee (l’inventeur du World Wide Web), James Hendler et Ora Lassilain dans Scientific America publiait une nouvelle vision de l’avenir du Web appelé le Web sémantique.

Notre service : Accessibilité web – Rendre votre site Internet accessible

Accessibilité site web : la sémantique html 

Voici un court extrait de cet article dans lequel les auteurs définissent la notion de web sémantique.

« Le Web sémantique apportera une structure au contenu des pages Web, créant ainsi un environnement dans lequel les agents logiciels, errant de page en page, pourront effectuer des tâches sophistiquées pour les utilisateurs. »

Le Web sémantique devait être réalisé grâce à la sémantique encodée dans le code source des pages Web, grâce à l’utilisation de balises explicites ayant un sens, véhiculant une information, garantissant ainsi la lecture de la page non seulement par des utilisateurs du Web, mais également par les technologies d’assistance, ou technologie de restitution.

« Une grande partie du contenu Web peut être rendue accessible simplement en s’assurant que les éléments, les balises sont correctement utilisés. »

Savoir créer de belles pages Web en utilisant HTML, CSS et JavaScript ne suffit pas à les rendre accessibles. Une page Web doit être correctement codée et bien structurée et bien conçue pour être consultable par tous les utilisateurs (utilisateur avec ou sans handicap physique ou moteur …), accessible, parfaitement restituée par les technologies d’assistance.

Les bonnes balises HTML doivent être utilisées dans ce but. C’est ce qu’on appelle la sémantique HTML. 

Qu’est-ce que la sémantique HTML ?

Le HTML pour « HyperText Markup Language » peut être traduit pas « langage de balises pour l’hypertexte » est le langage du Web. Les balises HTML sont (principalement) utilisées pour formater le contenu – ces balises indiquent au navigateur comment afficher le contenu sur la page. Ils ne donnent aucune indication sur le type de contenu qu’ils contiennent ou sur le rôle que joue ce contenu dans la page. Par exemple, le navigateur sait que si un développeur utilise la balise <p> sur un groupe de mots, le développeur souhaite que ces mots soient affichés sous la forme d’un paragraphe. 

Le HTML5 sémantique comble cette lacune en définissant des balises spécifiques pour indiquer clairement le rôle joué par le contenu qui contiennent ces balises.

Par exemple : les balises <div> et <span>

Ce sont des exemples d’éléments HTML non sémantiques. Ils servent uniquement de supports pour indiquer au navigateur comment le contenu doit être affiché. Ils ne donnent aucune information sur le rôle que joue le contenu qu’ils contiennent sur la page.

Les balises <header> <nav> <article>

Ce sont des éléments sémantiques. Chaque élément définit le rôle du contenu dans leurs balises et améliore l’accessibilité de votre site web.

• <header>— L’ élément HTML représente le contenu d’introduction. Il peut contenir des éléments de titre mais aussi un logo, un formulaire de recherche, un nom d’auteur, et d’autres éléments.
• <nav>— L’ élément HTML représente une section d’une page dont le but est de fournir des liens de navigation.
• <article>— L’ élément article représente une section de contenu 

D’autres balises : 

• <aside>— L’ élément HTML représente une partie d’un document dont le contenu n’est qu’indirectement lié au contenu principal du document. 
• <footer>— L’ élément HTML représente un pied de page. Il contient généralement des informations sur l’auteur, des données de copyright ou des liens vers des documents connexes.
• <header>— L’ élément HTML représente le contenu d’introduction. Il peut contenir des éléments de titre mais aussi un logo, un formulaire de recherche, un nom d’auteur, et d’autres éléments.
• <main>—L’ élément HTML représente le contenu principal d’un document. 
• <nav>— L’ élément HTML représente une section d’une page dont le but est de fournir des liens de navigation.
• <section>— L’ élément HTML représente une section autonome générique d’un document, qui n’a pas d’élément sémantique plus spécifique pour le représenter. Les sections doivent toujours avoir un titre, à quelques exceptions près.

Pourquoi utiliser les balises sémantiques ?

Pour les internautes voyants qui consultent une page web bien conçue visuellement, il est facile d’identifier ces différentes parties : menu, contenu principal, pied de page .. Pour les internautes aveugles ou malvoyants qui utilisent un lecteur d’écran pour naviguer, la situation est autre. Les technologies d’assistance ont besoin que les pages web soient encodées en HTML 5 pour permettre une bonne restitution. 

La mauvaise utilisation des balises, par exemple, l’utilisation d’une balise <div> pour remplacer la balise <header> pour afficher le contenu destiné à l’en-tête d’une page peut poser certains problèmes de restitution. Les lecteurs d’écran utilisent des balises sémantiques du DOM pour leur fonction. Dans le cas cité, un lecteur d’écran ne restituera pas le contenu de la balise <div> comme contenu de l’en-tête, mais plutôt comme une autre division de la page. L’utilisateur ne saura pas quand la technologie d’assistante lit le contenu de l’en-tête.

En résumé : La sémantique HTML est l’utilisation de balises ayant du sens, qui renseignent et communiquent une information. Elle permet de faciliter la lecture de la page web par les technologies d’assistance et améliore l’accessibilité de votre site web.

Avec le temps le HTML sémantique c’est enrichi de balises, pour transmettre plus de sens et pour une meilleure accessibilité.  Le HTML 5 a apporté beaucoup de nouveaux éléments, tels que aside, article, nav, section, main, header, footer.

HTML 5 permet de définir des zones et des régions dans la page web

Les balises HTML peuvent être utilisées pour diviser le contenu de votre page en zones ou régions bien définies, biens identifiées, car remplissant un rôle spécifique. 

Voici quelques exemples :

• L’ élément <header> représente le contenu d’introduction. Il peut contenir des éléments de titre mais aussi un logo, un formulaire de recherche, un nom d’auteur, et d’autres éléments.
• L’élément <nav>— L’ élément HTML représente une section d’une page dont le but est de fournir des liens de navigation.
• L’élément <main>—L’ élément HTML représente le contenu principal d’un document. 
• L’ élément <article>— L’ élément article représente une section de contenu 
• L’élément <section>— L’ élément HTML représente une section autonome générique d’un document, qui n’a pas d’élément sémantique plus spécifique pour le représenter. Les sections doivent toujours avoir un titre, à quelques exceptions près.
• L’ élément <aside>— L’ élément HTML représente une partie d’un document dont le contenu n’est qu’indirectement lié au contenu principal du document. 
• L’élément <footer>— L’ élément HTML représente un pied de page. Il contient généralement des informations sur l’auteur, des données de copyright ou des liens vers des documents connexes.

L’attribution explicite de rôles à chaque zone ou régions rend la structure de la page plus claire et améliore l’accessibilité de votre site web

Exemple de page structurée avec des balises sémantiques

Sources – code Viking école

 

D’autres balises sémantiques

On peut citer d’autres balise sémantiques explicites :

• <h1>, <h2>, <h3>, <h4>, <h5>,<h6> – Les éléments HTML représentent six niveaux de titrage. <h1> est le niveau de titrage le plus élevé.
• <li>, <ol>,<ul> – L’ élément HTML est utilisé pour représenter un élément dans une liste. 
• <address> – L’ élément HTML indique que le code HTML joint fournit des informations de contact pour une ou plusieurs personnes, ou pour une organisation.
• <figcaption> – L’ élément HTML représente une légende ou une légende décrivant le reste du contenu de son élément parent .
• <figure> – L’ élément HTML représente un contenu autonome, potentiellement avec une légende facultative, qui est spécifié à l’aide de l’ élément. La figure, sa légende et son contenu sont référencés comme une seule unité.

La liste de toutes les balises HTML

La sémantique HTML définit le degré d’accessibilité d’une page Web. C’est le travail du développeur d’utiliser les bonnes balises. Tous les problèmes d’accessibilité ne sont pas résolus par des balises. Une bonne compréhension de l’accessibilité du Web est donc nécessaire pour créer de bonnes pages Web.

En résumé

Une page Web peut être classée comme excellente si elle répond à trois critères ;

1. Si son balisage est bien structuré, si elle utilise des balises HTML sémantiques.
2. Si elle est accessible à tous les utilisateurs.
3. Bien conçue avec des couleurs simples mais contrastées.

Créons de belles pages accessibles  !