<kbd> : l'élément de saisie clavier
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'élément HTML <kbd>
représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le user agent rend par défaut le contenu d'un élément <kbd>
en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.
<kbd>
peut être imbriqué dans diverses combinaisons avec <samp>
(Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.
Exemple interactif
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
Résumé technique
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.
|
Spécifications
Specification |
---|
HTML Standard # the-kbd-element |
Compatibilité des navigateurs
BCD tables only load in the browser