La sémantique HTML a t-elle disparu ?

Avec l'arrivée des frameworks Front et plus particulièrement d'applications web, on trouve beaucoup de pages internet basées sur du code HTML qu'on pourrait qualifier de "full-div" :

<div class="page-container">
    <div class="page-title">Settings</div>
    <div class="tab-header">
        <div class="tab-title">Tab number</div>
        <div class="tab-number">1</div>
    </div>
    ...
    <div class="content">Tab 1 content</div>
    ...
</div>

Là, tout développeur web puriste se dit :

"Mais...mais... c'est quoi ce code de débutant ?! Où sont les balises <p>, <h1>... Ca n'a aucun sens ! Ils n'ont rien compris au HTML !"

Pourtant on rencontre également le full-div chez des géants comme Microsoft avec Teams, Outlook ou encore Google avec Gmail, Drive...

Mais alors, est-on entré dans une nouvelle ère flemmardesque et ignarde, bafouant tout le travail de la World Wide Web sur la syntaxe HTML au fil des années ? Est-ce vraiment généralisé ?

HTML à la base c'est quoi ?

L'origine de l'HyperText Markup Language remonte à la période 1989-1991 où le consortium W3C avait besoin de créer un ensemble d'outils et de normes permettant d'échanger des données en réseau mais liées les unes aux autres.

Les concepts fondamentaux étaient :

• la notion d'hyperlien (cliquer sur une donnée renvoie vers un autre document)
• inclure des ressources multimédias
• créer des documents interopérables avec d'autres systèmes d'information (d'où l'intérêt de mettre en place des normes)
• ...et de structurer sémantiquement le document (bim !)

En fait, l'HTML est là pour traiter le fond de l'information (là où le CSS est là pour traiter la forme), l'enrichir, et le hiérarchiser.

Le nouvel HTML5 a même apporté un panel de nouvelles balises purement sémantiques: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.

Bref, sur le papier y'a pas photo : l'HTML a été pensé pour donner du sens à son contenu.

Mais en pratique pourquoi s'en servir ?

Les devs, ces petits filous

Tout d'abord, la sémantique a bien souvent un intérêt pendant les développements, car elle nous aide à mieux comprendre ce que nous écrivons. Cela est d'autant plus vrai au fur et à mesure que la taille du code grandit !

Et quand on doit débugger quelque chose comme ça :

...ben c'est pas la joie !

Alors on pourrait très bien écrire un code propre :

<header>
    <nav>Page 1<nav>
    ...
</header>
...

Néanmoins avec les frameworks Front aujourd'hui, il est possible d'écrire des "balises sémantiques" déguisées sous forme de composants JSX. Ce qui ajoute de la lisibilité au code de dev, même si au final cela génère du code full-div.

Exemple en React (version hooks) :

function App(){
    return (
        <Header>
            <Tab>Page 1</Tab>
            ...
        </Header>
    );
}

//                         Toujours du full-div :p :p
const Header = (props) => <div>{props.children}</div>;
const Tab = (props) => <div>{props.children}</div>;

Effectivement, du point de vue du développeur, il y a une certaine sémantique. Même si elle n'a rien à voir avec de la sémantique HTML.
Et beaucoup de développeurs codent de cette manière !

Si ça ne tenait qu'à ça, il n'y aurait pas d'intérêt à aller plus loin et aller sélectionner une balise pertinente parmi toute la liste officielle !

Mais il y a d'autres bonnes raisons.

Un coup de pouce pour les SEO

Le Search Engine Optimization est un sujet très pointilleux. Si l'on veut correctement référencer son site web sur les moteurs de recherche, il faut entreprendre une multitude d'actions pour intéresser les robots d'exploration.

L'ajout de balises sémantiques en fait partie !

Les balises sémantiques correctement utilisées indiquent clairement aux robots d'exploration le sujet et la composition de votre site, et permet ainsi d'extraire efficacement les mots clés et le contenu qui fait l'identité de chaque page.

<main>
    <article>
        <h1>Titre de mon article</h1>
        <p>Résumé de mon article</p>
        <section>
            <h2>Première section</h2>
            <p>...</p>
        </section>
        <section>
            <h2>Deuxième section</h2>
            <p>...</p>
        </section>
    </article>
</main>

Et si l'on regarde plutôt du côté de sites à "contenu" comme les journaux, Les joies du code, Korben... on se rend compte qu'ils utilisent beaucoup plus la sémantique !

Ah.

Côté accessibilité

Un sujet souvent zappé, pourtant incontournable.

BOX INFO

Le chiffre : en 2021, 217 millions de personnes dans le monde souffrant de trouble modéré ou sévère de la vision ont été recensées. Et il est prévu que ces chiffres augmentent encore dans les prochaines décennies.

Si vous tenez à ce que votre site web soit ne serait-ce qu'utilisable par tous les internautes, les balises sémantiques sont indispensables.

À l'image des SEO, rendre un site web accessible demande de multiples précautions dans le design de l'interface (textes alternatifs sur les objets graphiques, polices lisibles...). Mais la sémantique HTML est un point important pour permettre aux outils spécifiques de faciliter la navigation sur chaque page.

Il est d'ailleurs possible de réaliser un audit d'accessibilité depuis les DevTools des navigateurs.

Exemple sur Chrome:

En pratique, rares sont les sites aujourd'hui à être 100% compatibles aux normes d'accessibilité (moins de 2% !), il est peut-être temps de changer la donne pour votre site !

Bref, au final ?

Oui, la sémantique HTML a encore un intérêt aujourd'hui et est encore largement utilisée.

Toutefois il faut bien cibler ses internautes et les cas d'usage de son site web. On peut différencier majoritairement 2 types de page webs :

• les applications web représentant des espaces privés et bien spécifiques : on peut à la rigueur se passer de balises sémantiques HTML, d'autant plus que le référencement a peu d'intérêt dans ce cas
• les blogs tout public : là il vaut mieux mettre le paquet sur la sémantique ! Et ça tombe bien, car les nouvelles balises <article>, <section>... collent parfaitement à ce type de contenu !

Malgré tout, quel que soit votre type de site, je vous encourage à utiliser au maximum les balises sémantiques. Le coût de développement est souvent modéré (oui je l'avoue, parfois, surcharger le style est un peu plus lourd que prévu) voire faible. Mais l'apport ne peut être que bénéfique et dans les fondamentaux du vrai HTML !