<kbd>
Une saisie effectuée par l’utilisateur : des touches, des raccourcis clavier et des commandes à saisir.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Enregistrez le fichier avec le raccourci <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>, et sur Mac <kbd><kbd>Cmd</kbd> + <kbd>S</kbd></kbd>.</p>
<p>Installez les dépendances : tapez <kbd>npm install</kbd> dans le terminal et appuyez sur <kbd>Entrée</kbd>.</p>Définition et utilisation
#L’élément <kbd> marque ce que saisit l’utilisateur : une seule touche, un raccourci clavier, un texte à taper, ou même une commande vocale. Les navigateurs l’affichent dans une police à largeur fixe.
Les raccourcis clavier s’écrivent par imbrication : le <kbd> extérieur englobe toute la combinaison, et les <kbd> intérieurs marquent chaque touche, par exemple <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.
Avec <samp>, il forme une paire qui décrit un dialogue avec l’ordinateur : <kbd> est votre commande, et <samp> est la réponse du programme. <code>, de son côté, marque le code source.
Par défaut, <kbd> ressemble à un simple texte à largeur fixe. Vous lui donnerez l’apparence d’une touche, avec une bordure et une ombre, en CSS.
Syntaxe
#<kbd>Entrée</kbd>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>
Vous fermerez la fenêtre d’aide avec la touche
<kbd style="padding: 2px 8px; border: 1px solid #64748b; border-bottom-width: 3px; border-radius: 6px;">Échap</kbd>.
</p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
kbd {
font-family: monospace;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez les raccourcis sous forme de
<kbd>imbriqués : un élément pour tout le raccourci et un pour chaque touche. - Donnez les variantes pour Windows et macOS si elles diffèrent.
- Écrivez les noms des touches comme ils apparaissent sur le clavier, par exemple Entrée, Maj ou Échap.
Entrées associées
#- <code>Un fragment de code informatique : le nom d’une variable, d’une fonction, d’une balise ou d’un fichier, ainsi qu’un court extrait.
- <samp>Un résultat type d’un programme : un message, une réponse de la console ou le texte d’une erreur.
- <var>Une variable dans une formule mathématique ou dans un programme, ainsi qu’un symbole substituable dans une commande.
- <pre>Un texte préformaté : il conserve les espaces, les tabulations et les retours à la ligne exactement comme dans le code.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.