Éléments HTML par usage sémantique

Classification des éléments HTML selon leur rôle dans le design system

Primary Actions principales

Éléments interactifs principaux qui déclenchent les actions clés de l'interface. Couleur dominante pour attirer l'attention.

Boutons d'action

<button> type="submit"

Bouton de soumission de formulaire. Action principale attendue par l'utilisateur.

<button type="submit">Envoyer</button>
<button> class="primary"

Bouton d'action principale. Utilisé pour les CTA (Call To Action) majeurs.

<button class="btn-primary">Acheter</button>
<input> type="submit"

Input de soumission. Alternative au bouton pour les formulaires.

<input type="submit" value="Valider">

Liens d'action

<a> class="cta"

Lien stylisé en bouton pour les appels à l'action principaux.

<a href="/signup" class="cta">S'inscrire</a>
<a> role="button"

Lien avec rôle de bouton pour les actions navigables principales.

<a href="#" role="button">Démarrer</a>

Navigation principale

<nav> aria-label="principale"

Navigation principale du site. Les liens actifs utilisent la couleur primary.

<nav aria-label="Navigation principale">...</nav>
<a> aria-current="page"

Lien de navigation actif, indiquant la page courante.

<a href="/" aria-current="page">Accueil</a>

Secondary Éléments de support

Éléments secondaires qui complètent l'interface sans dominer. Tons neutres et discrets.

Boutons secondaires

<button> class="secondary"

Bouton d'action secondaire. Pour les actions alternatives ou annulations.

<button class="btn-secondary">Annuler</button>
<button> type="reset"

Bouton de réinitialisation de formulaire.

<button type="reset">Réinitialiser</button>
<button> class="outline"

Bouton avec bordure, sans fond. Moins proéminent visuellement.

<button class="btn-outline">En savoir plus</button>

Contenus annexes

<aside>

Contenu tangentiel, sidebars, informations complémentaires.

<aside>Articles connexes...</aside>
<details>

Widget de divulgation pour masquer/révéler du contenu.

<details><summary>Plus</summary>...</details>
<summary>

Résumé cliquable pour l'élément details.

<summary>Afficher les options</summary>
<small>

Texte secondaire, mentions légales, notes de bas de page.

<small>© 2024 Tous droits réservés</small>

Formulaires

<fieldset>

Groupement de champs de formulaire avec bordure secondaire.

<fieldset><legend>Adresse</legend>...</fieldset>
<legend>

Légende d'un fieldset, titre de groupe de champs.

<legend>Informations personnelles</legend>
<optgroup>

Groupe d'options dans un select.

<optgroup label="Fruits">...</optgroup>

Navigation secondaire

<nav> aria-label="breadcrumb"

Fil d'Ariane pour la navigation contextuelle.

<nav aria-label="Fil d'Ariane">...</nav>
<nav> aria-label="pagination"

Navigation de pagination entre les pages.

<nav aria-label="Pagination">...</nav>

Accent Mise en valeur

Éléments qui attirent l'attention sur des informations importantes, des notifications ou des points d'intérêt.

Emphase textuelle

<mark>

Texte surligné, pertinence dans un contexte de recherche.

<mark>résultat trouvé</mark>
<strong>

Importance forte, peut utiliser l'accent pour renforcer.

<strong>Attention</strong>
<em>

Emphase, stress vocal. Accentuation subtile.

<em>vraiment</em> important
<ins>

Texte inséré, ajouts dans un document révisé.

<ins>nouveau contenu</ins>

Notifications et alertes

<div> role="alert"

Message d'alerte urgent, annoncé immédiatement aux lecteurs d'écran.

<div role="alert">Erreur de connexion</div>
<div> role="status"

Message de statut, confirmation d'action réussie.

<div role="status">Sauvegardé</div>
<output>

Résultat d'un calcul ou d'une action utilisateur.

<output>Total: 42€</output>

Indicateurs visuels

<progress>

Barre de progression, indicateur d'avancement.

<progress value="70" max="100"></progress>
<meter>

Jauge scalaire dans une plage connue.

<meter value="0.7">70%</meter>
<span> class="badge"

Badge, compteur de notifications, étiquette.

<span class="badge">Nouveau</span>
<span> class="tag"

Tag, catégorie, mot-clé cliquable.

<span class="tag">Design</span>

États interactifs

<a> :hover, :focus

État de survol et focus des liens. Accent pour le feedback visuel.

a:hover { color: var(--accent); }
<input> :focus

Anneau de focus sur les champs de formulaire.

input:focus { outline-color: var(--accent); }

Text Contenu textuel

Tous les éléments de texte et de contenu lisible. Couleur optimisée pour la lisibilité sur les fonds.

Titres

<h1>

