Élément HTML <kbd> : l'élément de saisie clavier

Exemple interactif

<p>
  Veuillez appuyer sur <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>R</kbd> pour
  réactualiser une page MDN.
</p>

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

<kbd> peut être imbriqué de différentes façons avec l'élément HTML <samp> (résultat d'exemple) pour représenter diverses formes de saisie ou de sortie selon les indices visuels.

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

D'autres éléments peuvent être utilisés en association avec <kbd> afin de représenter certains scénarios plus spécifiques :

• Imbriquer un élément <kbd> dans un autre élément <kbd> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. Représenter les frappes de touches dans une saisie ci-après.
• Imbriquer un élément <kbd> dans un élément <samp> permet d'indiquer que la saisie a été restituée (echo) à l'utilisateur·ice. Cf. Saisie restituée, ci-après.
• Imbriquer un élément <samp> dans un élément <kbd> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de boutons affichés à l'écran). Cf. Représenter les options de saisies à l'écran ci-après.

Exemples

Exemple simple

<p>
  Utilisez la commande <kbd>help macommande</kbd> afin de consulter la
  documentation pour la commande "macommande".
</p>

Résultat

Représenter les frappes de touches dans une saisie

Afin de décrire une saisie constituée de plusieurs touches, on imbrique plusieurs élément <kbd> dans un élément <kbd> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue est représentée par son propre élément <kbd>.

Sans mise en forme

Commençons par analyser le code HTML.

HTML

<p>
  Vous pouvez également créer un nouveau document en utilisant le raccourci
  clavier
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
  >.
</p>

On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <kbd> et que chaque touche possède son propre élément.

Résultat

Sans mise en forme particulière, voici le résultat obtenu :

Avec mise en forme

On peut alors ajouter un peu de CSS :

CSS

On ajoute un règle pour les les éléments <kbd> avec la classe "key" afin de représenter les touches d'un clavier :

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

On met à jour le code HTML afin d'utiliser cette classe :

<p>
  Vous pouvez également créer un nouveau document en utilisant le raccourci
  clavier <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
  >.
</p>

Résultat

Saisie restituée

En imbriquant un élément <kbd> dans un élément <samp>, on peut représenter une saisie qui est restituée à l'utilisateur·ice (à la façon d'un écho).

HTML

<p>
  S'il se produit une erreur de syntaxe, cet outil affiche la commande
  initialement saisie pour que vous la revoyez&nbsp;:
</p>
<blockquote>
  <samp><kbd>custom-git ad mon-nouveau-fichier.cpp</kbd></samp>
</blockquote>

Résultat

Représenter les options de saisies à l'écran

Imbriquer un élément <samp> dans un élément <kbd> représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).

HTML

Ainsi, si on souhaite expliquer comment choisir l'option « Nouveau document » dans le menu « Fichier » avec un document HTML, on peut écrire :

<p>
  Pour créer un nouveau fichier, sélectionner l'option
  <kbd
    ><kbd><samp>Fichier</samp></kbd
    >⇒<kbd><samp>Nouveau document</samp></kbd></kbd
  >
  dans le menu.
</p>

<p>
  N'oubliez pas de cliquer sur le bouton
  <kbd><samp>OK</samp></kbd> afin de confirmer que vous avez saisi le nom du
  nouveau fichier.
</p>

On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <kbd> qui contient le menu et le nom de l'élément du menu dans des éléments <kbd> et <samp>, indiquant que la saisie se fait par l'intermédiaire de quelque chose présenté à l'écran.

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément <code>