Les listes

La liste simple (<ul> et <li>)

<ul>
  <li>Le HTTP</li>
  <li>Le HTML</li>
  <li>Le CSS</li>
  <li>Le JavaScript</li>
</ul>

• Le HTTP
• Le HTML
• Le CSS
• Le JavaScript

La liste ordonnée (<ol> et <li>)

<ol>
  <li>Le HTTP</li>
  <li>Le HTML</li>
  <li>Le CSS</li>
  <li>Le JavaScript</li>
</ol>

1. Le HTTP
2. Le HTML
3. Le CSS
4. Le JavaScript

La liste de description (<dl>, <dt> et <dd>)

L’élément HTML <dl> représente une liste de descriptions sous la forme d’une liste de paires associant des termes (fournis par des éléments <dt>) et leurs descriptions ou définitions (fournies par des éléments <dd>). On utilisera par exemple cet élément pour implémenter un glossaire.

Ces balises sont méconnus, mais rendent pourtant bien service par exemple pour ordonner une liste de caractéristiques.

<dl>
  <dt>Nom</dt>
  <dd>Zappa</dd>

  <dt>Prénom</dt>
  <dd>Frank</dd>

  <dt>Caractéristique</dt>
  <dd>génie</dd>
</dl>

Nom

Zappa

Prénom

Frank

Caractéristique

génie

Voir sur MDN

Accessibilité

Les balises <ul> et <ol> autorisent les rôles ARIA suivant:

• directory
• group
• listbox
• menu
• menubar
• radiogroup
• tablist
• toolbar
• tree
• presentation

La balise <li> autorise les rôles ARIA suivant:

• menuitem
• menuitemcheckbox
• menuitemradio
• option
• presentation
• radio
• separator
• tab
• treeitem

La balise <dl> autorise les rôles ARIA suivant:

• group
• list
• none
• presentation

La balise <dt> autorise le rôle ARIA suivant:

• listitem

La balise <dd> n’autorise aucun rôle ARIA.