The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

<kbd> may be nested in various combinations with the <samp> (Sample Output) element to represent various forms of input or input based on visual cues.

Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLElement
Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface HTMLSpanElement pour cet élément.

Attributs

Cet élément ne contient que 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. 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..

Note : Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <kbd>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.

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 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

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 (à 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

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 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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<kbd>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<kbd>' dans cette spécification.
Recommendation Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).
HTML 4.01 Specification
La définition de '<kbd>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1
Notes
Support complet 1
Notes
Notes Before Firefox 4, creating a <kbd> element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement.
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, edspeedy, marie-ototoi, wakka27, tregagnon
Dernière mise à jour par : SphinxKnight,