HTML5 Sémantique

Sémantique

Quand on écrit des SMS, c’est pas toujours facile d’apporter des nuances.

Comment fait-on pour transmettre des émotions des nuances ?

Intonation et langage corporel

html5 semantique intonation voix

Quand on parle, on met des intonations dans la voix et du langage corporel.

Beaucoup d’informations sont transmises.

Avec le texte, on perd une partie de ces informations.

HTML sémantique

HTML sémantique, c’est un peu comme les types que vous avez vu en algo. Ça aide le navigateur à guider les usagers.

Rappel - Pourquoi structurer HTML

Dans le cours hier, on a appris à structurer le texte à l’aide d’éléments HTML.

Explique à ton voisin/ta voisine pourquoi c’est important de structurer le texte.

HTML sans structure

Ketchup du prof de HTML

Cette recette permet de faire un savoureux ketchup, rapide et facile avec plein de variations possibles.

Epate tes potes avec tes pâtes au ketchup du prof de HTML !

Ingrédients

Concentré de tomates double
Sel
R'viens zy au choix : flocons de bonite (pas vegan), bouillon dashi (pas vegan), sauce soja
Vinaigre (Le vinaigre des cornichons c'est le top 👍)
Épices au choix : Cardamome : quelques grains, Poivre noir, poivre du fromager de touraine tech
Truc sucré au choix : Miel, Sirop d'érable, Sirop d'agave

Instructions

Mélanger les ingrédients dans un bol.
Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon 🤌

Manger avec des trucs qui vont bien avec du ketchup.

Conservation au frais pendant une semaine.

</body>

Démo : Le rendu HTML sans structure

HTML avec structure de base

<h1>Ketchup du prof de HTML</h1>
<p>Cette recette permet de faire un savoureux ketchup, rapide et facile avec plein de variations possibles.</p>
<p>Epate tes potes avec tes pâtes au ketchup du prof de HTML !</p>

<h2>Ingrédients</h2>
<ul>
    <li>Concentré de tomates double</li>
    <li>Sel</li>
    <li>R'viens zy au choix
        <ul>
            <li>flocons de bonite (pas vegan)</li>
            <li>bouillon dashi (pas vegan)</li>
            <li>sauce soja</li>
        </ul>
    </li>
    <li>Vinaigre (Le vinaigre des cornichons c'est le top <span aria-hidden="true">👍</span>)</li>
    <!-- <span aria-hidden="true"> pour éviter que la description de l'emoji soit lu par les technologies d'assistance -->
    <li>Épices au choix :
        <ul>
            <li>Cardamome : quelques grains</li>
            <li>Poivre noir</li>
            <li>poivre du fromager de touraine tech</li>
        </ul>
    </li>
    <li>Truc sucré au choix
        <ul>
            <li>Miel</li>
            <li>Sirop d'érable</li>
            <li>Sirop d'agave</li>
        </ul>
    </li>
</ul>

<h2>Instructions</h2>
<ol>
    <li>Mélanger les ingrédients dans un bol.</li>
    <li>Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon <span
            aria-hidden="true">🤌</span></li>
    <li>Manger avec des trucs qui vont bien avec du ketchup.</li>
</ol>

<h2>Conservation</h2>
<p>Dans un récipient en verre au frais pendant une semaine max.</p>

<img src="assets/ketchup-du-prof-de-html.png" alt="">
<!-- alt="" car image non porteuse d'informations -->

Démo : Le même HTML avec structure

Example 1. Rendu de la page avec des balises pour la structurer
html structure recette

HTML avec structure sémantique

<main>
    <article>
        <h1>Ketchup du prof de HTML</h1>
        <p>Cette recette permet de faire un savoureux ketchup, rapide et facile avec plein de variations possibles.</p>
        <p>Epate tes potes avec tes pâtes au ketchup du prof de HTML !</p>

        <section aria-labelledby="ingredients">
            <h2 id="ingredients">Ingrédients</h2>
            <ul>
                <li>Concentré de tomates double</li>
                <li>Sel</li>
                <li>R'viens zy au choix
                    <ul>
                        <li>flocons de bonite (pas vegan)</li>
                        <li>bouillon dashi (pas vegan)</li>
                        <li>sauce soja</li>
                    </ul>
                </li>
                <li>Vinaigre (Le vinaigre des cornichons c'est le top <span aria-hidden="true">👍</span>)</li>
                <!-- <span aria-hidden="true"> pour éviter que la description de l'emoji soit lu par les technologies d'assistance -->
                <li>Épices au choix :
                    <ul>
                        <li>Cardamome : quelques grains</li>
                        <li>Poivre noir</li>
                        <li>poivre du fromager de touraine tech</li>
                    </ul>
                </li>
                <li>Truc sucré au choix
                    <ul>
                        <li>Miel</li>
                        <li>Sirop d'érable</li>
                        <li>Sirop d'agave</li>
                    </ul>
                </li>
            </ul>
        </section>

        <section aria-labelledby="instructions">


            <h2 id="instructions">Instructions</h2>
            <ol>
                <li>Mélanger les ingrédients dans un bol.</li>
                <li>Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon <span
                        aria-hidden="true">🤌</span></li>
                <li>Manger avec des trucs qui vont bien avec du ketchup.</li>
            </ol>
        </section>

        <section aria-labelledby="conservation">
            <h2 id="conservation">Conservation</h2>
            <p>Dans un récipient en verre au frais pendant une semaine max.</p>
        </section>

        <img src="assets/ketchup-du-prof-de-html.png" alt="">
        <!-- alt="" car image non porteuse d'informations -->
    </article>
</main>

Démo : Le même HTML avec structure

Example 2. Le rendu est le même, la sémantique est utile pour les moteurs de recherche et les technologies d’assistance
html structure recette

Contenu sectionnant

Organiser le contenu d’une page en différentes sections permet d’avoir une structure logique au sein d’un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections [1] et également gérer un en-tête et un bas de page.

Certains impactent le plan du document [2].

1. MDN - HTML : sectionnement de contenu
2. Ce qui a une grande importance en accessibilité numérique et en référencement naturel

Eléments de sectionnement de contenu

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

  • <hgroup>

  • <section>

  • <article>

  • <aside>

  • <header>

  • <footer>

  • <nav>

  • <main>

  • <address>

<h1> - <h6> Titres

Eléments de titre

Il y a six éléments de titre en HTML. Les élements de titre de h1 à h6 sont utilisés pour signifier l’importance du contenu qui les suit. Moins le nombre est élevé plus son importance est grande, ainsi, les élements h2 ont moins d’importance que les éléments h1 .

<h1>Le plus important des éléments titre</h1>
<h2>Le second plus important des éléments titre</h2>
<h3>Le troisième plus important des éléments titre</h3>
<h4>Le quatrième plus important des éléments titre</h4>
<h5>Le cinquième plus important des éléments titre</h5>
<h6>Le moins important des éléments titre</h6>
Ps bien
<h1>Un titre 1</h1>
<h1>Un 2ème titre 1</h1>

Titres et hiérarchie des titres

MDN - HTML titre de section

Un seul <h1> par page.

  • Les informations de titre peuvent être utilisées par les agents utilisateur afin de construire automatiquement la table des matières d’un document.

  • Il ne faut pas utiliser des éléments de titre pour ajuster la taille du texte. Pour cela, on utilisera la propriété CSS font-size.

  • Il ne faut pas sauter de niveaux entre les titres : on commencera toujours par <h1>, suivi <h2> et ainsi de suite.

Bien
<h1>Le plus important des éléments titre</h1>
<p>Paragraphe</p>
<h2>Le second plus important des éléments titre</h2>
<p>Paragraphe</p>
<h3>Le troisième plus important des éléments titre</h3>
<p>Paragraphe</p>
Pas bien
<h1>Titre niveau 1</h1>
<p>Paragraphe</p>
<h3>Titre niveau 3 (on a sauté le niveau 2)</h3>
<p>Paragraphe</p>
<h5>Titre niveau 5 (on a sauté le niveau 4)</h4>
<p>Paragraphe</p>

Activité

Reprendre le travail préparatoire sur le site du BDE.

Imaginer les grandes sections et les différents niveaux de titre.

<hgroup>

Permet de grouper un titre avec des paragraphes.

Utile pour faire un sous-titre [1]

Sous-titre

Il ne faut pas utiliser de titre du niveau d’en dessous pour faire un sous-titre.

Pas bien
<section>
    <h1>Star Wars</h1>
    <h2>La guerre des étoiles</h2>
    <p>Il était une fois ...</p>
</section>
Bien
<section>
    <hgroup>
        <h1>Star Wars</h1>
        <p>La guerre des étoiles</p>
    </hgroup>
    <p>Il était une fois ...</p>
</section>
1. MDN - HTML hgroup

<main>

The good stuff, gimme the good stuff…​

L’élément main [1]

Le contenu principal du document, la raison pour laquelle on se trouve sur la page. C’est-à-dire ce qui est unique à cette page.

Un document ne peut avoir qu’un seul élément <main>. Le <main> ne devrait pas contenir des contenus répétés (ex. navigation, recherche, barres latérales, logo du site …​)

<!-- Navigation générale du site -->

<main>
    <h1>Recette du ketchup</h1>
    <p>Il est bon le ketchup</p>
    <h2>Ingredients</h2>
    <p>...</p>
</main>

<!-- pied de page commun à tout le site -->
Pas bien
<main>
    <h1>Recette du ketchup</h1>
    <p>Il est bon le ketchup</p>
    <h2>Ingredients</h2>
    <p>...</p>
</main>

<!-- On ne peut avoir qu'un seul <main> -->
<main>
    <h1>Recette du ketchup</h1>
    <p>Il est bon le ketchup</p>
    <h2>Ingredients</h2>
    <p>...</p>
</main>
1. MDN - HTML main

<section>

<section> [1]

Grouper des trucs qui parlent de la même chose.

En général avec un titre

La section fait partie des contenus sectionnants.

  • Chapitres

  • Introduction

  • Actualités

  • Informations de contact

1. MDN - HTML section

<article>

<article> footnote::[MDN - HTML article]::Un contenu autonome dans un document.

Peut être distribué ou réutilisé de manière autonome.

Example 3. Exemples

  • Message de forum

  • article

    • de magazine

    • de journal

    • de blog

  • une fiche produit

Un <article> peut être contenu dans un <article> (ex. commentaire d’un article de blog).

<header>

Un conteneur pour des informations d’introduction ou un ensemble de liens de navigation.

Il peut y avoir plusieurs <header> dans un document HTML.

Example 4. Un header contient en général

Un ou plusieurs éléments de titre (<h1> - <h6>) Un logo ou icone Des informations à propos de l’auteur

Un <header> ne peut pas être placé dans un <footer>, <address> ou un autre <header>

<body>
<!-- Contenu introductif de la page entière -->
<header>
    <h1>Star Wars</h1>
    <p>Il était une fois, dans une galaxie très lointaine</p>
</header>

<section>
    <!-- Contenu introductif de l'épisode 1 -->
    <header>
        <h2>Episode 1</h2>
        <p>Le film commence avec ...</p>
    </header>
    <p>Déroulé du reste du film</p>
</section>

</body>

<footer>

Pied de page ou de section.

L’élément footer [1]

Cet élément est placé à la fin d’un document HTML et contient généralement les informations de copyright et des liens vers d’autres pages importantes.

<!-- pied de la page -->
<footer>
    <p>
    Ce travail par Marc Bouvier est sous license CC BY-NC-SA 4.0
    - <a href="https://baldir.fr">baldir.fr</a>
    </p>
</footer>
<body>
<section>
    <header>
        <h2>Episode 1</h2>
        <p>Le film commence avec ...</p>
    </header>
    <p>Déroulé du reste du film</p>

    <!-- Conclusion de l'épisode 1 -->
    <footer>
        <p>Et ils vécurent heureux et eurent beaucoup d'enfants jedi.</p>
    </footer>
</section>

<footer>
    <p>Copyright Lucas Films</p>
</footer>
</body>

Un <footer> peut aussi se trouver dans un élément sectionnant (<section>, <article>, <aside>)

1. MDN - HTML footer

<nav>

<nav> [1]

Un ensemble de liens de navigation dans le document (la page ou le site par exemple)

<nav class="navbar">
    <ul class="nav-links">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
1. MDN - HTML nav

<aside>

Un contenu dont le sujet a un rapport indirect au contenu principal du document.

Il devrait avoir du sens même en dehors du contenu qu’il accompagne.

<p>
    Les salamandres sont un groupe d'amphibiens ressemblant à des lézards,
    avec des pattes courtes et une queue, tant à l'état larvaire qu'à l'âge adulte.
</p>

<aside>
    <p>Le triton à peau rugueuse se défend à l'aide d'une neurotoxine mortelle.</p>
</aside>

<p>
    Plusieurs espèces de salamandres vivent dans la forêt pluviale tempérée du nord-ouest du Pacifique,
    notamment l'Ensatina, la salamandre du nord-ouest et le triton à peau rugueuse. La plupart des salamandres sont nocturnes et chassent les insectes, les vers et autres petites créatures.
</p>

<address> - adresse de contact

MDN - HTML address

<p>Contacter l'auteur de cette page</p>
<address>
  <a href="mailto:jim@example.com">jim@example.com</a><br />
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>

Activité

Ajoutez des éléments de sémantique sectionnant à la recette de cuisine

<h1>Ketchup du prof de HTML</h1>
<p>Cette recette permet de faire un savoureux ketchup, rapide et facile avec plein de variations possibles.</p>
<p>Epate tes potes avec tes pâtes au ketchup du prof de HTML !</p>

<h2>Ingrédients</h2>
<ul>
    <li>Concentré de tomates double</li>
    <li>Sel</li>
    <li>R'viens zy au choix
        <ul>
            <li>flocons de bonite (pas vegan)</li>
            <li>bouillon dashi (pas vegan)</li>
            <li>sauce soja</li>
        </ul>
    </li>
    <li>Vinaigre (Le vinaigre des cornichons c'est le top <span aria-hidden="true">👍</span>)</li>
    <!-- <span aria-hidden="true"> pour éviter que la description de l'emoji soit lu par les technologies d'assistance -->
    <li>Épices au choix :
        <ul>
            <li>Cardamome : quelques grains</li>
            <li>Poivre noir</li>
            <li>poivre du fromager de touraine tech</li>
        </ul>
    </li>
    <li>Truc sucré au choix
        <ul>
            <li>Miel</li>
            <li>Sirop d'érable</li>
            <li>Sirop d'agave</li>
        </ul>
    </li>
</ul>

<h2>Instructions</h2>
<ol>
    <li>Mélanger les ingrédients dans un bol.</li>
    <li>Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon <span
            aria-hidden="true">🤌</span></li>
    <li>Manger avec des trucs qui vont bien avec du ketchup.</li>
</ol>

<h2>Conservation</h2>
<p>Dans un récipient en verre au frais pendant une semaine max.</p>

<img src="assets/ketchup-du-prof-de-html.png" alt="">
<!-- alt="" car image non porteuse d'informations -->

Démo : Le même HTML avec structure

HTML avec structure sémantique

<main>
    <article>
        <h1>Ketchup du prof de HTML</h1>
        <p>Cette recette permet de faire un savoureux ketchup, rapide et facile avec plein de variations possibles.</p>
        <p>Epate tes potes avec tes pâtes au ketchup du prof de HTML !</p>

        <section aria-labelledby="ingredients">
            <h2 id="ingredients">Ingrédients</h2>
            <ul>
                <li>Concentré de tomates double</li>
                <li>Sel</li>
                <li>R'viens zy au choix
                    <ul>
                        <li>flocons de bonite (pas vegan)</li>
                        <li>bouillon dashi (pas vegan)</li>
                        <li>sauce soja</li>
                    </ul>
                </li>
                <li>Vinaigre (Le vinaigre des cornichons c'est le top <span aria-hidden="true">👍</span>)</li>
                <!-- <span aria-hidden="true"> pour éviter que la description de l'emoji soit lu par les technologies d'assistance -->
                <li>Épices au choix :
                    <ul>
                        <li>Cardamome : quelques grains</li>
                        <li>Poivre noir</li>
                        <li>poivre du fromager de touraine tech</li>
                    </ul>
                </li>
                <li>Truc sucré au choix
                    <ul>
                        <li>Miel</li>
                        <li>Sirop d'érable</li>
                        <li>Sirop d'agave</li>
                    </ul>
                </li>
            </ul>
        </section>

        <section aria-labelledby="instructions">


            <h2 id="instructions">Instructions</h2>
            <ol>
                <li>Mélanger les ingrédients dans un bol.</li>
                <li>Ajuster les quantités en goutant régulièrement jusqu'à ce que ce soit bon <span
                        aria-hidden="true">🤌</span></li>
                <li>Manger avec des trucs qui vont bien avec du ketchup.</li>
            </ol>
        </section>

        <section aria-labelledby="conservation">
            <h2 id="conservation">Conservation</h2>
            <p>Dans un récipient en verre au frais pendant une semaine max.</p>
        </section>

        <img src="assets/ketchup-du-prof-de-html.png" alt="">
        <!-- alt="" car image non porteuse d'informations -->
    </article>
</main>

Démo : Le même HTML avec structure

Contenu sémantique de texte en ligne

Emphase et importance

Quand on parle, on met souvent l’accent sur certains mots. Ce qui se révèle dans le ton de notre voix.

On peut marquer l’importance de certains mots.

<em> - Emphase

MDN - HTML em

L’élément HTML <em> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <em> peuvent être imbriqués, chaque degré d’imbrication indiquant un degré d’insistance plus élevé.

Reconnu par les lecteurs d’écran

Par défaut, le rendu de <em> est italique. Ne pas utiliser pour style en italique. Utiliser <span> et un style CSS pour ça ou éventuellement l’élément <i>.

Exemple

Je suis heureux que tu ne sois pas en retard.

Je suis <em>heureux</em> que tu ne sois pas <em>en retard</em>.

Je suis heureux que tu ne sois pas en retard.

Je suis heureux que tu ne sois pas en retard.

Première phrase : on ressent que la personne est rassurée que la personne soit à l’heure.

Deuxième phrase : l’emphase sur "heureux" et "en retard" peut indiquer un agacement.

<strong> - Importance

Quand des mots sont importants, on insiste dessus.

Ce liquide est <strong>hautement toxique</strong>.

Je compte sur toi. <strong>Ne sois pas en retard</strong> !

Ce liquide est hautement toxique.

Je compte sur toi. Ne sois pas en retard !

Reconnu par les lecteurs d’écran

Par défaut, le rendu de <strong> est en gras. Ne pas utiliser pour style en gras. Utiliser <span> et un style CSS pour ça ou éventuellement l’élément <b>.

En combinaison

<strong> et <em> peuvent être combinés. [1]

Une importance particulière ou un certain sérieux voire un caractère urgent.

<p>
    Ce liquide est <strong>extrèmement toxique</strong>.
    Si tu le bois, <strong>tu pourrais <em>mourir</em></strong>.
</p>
html semantic strong
1. MDN - Emphase and importance

Activité

Activité

A l’aide de la documentation MDN, ajouter des balises de texte en ligne pour apporter des nuances à un texte.

MDN - HTML : Eléments - sémantique du texte en ligne

<h1>Emphase et importance</h1>

<p>
    Ma nouvelle machine à café s'appelle Le Percolator 2000.
    Il produit le café le plus sublime et merveilleux.
</p>

<p>
    En plein hiver, il fera froid.
    Tu devrais t'envelopper chaudement
    pour éviter de tomber malade.
</p>

Solution

<h1><em>Emphase</em> et <strong>importance</strong></h1>

<p>
    Ma nouvelle machine à café s'appelle <strong>Le Percolator 2000</strong>.
    Il produit le café le plus <em>sublime</em> et <em>merveilleux</em>.
</p>

<p>
    En plein hiver, il fera <strong>froid</strong>.
    Tu devrais <strong>t'envelopper chaudement
    pour éviter de <em>tomber malade</em></strong>.
</p>
html semantique emphase importance

Italique, gras et souligné - non sémantique

Avant HTML5 , traditionnellement gras, italique et souligné.

Redéfinis en HTML5 [1] [2]

<!-- noms scientifiques -->
<p>
Le colibri à gorge rubis (<i>Archilochus colubris</i>) est le plus commun colibri dans l'est de l'Amérique du Nord.
</p>
<!-- mots étrangers -->
<p>
    Le menu était une mer de mots exotiques comme <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> et <i lang="fr">soupe à l'oignon</i>.
</p>
<!-- une faute d'orthographe connue -->
<p>
    Un jour, j'apprendrai à mieux <u class="spelling-error">épler</u>.
</p>
<!-- terme défini lorsqu'il est utilisé dans une définition -->
<dl>
    <dt>HTML sémantique</dt>
    <dd>Utilisez les éléments en fonction de leur signification <b>sémantique</b>, et non de leur apparence. </dd>
</dl>
html semantique gras italique souligne

La plupart du temps, le souligné est utilisé pour signifier la présence d’un lien hypertexte. Sur le web, il est recommandé d’utiliser le soulignement pour des liens.

1. https://www.w3.org/International/questions/qa-b-and-i-tags
2. MDN - Emphasis and importance - Italic, bold, underline…​

<i> - différenciation

L’élément HTML <i> [1] [2] représente un morceau de texte qui se différencie du texte principal.

  • termes techniques

  • phrases en langue étrangère

  • expression des pensées d’un personnage

Généralement affiché en italique

Gardez toujours à l’esprit l’accessibilité.

Le concept de l’italique n’est pas très utile pour les personnes qui utilisent des lecteurs d’écran ou qui utilisent un système d’écriture autre que l’alphabet latin.

<p>Je l'ai regardé et je me suis dit : <i>Ce n'est pas possible !</i></p>

<p>
  <i>Musa</i> est l'un des deux ou trois genres de la famille des <i>Musaceae</i> qui
  comprend les bananes et les plantains.
</p>

<p>
  Le terme <i>bande passante</i> décrit la quantité d'informations pouvant
  transiter par une connexion de données dans un laps de temps donné.
</p>
html semantic i
1. MDN - HTML i
2. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element

<b> - attirer l’attention

L’élément HTML <b> [1] [2] permet d’attirer l’attention du lecteur sur un contenu qui n’a pas, pour autant, d’importance significative.

  • mots clés

  • dans les résumés

  • noms de produits

  • indiquer la première phrase de chaque paragraphe d’un article

<p>
    Les deux cours de sciences les plus populaires proposés par l'école
    sont <b class="term">chemistry</b> (l'étude des produits chimiques
    et de la composition de substances) et <b class="term">physics</b>
    (l'étude de la nature et propriétés de la matière et de l'énergie).
</p>
html semantic b

Anciennement utilisé pour mettre le texte en gras.

Ne pas utiliser pour mettre en forme, utiliser la propriété CSS font-weight.

Si l’élément est important, préférer <strong>.

1. MDN - HTML b
2. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element

<u> - annotation non textuelle

MDN - HTML u [1]

Affiche un fragment de texte qui est annoté avec des éléments non textuels.

Signification traditionnellement véhiculée par le soulignement

  • Nom propre

  • Faute d’orthographe

Un jour, j'apprendrai à mieux <u class="spelling-error">épler</u>.
html semantic u

Par défaut, le contenu de l’élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.

En général une meilleure option est disponible (<em> , <b>, <mark> …​)

1. https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-u-element