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

Cet élément ne contient que les attributs universels.

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. 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 bouttons affichés à l'écran). Cf. Représenter les options de saisies à l'écran ci-après.

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

Résultat

Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <kbd> dans un élément <kbd> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera 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èe son propre élément.

Résultat

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

Avec style

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.key {
  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 class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd
  >.
</p>

Résultat

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

HTML

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

Résultat

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 pourra é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 fera par l'intermédiaire de quelque chose présenté à l'écran.

Résultat

• <code>
• <samp>