Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Contenu de groupement - Échafaudage

Le but de cette page est de tester tous les éléments liés au regroupement de contenu natif, s'ils sont alignés avec notre conception et sont conformes à nos directives d'accessibilité lorsqu'ils sont utilisés tels quels sans aucune personnalisation particulière. Ce qui suit inclut tous les éléments de regroupement de contenu dans la spécification HTML5 et quelques exemples ont été inspirés par le WHATWG section 4.4 en date d'avril 2025. Cette page peut ne pas contenir toutes les combinaisons possibles d'éléments de contenu de regroupement.

L'élément p

Ceci est du texte dans un paragraphe.

<p> ... </p>

L'élément hr 

<hr>

L'élément pre

Voici du texte préformaté
<pre> ... </pre>

L'élément blockquote

Ceci est un exemple de citation en bloc

<blockquote>
	<p> ... </p>
</blockquote>

Exemple avec auteur

« On ne se baigne jamais deux fois dans le même fleuve »

Héraclite, Fragments
<figure>
	<blockquote>
		<p>« On ne se baigne jamais deux fois dans le même fleuve »</p>
	</blockquote>
	<figcaption>Héraclite, <cite>Fragments</cite></figcaption>
</figure>

Exemple non-conforme

2025-04 - Le modèle de conception suivant était visible dans la page de contenu générique, mais contenait du code HTML non valide. Veuillez utiliser le code ci-dessus à la place.

<blockquote>
	<p>"<code>blockquote</code>"</p>
	<footer><code>footer</code> <cite><code>cite</code></cite></footer>
</blockquote>

L'élément ol

  1. Switzerland
  2. United Kingdom
  3. United States
  4. Norway
<ol>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ol>

L'élément ul

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

L'élément menu

  • Élément de liste
  • Ancre
    •  
    <menu>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</menu>

    Les éléments dl, dd et dt

    Terme 1
    la description 1
    Terme 2
    la description 2
    <dl>
	<dt>Terme 1</dt>
	<dd>la description 1</dd>
	<dt>Terme 2</dt>
	<dd>la description 2</dd>
</dl>

    Avec deux descriptions consécutives

    Auteurs
    Jean
    Luc
    Editeur
    Franck
    <dl>
	<dt>Auteurs</dt>
	<dd>Jean</dd>
	<dd>Luc</dd>
	<dt>Editeur</dt>
	<dd>Franck</dd>
</dl>

    Avec deux termes consécutifs

    color
    colour
    Une sensation qui (chez les humains) dérive de la capacité de la structure fine de l'œil pour en distinguer trois différemment analyses filtrées d’une vue.
    <dl>
	<dt lang="en-US">color</dt>
	<dt lang="en-GB">colour</dt>
	<dd>Une sensation qui (chez les humains) dérive de la capacité de
	la structure fine de l'œil pour en distinguer trois différemment
	analyses filtrées d’une vue.</dd>
</dl>

    Avec regroupement par <div>

    Heure de la dernière modification
    2004-12-23T23:33Z
    Intervalle de mise à jour recommandé
    années 60
    Auteurs
    Editeurs
    Robert Rothman
    Daniel Jackson
    <dl>
	<div>
		<dt>Heure de la dernière modification</dt>
		<dd>2004-12-23T23:33Z</dd>
	</div>
	<div>
		<dt>Intervalle de mise à jour recommandé</dt>
		<dd>années 60</dd>
	</div>
	<div>
		<dt>Auteurs</dt>
		<dt>Editeurs</dt>
		<dd>Robert Rothman</dd>
		<dd>Daniel Jackson</dd>
	</div>
</dl>

    Comme glossaire avec définition du terme <dfn>

    Appartement, n.
    Un contexte d'exécution regroupant un ou plusieurs threads avec un ou plus d'objets COM.
    Plat, n.
    Un pneu dégonflé.
    Accueil, n.
    Le répertoire de connexion de l'utilisateur.
    <dl>
	<dt><dfn>Appartement</dfn>, n.</dt>
	<dd>Un contexte d'exécution regroupant un ou plusieurs threads avec un ou
	plus d'objets COM.</dd>
	<dt><dfn>Plat</dfn>, n.</dt>
	<dd>Un pneu dégonflé.</dd>
	<dt><dfn>Accueil</dfn>, n.</dt>
	<dd>Le répertoire de connexion de l'utilisateur.</dd>
</dl>

    Les éléments figure et figcaption

    Exemple avec légende après le contenu figuratif groupé

    'C'était génial, et les toves glissants
    J'ai tourné et gimble dans le wabe ;
    Tous les mimsy étaient les borogoves,
    Et la maman est plutôt dépassée.

    Jabberwocky (premier couplet). Lewis Carroll, 1832-98

    Exemple avec légende avant le contenu figuratif groupé

    Jabberwocky (premier couplet). Lewis Carroll, 1832-98

    'C'était génial, et les toves glissants
    J'ai tourné et gimble dans le wabe ;
    Tous les mimsy étaient les borogoves,
    Et la maman est plutôt dépassée.

    <figure>
	<p>...<p>
	<figcaption>...</figcaption>
</figure>

    L'élément search

     
    <search>
	<form>
		...
	</form>
</search>

    L'élément div

    Plusieurs <div>

    Ceci est un titre dans un élément div

    Ceci est du texte dans un élément div.

    <div>
	<div>
		<div>
			<h4>Ceci est un titre dans un élément div</h4>
		</div>
		<div>
			<p>Ceci est du texte dans un élément div.</p>
		</div>
	</div>
</div>

    <div> vide

    <div></div>

    L'élément main

    Cette page utilise l'élément <main>.

    <body>
	<main>
		...
	</main>
</body>

    Détails de la page

    Date de modification :