Syntaxe HTML 5 et structure sémantique d'une page web

• HTML

2.1. Une syntaxe héritée de XML

La syntaxe de HTML 5 est héritée de celle de XML, avec quelques assouplissements. Un document est un arbre composé de nœuds, définis au moyen de balises :

• balise ouvrante : <noeud> ;
• balise fermante : </noeud> ;
• balise vide (auto-fermante) : <noeud/> — en HTML 5, la barre oblique finale est facultative (<img> et <img/> sont équivalents).

Un nœud texte s’insère entre une balise ouvrante et une balise fermante. Les balises peuvent être complétées d’attributs, sous forme de paires clé/valeur, chaque attribut étant unique à l’échelle d’une balise :

<balise attribut="valeur" autre-attribut="autre valeur">contenu</balise>

Les commentaires, ignorés par le navigateur, s’écrivent <!-- commentaire -->.

2.2. Le squelette minimal d’une page

Une page HTML 5 est un fichier texte enregistré avec l’extension .html. Le prologue se limite à la déclaration <!DOCTYPE html> (seul élément écrit en majuscules par convention), suivie du nœud racine html qui contient exactement deux enfants : head et body.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Titre de la page</title>
    </head>
    <body>
    </body>
</html>

2.3. Les métadonnées de l’en-tête

L’élément <head> contient les métadonnées de la page : elles ne s’affichent pas dans la page mais renseignent le navigateur, les moteurs de recherche et les outils d’assistance.

• <title> : titre de la page, affiché dans l’onglet du navigateur et lu en premier par les lecteurs d’écran. Obligatoire, unique, et idéalement descriptif de la page (« Infos pratiques — Visiter Bellerive-sur-Mer » plutôt que « Accueil »).
• <meta charset="UTF-8"> : encodage des caractères. À placer en tout début de head, avant tout texte.
• <meta name="viewport" content="width=device-width, initial-scale=1"> : indispensable pour l’affichage sur mobile (nous y reviendrons au chapitre 9 sur le responsive). Sans elle, les téléphones affichent la page « dézoomée » comme sur un écran de bureau.
• <meta name="description" content="…"> : description de la page, souvent reprise par les moteurs de recherche dans leurs résultats.
• <meta name="author" content="…"> : auteur de la page.
• <link rel="stylesheet" href="style.css"> : liaison avec une feuille de style CSS ; l’attribut rel précise le type de ressource liée, href son emplacement.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Visiter Bellerive-sur-Mer — Accueil</title>
        <meta name="description" content="Sites incontournables, agenda et infos pratiques.">
        <link rel="stylesheet" href="style.css">
    </head>
    <body></body>
</html>

2.4. Blocs et éléments en ligne

Les éléments HTML se répartissent, pour l’affichage par défaut, en deux grandes familles :

• les éléments de type bloc délimitent des sections : ils occupent par défaut toute la largeur disponible et se succèdent verticalement (<p>, <h1>, <div>, <section>…) ;
• les éléments en ligne (inline) s’inscrivent dans la continuité du texte, sans provoquer de retour à la ligne, et occupent la taille minimale nécessaire (<a>, <strong>, <img>, <span>…).

2.5. La structure sémantique du corps

HTML 5 a introduit des balises dites sémantiques qui décrivent le rôle de chaque grande zone de la page. Elles facilitent l’indexation par les moteurs de recherche, simplifient les feuilles de style, et surtout permettent aux technologies d’assistance de naviguer de zone en zone (« aller au contenu principal », « aller à la navigation »).

La balise <menu> existe également ; elle représente sémantiquement une liste d’actions (barre d’outils) et se comporte comme une liste <ul>. Son usage reste rare : dans la pratique, la navigation d’un site se construit avec <nav> contenant une liste de liens.

<body>
    <header>
        <nav>…menu principal…</nav>
    </header>
    <main>
        <article>
            <header>…titre et chapeau…</header>
            <section>…première partie…</section>
            <section>…seconde partie…</section>
            <footer>…auteur, date…</footer>
        </article>
        <aside>…encadré complémentaire…</aside>
    </main>
    <footer>…mentions légales…</footer>
</body>

2.6. Du SEO au GEO : la sémantique à l’ère des IA génératives

Le SEO (Search Engine Optimization) désigne l’optimisation d’une page pour les moteurs de recherche classiques. Un nouveau sigle s’y ajoute depuis quelques années : le GEO (Generative Engine Optimization), l’optimisation pour les moteurs de réponse à base d’IA générative — assistants conversationnels, résumés générés en tête des résultats de recherche, agents qui lisent le web pour le compte d’un utilisateur.

Ces systèmes ne se contentent plus de classer des liens : ils lisent les pages, en extraient des passages, et les citent dans leurs réponses. Une part croissante des visiteurs découvre ainsi un contenu sans jamais afficher la page. Cela concerne directement le développeur front-end : c’est la qualité du HTML qui détermine ce qu’une machine peut extraire de la page.

Ce qui aide un moteur génératif à comprendre une page

• Une structure sémantique propre : les balises de zone (<main>, <article>, <nav>…) et une hiérarchie de titres cohérente permettent d’identifier le contenu principal, de le découper en passages autonomes et d’écarter les menus et pieds de page.
• Des contenus autoportants : des titres explicites, des paragraphes qui ont du sens isolément, des listes et tableaux correctement balisés (une donnée dans un vrai <table> avec caption et en-têtes est exploitable ; la même donnée dans un dessin ou un <div> stylé ne l’est pas).
• Des métadonnées soignées : un <title> descriptif, une meta description fidèle, l’attribut lang, des dates explicites (<time datetime=…>).
• Les données structurées (vocabulaire Schema.org, généralement en JSON-LD dans le <head>) : elles décrivent formellement le contenu (un lieu, un événement, des horaires…). Utiles de longue date pour les résultats enrichis des moteurs classiques, elles sont hors du périmètre de cette formation, mais sachez qu’elles existent.