<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

<h2>Section principale</h2>
<h3>Sous-section directe</h3>
<h4>Détail imbriqué</h4>

<hgroup>
  <h1>Titre principal</h1>
  <p>Sous-titre ou accroche qui complète le titre sans le répéter.</p>
</hgroup>

<hgroup>
  <h2>Section</h2>
  <p>Description courte de la section.</p>
</hgroup>

<p>Un paragraphe avec du texte <strong>important</strong>, de l'<em>emphase</em>, une <abbr title="HyperText Markup Language">abréviation</abbr>, du texte <mark>surligné</mark>, du texte <del>supprimé</del>, du texte <ins>inséré</ins> et du <small>petit texte</small>.</p>

<p>Un second paragraphe pour observer l'espacement vertical entre blocs. Le rythme vertical est essentiel pour la lisibilité d'un contenu long.</p>

<p>Inline sémantique : une citation <q>comme celle-ci</q>, une référence à <cite>La Guerre des Mondes</cite>, une touche <kbd>Ctrl</kbd> + <kbd>S</kbd>, une sortie <samp>Process completed</samp>, une variable <var>x</var>, un indice H<sub>2</sub>O, un exposant E = mc<sup>2</sup>, une définition <dfn>token</dfn>, une date <time datetime="2026-07-24">24 juillet 2026</time>, et une donnée <data value="42">quarante-deux</data>.</p>

<blockquote>
  <p>Une citation marquante qui mérite d'être mise en valeur et distinguée du reste du contenu.</p>
</blockquote>

<br />

<blockquote cite="https://www.w3.org/Style/CSS/">
  <p>CSS is the language for describing the presentation of Web pages.</p>
  <footer>— <cite>W3C</cite></footer>
</blockquote>

<p><small>Mentions légales, notes de bas de page ou texte secondaire.</small></p>

<p>Un premier thème de discussion.</p>
<hr>
<p>Un changement de thème marqué par une séparation visuelle.</p>

<p>
  Un paragraphe avec un <a href="/article">lien dans le texte</a>, le cas d'usage
  le plus courant en contenu éditorial, un <a href="/page-actuelle" aria-current="page">lien actif</a>
  marqué avec <code>aria-current</code>, et un
  <a href="https://example.com" target="_blank" rel="noopener noreferrer external">lien externe</a>
  qui ouvre dans un nouvel onglet.
</p>

<h2><a href="/article">Titre d'article cliquable</a></h2>
<p>Le lien se fond dans le titre (couleur héritée, pas de soulignement) et signale son interactivité au survol et au focus clavier.</p>

<button type="button">Button</button>
<button type="submit">Save changes</button>
<button type="reset">Reset form</button>
<button type="button" data-variant="ghost">Ghost</button>
<button type="submit" disabled>Save changes</button>
<button type="button" data-variant="ghost" disabled>
  Ghost
</button>
<button type="submit" aria-busy="true">Loading…</button>
<button type="button" data-variant="brand">Brand</button>

<div role="group" aria-label="Time period">
  <button type="button">Week</button>
  <button type="button">Month</button>
  <button type="button">Year</button>
</div>

<div role="group" aria-label="Actions">
  <button type="button">Cancel</button>
  <button type="reset">Reset form</button>
  <button type="submit">Save</button>
</div>

<div role="toolbar" aria-label="Edit">
  <button type="button" aria-label="Cut">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <circle cx="6" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <line x1="20" y1="4" x2="8.12" y2="15.88" />
      <line x1="14.47" y1="14.48" x2="20" y2="20" />
      <line x1="8.12" y1="8.12" x2="12" y2="12" />
    </svg>
  </button>
  <button type="button" aria-label="Copy">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  </button>
  <button type="button" aria-label="Paste">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path
        d="M16 4h2a2 2 0 0 1-2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
      />
      <rect x="8" y="2" width="8" height="4" rx="1" />
    </svg>
  </button>
</div>

<!-- Icônes : data-icon décoratif (pack) — icône-seule via porteur <i data-icon> -->
<button type="button" data-icon="check">Confirm</button>
<button type="button" data-icon="trash">Delete</button>
<button type="button" data-icon="download" data-icon-side="end">
  {{ i18n:button.download }}
</button>
<button type="button" aria-label="Confirm">
  <i data-icon="check" aria-hidden="true"></i>
</button>
<button type="button" aria-label="Delete">
  <i data-icon="trash" aria-hidden="true"></i>
</button>
<button type="button" aria-label="{{ i18n:button.download }}">
  <i data-icon="download" aria-hidden="true"></i>
</button>

<!-- SVG inline : l'icône vit dans le markup — survit sans CSS -->
<button type="submit">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
  <span>New project</span>
</button>
<button type="button">
  <span>Publish</span>
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path d="M5 12h14M12 5l7 7-7 7" />
  </svg>
</button>
<button type="submit" aria-label="Create">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
</button>
<button type="button" aria-label="Confirm">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path d="M20 6L9 17l-5-5" />
  </svg>
</button>
<button type="button" aria-label="Confirm">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M20 6L9 17l-5-5" />
  </svg>
</button>
<button type="button" aria-label="Delete">
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M3 6h18" />
    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
    <path d="M10 11v6" />
    <path d="M14 11v6" />
  </svg>
</button>

