Balise HTML `<kbd>`

La balise <kbd> définit une saisie au clavier. Elle est utilisée lorsqu'il est nécessaire d'afficher un texte que l'utilisateur doit saisir au clavier (pour diverses raisons). Cet élément est souvent sous-utilisé, mais il est très utile pour rédiger tout type de documentation utilisateur.

Dans le navigateur, le contenu de la balise est affiché dans une police monospace (tous les caractères ont la même largeur). L'une des raisons pour lesquelles <kbd> est sous-utilisé est que la police monospace est le style par défaut, ce qui le rend indistinguable d'un élément <code>. Cependant, ajouter du style aux éléments <kbd> peut les rendre plus explicites et utiles.

Vous pouvez utiliser d'autres éléments avec <kbd> pour ajouter de la précision :

Si vous insérez un élément <kbd> dans un autre <kbd>, une unité de saisie sera représentée comme une partie d'une unité plus grande.
Si vous insérez un élément <kbd> dans un élément <samp>, il représentera une saisie renvoyée à l'utilisateur par le système.
Si vous insérez un élément <samp> dans un élément <kbd>, il représentera une saisie basée sur un texte représenté par le système.

Syntaxe

La balise <kbd> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<kbd>) et la balise de fermeture (</kbd>). Toutefois, la balise de fermeture (</kbd>) n'est pas obligatoire.

Exemple de la balise HTML `<kbd>` :

La combinaison de touches pour enregistrer le document|Exemple de balise HTML <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Use the combination of these keys to save the document
      <kbd>
        <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>
    </p>
  </body>
</html>

Try it Yourself »

Résultat

Exemple de balise <code>{{ '003ckbd003e' }}</code>

TIP

La balise <kbd> n'est pas encore dépréciée, mais il est possible d'obtenir des effets plus riches en utilisant les propriétés CSS font-family ou border.

Exemple de la balise HTML `<kbd>` utilisée avec des propriétés CSS :

La combinaison de touches pour créer un nouveau document|Exemple de balise HTML <kbd>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      kbd.key {
        padding: 1px 2px 0;
        border-radius: 3px;
        border: 1px solid #666;
        border-color: #990000;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <p>
      Save the document by pressing
      <kbd>
         <kbd>Ctrl</kbd>+<kbd>S</kbd>
      </kbd>.
    </p>
    <p>
      Create a new document by pressing
      <kbd>
         <kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd>
      </kbd>.
    </p>
  </body>
</html>

Try it Yourself »

Attributs

La balise <kbd> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <kbd>

json

{
    "tag_name": "kbd"
}

Pratique

Quel est l'objectif et l'utilisation de la balise HTML <kbd> ?

Elle est utilisée pour définir une saisie utilisateur.Elle est utilisée pour insérer des images dans une page web.Elle est généralement affichée dans la police monospace par défaut du navigateur.Elle est utilisée pour le formatage du texte en italique.Elle est utilisée pour définir une partie du texte à saisir par l'utilisateur.Elle est utilisée pour créer des hyperliens.

Balise HTML <kbd> ​

Syntaxe ​

Exemple de la balise HTML <kbd> : ​

Résultat ​

Exemple de la balise HTML <kbd> utilisée avec des propriétés CSS : ​

Attributs ​