Titre principal de la page. Un seul par page.

<h1>Titre de la page</h1>
<h2> à <h6>

Sous-titres hiérarchiques pour structurer le contenu.

<h2>Section</h2> <h3>Sous-section</h3>
<hgroup>

Groupe de titres avec sous-titre.

<hgroup><h1>Titre</h1><p>Sous-titre</p></hgroup>

Paragraphes et blocs

<p>

Paragraphe de texte, unité de base du contenu.

<p>Lorem ipsum dolor sit amet...</p>
<blockquote>

Citation longue, extrait d'une autre source.

<blockquote cite="...">Citation</blockquote>
<q>

Citation courte en ligne.

Il a dit <q>bonjour</q>
<address>

Informations de contact pour l'auteur ou l'organisation.

<address>contact@example.com</address>

Listes

<ul> <li>

Liste non ordonnée avec puces.

<ul><li>Élément</li></ul>
<ol> <li>

Liste ordonnée numérotée.

<ol><li>Premier</li></ol>
<dl> <dt> <dd>

Liste de définitions, termes et descriptions.

<dl><dt>Terme</dt><dd>Définition</dd></dl>

Formulaires

<label>

Étiquette de champ de formulaire.

<label for="email">Email</label>
<input> type="text"

Champ de saisie texte. Le texte saisi utilise la couleur text.

<input type="text" placeholder="...">
<textarea>

Zone de texte multiligne.

<textarea rows="4"></textarea>
<select> <option>

Liste déroulante de sélection.

<select><option>Choix</option></select>

Code et données

<code>

Fragment de code en ligne.

La fonction <code>init()</code>
<pre>

Texte préformaté, blocs de code.

<pre><code>function() {...}</code></pre>
<kbd>

Saisie clavier, raccourci.

Appuyez sur <kbd>Ctrl+S</kbd>
<samp>

Sortie d'un programme.

<samp>Error 404</samp>
<var>

Variable mathématique ou de programmation.

<var>x</var> = 5
<time>

Date ou heure lisible par machine.

<time datetime="2024-01-15">15 janvier</time>
<data>

Donnée avec valeur machine-readable.

<data value="42">quarante-deux</data>

Tableaux

<th>

Cellule d'en-tête de tableau.

<th scope="col">Nom</th>
<td>

Cellule de données de tableau.

<td>Valeur</td>
<caption>

Légende descriptive du tableau.

<caption>Statistiques 2024</caption>

Médias

<figcaption>

Légende d'une figure (image, graphique).

<figcaption>Figure 1: Schéma</figcaption>
<abbr>

Abréviation avec expansion au survol.

<abbr title="HyperText">HTML</abbr>
<dfn>

Terme en cours de définition.

<dfn>API</dfn> signifie...
<cite>

Titre d'une œuvre citée.

<cite>Le Petit Prince</cite>

Background Surfaces et conteneurs

Éléments structurels qui servent de fond ou de conteneur pour le contenu. Couleurs neutres et légères.

Structure de page

<body>

Fond principal de la page, surface de base.

body { background: var(--background); }
<main>

Contenu principal de la page.

<main>Contenu principal</main>
<header>

En-tête de page ou de section.

<header>Logo, navigation</header>
<footer>

Pied de page ou de section.

<footer>Copyright, liens</footer>

Sections de contenu

<article>

Contenu autonome, redistribuable (post, article).

<article>Article de blog</article>
<section>

Section thématique de contenu.

<section>À propos</section>
<div> class="container"

Conteneur générique pour mise en page.

<div class="container">...</div>
<div> class="card"

Carte, conteneur d'information groupée.

<div class="card">...</div>

Tableaux et données

<table>

Tableau de données, fond de cellules.

<table>...</table>
<thead>

En-tête de tableau, fond légèrement différent.

<thead><tr>...</tr></thead>
<tbody>

Corps du tableau.

<tbody>...</tbody>
<tfoot>

Pied de tableau, totaux.

<tfoot><tr>Total</tr></tfoot>

Formulaires

<form>

Conteneur de formulaire.

<form action="/submit">...</form>
<input> fond

Fond des champs de saisie (légèrement distinct).

input { background: var(--background); }

Médias et figures

<figure>

Conteneur pour médias avec légende.

<figure><img><figcaption>...</figcaption></figure>
<picture>

Conteneur d'images responsives.

<picture><source><img></picture>

Dialogues et modales

<dialog>

Boîte de dialogue modale ou non-modale.

<dialog open>Contenu modal</dialog>
<div> class="modal"

Modal personnalisé, fenêtre superposée.

<div class="modal" role="dialog">...</div>
<div> class="overlay"

Overlay de fond pour modales.

<div class="overlay"></div>