<ul>
  <li>Premier élément</li>
  <li>Deuxième élément
    <ul>
      <li>Sous-élément</li>
      <li>Autre sous-élément</li>
    </ul>
  </li>
  <li>Troisième élément</li>
</ul>

<ol>
  <li>Première étape</li>
  <li>Deuxième étape</li>
  <li>Troisième étape</li>
</ol>

<dl>
  <dt>Terme</dt>
  <dd>Définition du terme.</dd>
  <dt>Autre terme</dt>
  <dd>Sa définition correspondante.</dd>
</dl>

<dl data-purpose="metadata">
  <dt>Auteur</dt>
  <dd>Jeffrey Zeldman</dd>
  <dt>Éditeur</dt>
  <dd>New Riders Pub</dd>
  <dt>ISBN</dt>
  <dd>978-0321616951</dd>
</dl>

<table>
  <caption>Liste des utilisateurs</caption>
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Rôle</th>
      <th scope="col">Statut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Dupont</td>
      <td>Administratrice</td>
      <td>Actif</td>
    </tr>
    <tr>
      <td>Bob Martin</td>
      <td>Éditeur</td>
      <td>Inactif</td>
    </tr>
    <tr>
      <td>Clara Leroy</td>
      <td>Lectrice</td>
      <td>Actif</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><strong>Total</strong></td>
      <td>3 utilisateurs</td>
    </tr>
  </tfoot>
</table>

<table>
  <caption>Ventes trimestrielles (en k€)</caption>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col" data-numeric>Montant</th>
      <th scope="col" data-numeric>Évolution</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td data-numeric>124</td>
      <td data-numeric>+12 %</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td data-numeric>156</td>
      <td data-numeric>+26 %</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td data-numeric>98</td>
      <td data-numeric>−37 %</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Total</strong></td>
      <td data-numeric><strong>378</strong></td>
      <td></td>
    </tr>
  </tfoot>
</table>

<div data-context="report">
  <table>
    <caption>Rapport de production</caption>
    <thead>
      <tr>
        <th scope="col">Atelier</th>
        <th scope="col" data-numeric>Unités</th>
        <th scope="col" data-numeric>Conformité</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lyon</td>
        <td data-numeric>1 240</td>
        <td data-numeric>98 %</td>
      </tr>
      <tr>
        <td>Bordeaux</td>
        <td data-numeric>890</td>
        <td data-numeric>94 %</td>
      </tr>
      <tr>
        <td>Nantes</td>
        <td data-numeric>1 560</td>
        <td data-numeric>99 %</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td><strong>Total</strong></td>
        <td data-numeric><strong>3 690</strong></td>
        <td data-numeric><strong>97 %</strong></td>
      </tr>
    </tfoot>
  </table>
</div>

<p>Du code en ligne : <code>const x = 42;</code></p>
<p>Raccourci clavier : <kbd>Ctrl</kbd> + <kbd>K</kbd></p>
<p>Sortie système : <samp>Error: file not found</samp></p>

<pre><code>function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

console.log(saluer('Peels'));</code></pre>

<pre data-purpose="terminal"><samp><span class="prompt">$</span> <kbd>npm install peels</kbd>
added 1 package in 1.2s

<span class="prompt">$</span> <kbd>npm run build</kbd>
[11ty] Copied 29 Wrote 33 files in 2.25 seconds

<span class="prompt">$</span> <span class="cursor">█</span></samp></pre>

<address>
  <strong>Atelier Peels</strong><br>
  14 rue des Fonderies, 44000 Nantes<br>
  <a href="mailto:contact@exemple.fr">contact@exemple.fr</a> · <a href="tel:+33240000000">02 40 00 00 00</a>
</address>

<article>
  <p>Article rédigé par l'équipe architecture CSS.</p>
  <address>
    Contact auteur : <a href="mailto:redaction@exemple.fr">redaction@exemple.fr</a>
  </address>
</article>

<p>
  Annotation japonaise (furigana) :
  <ruby lang="ja">
    漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
    字 <rp>(</rp><rt>ji</rt><rp>)</rp>
  </ruby>
</p>

<p>
  Annotation pinyin :
  <ruby lang="zh-Hans">
    北<rp>(</rp><rt>běi</rt><rp>)</rp>
    京<rp>(</rp><rt>jīng</rt><rp>)</rp>
  </ruby>
</p>

<p>
  <i data-icon="check"></i>
  <i data-icon="external"></i>
  <i data-icon="trash" role="img" aria-label="Supprimer"></i>
  Une icône <i data-icon="check"></i> dans le flux de texte.
</p>

<p>
  <button type="button" data-icon="check">Valider</button>
  <button type="button" data-icon="trash">Survoler : l'icône change (CSS contextuel)</button>
  <button type="button" aria-label="Valider"><i data-icon="check" aria-hidden="true"></i></button>
</p>

<p>
  <a href="#" data-icon="external" data-icon-side="end">Lien externe (icône de fin)</a>
</p>
<p>
  <a href="#" download>Rapport.pdf — icône automatique</a>
</p>
<p data-icon="chevron">
  N'importe quel élément peut porter data-icon — aucune restriction d'hôte.
</p>

<!-- Pack externe (Font Awesome) — SVG via url(), CDN de démo, servir localement en prod -->
<p>
  <i data-icon="github" role="img" aria-label="GitHub"></i>
</p>