Aide-mémoire HTML sémantique

Il existe des centaines de balises sémantiques disponibles pour aider à décrire la signification de vos
documents HTML. Vous trouverez ci-dessous une feuille de triche avec certaines des plus courantes
que vous utiliserez dans ce cours et dans votre carrière de développement.

➢ Balises de sectionnement

Utilisez les balises suivantes pour organiser votre document HTML en sections structurées.

<header>

L'en-tête d'une section de contenu ou de la page Web. L'en-tête de la page Web contient souvent la
marque ou le logo du site Web.

<nav>

Les liens de navigation d'une section ou de la page Web.

<footer>

Le pied de page d'une section de contenu ou de la page Web. Sur une page Web, elle contient
souvent des liens secondaires, l'avis de droit d'auteur, la politique de confidentialité et les liens vers
la politique en matière de cookies.

<main>

Spécifie le contenu principal d'une section ou de la page Web.

<aside>

Un ensemble secondaire de contenu qui n'est pas nécessaire pour comprendre le contenu principal.

<article>

Un bloc de contenu indépendant et autonome, tel qu'un article de blog ou un produit.

<section>

Une section autonome du document qui est souvent utilisée dans les éléments body et article.
<details>

Une section de contenu réduite qui peut être développée si l'utilisateur souhaite la voir.

<summary>

Spécifie le résumé ou la légende d'un élément <details>.

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

Titres sur la page Web. <h1> indique la rubrique la plus importante tandis que <h6> indique la
moins importante.

➢ Balises de contenu
<blockquote>

Utilisé pour décrire une citation.

<dd>

Utilisé pour définir une description pour l’élément <dt> précédent.

<dl>

Utilisé pour définir une liste de description.

<dt>

Utilisé pour décrire les termes à l'intérieur des éléments <dl>

<figcaption>

Définit une légende pour une image photo.

<figure>

Applique un balisage à une image photo.

<hr>
Ajoute une ligne horizontale à l'élément parent.

<li>

Utilisé pour définir un élément dans une liste.

<menu>

Une alternative sémantique à la balise <ul>

<ol>

Définit une liste ordonnée.

<p>

Définit un paragraphe.

<pre>

Utilisé pour représenter du texte préformaté. Généralement rendu dans le navigateur Web à l'aide
d'une police à espacement fixe.

<ul>

Liste non ordonnée

➢ Balises en ligne
<a>

Un lien d'ancrage vers un autre document HTML.

<abbr>

Spécifie que le texte contenant est une abréviation ou un acronyme.

<b>

Met en gras le texte contenant. Lorsqu'il est utilisé pour indiquer l'importance, utilisez <strong>
à la place.

<br>

Un saut de ligne. Déplace le texte suivant vers une nouvelle ligne.

<cite>

Définit le titre de l'œuvre créative (par exemple un livre, un poème, une chanson, un film, une
peinture ou une sculpture). Le texte de l’élément <cite> est généralement rendu en italique.

<code>

Indique que le texte contenant est un bloc de code informatique.

<data>

Indique des données lisibles par machine.

<em>

Souligne le texte contenant.

<i>

Le texte contenant est affiché en italique. Utilisé pour indiquer un texte idiomatique ou des termes
techniques.

<mark>

Le texte contenant doit être marqué ou mis en surbrillance.

<q>

Le texte contenant est une courte citation.

<s>

Affiche le texte contenant barré ou barré.

<samp>

Le texte contenant représente un échantillon.

<small>

Utilisé pour représenter un petit texte, tel que le copyright et le texte légal.

<span>

Un élément générique pour regrouper le contenu pour le style CSS.

<strong>

Affiche le texte contenant en gras. Utilisé pour indiquer l'importance.

<sub>

Le texte contenant est un texte en indice, affiché avec une ligne de base abaissée.

<sup>

Le texte contenant est du texte en exposant, affiché avec une ligne de base en relief.

<time>

Une balise sémantique utilisée pour afficher à la fois les dates et les heures.

<u>

Affiche le texte contenant avec un trait plein.

<var>

Le texte contenant est une variable dans une expression mathématique.

 ➢ Contenu intégré et balises multimédias
<audio>

Utilisé pour intégrer l'audio dans les pages Web.

<canvas>

Utilisé pour afficher des graphiques 2D et 3D sur des pages Web.

<embed>

Utilisé comme élément conteneur pour le contenu externe fourni par une application externe telle
qu'un lecteur multimédia ou une application plug-in.

<iframe>

Utilisé pour intégrer une page Web imbriquée.

<img>

Incorpore une image sur une page Web.

<object>

Semblable à <embed> mais le contenu est fourni par un plug-in de navigateur Web.

<picture>

Un élément qui contient un élément <img> et un ou plusieurs éléments <source> pour offrir
des images alternatives pour différents affichages/dispositifs.

Incorpore une vidéo sur une page Web.

<source>

Spécifie les ressources multimédias pour les éléments <picture> <audio> et <video>

<svg>

Utilisé pour définir des graphiques vectoriels évolutifs dans une page Web.
 ➢ Balises de tableau
<table>

Définit un élément de tableau pour afficher les données du tableau dans une page Web.

<thead>

Représente le contenu de l'en-tête d'un tableau. Contient généralement un élément <tr>

<tbody>

Représente le contenu principal d'un tableau. Contient un ou plusieurs éléments <tr>

<tfoot>

Représente le contenu du pied de page d'un tableau. Contient généralement un élément <tr>

<tr>

Représente une ligne dans une table. Contient un ou plusieurs éléments <td> lorsqu'il est utilisé
dans <tbody> ou <tfoot>. Lorsqu'il est utilisé dans <thead>, <td>

Représente une cellule dans un tableau. Contient le contenu textuel de la cellule.

<th>

Définit une cellule d'en-tête d'un tableau. Contient le contenu textuel de l'en-tête.

<caption>

Définit la légende d'un élément de tableau.

<colgroup>

Définit un groupe sémantique d'une ou plusieurs colonnes dans une table pour le formatage.

<col>

Définit une colonne sémantique dans une table.