Tag HTML <kbd>

Le tag <kbd> spécifie le nom des clés ou le texte saisi sur le clavier. Le contenu du tag dans le navigateur est affiché en police monospace (tous les caractères ont la même largeur).

Syntaxe

Le tag<kbd> est apparié, le tag fermant (</kbd>) est requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p>Utilisez la combinaison de ces touches pour enregistrer le document<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>
   </body>
</html>

Résultat

Le tag <kbd> n'est pas encore obsolète, Cependant, il est possible d’obtenir des effets plus riches à l’aide des propriétés CSS font-family or font-familyborder.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Enregistrez le document en apuyant <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
    <p>Créez un nouveau document en apuyant <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
    </p>
  </body>
</html>

Résultat

Attributs

Le tag <kbd> supporte les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <kbd> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <kbd>:

Coloration du texte dans le tag HTML <kbd>:

Styles de mise en page du texte pour la tag HTML <kbd>:

Autres propriétés utiles pour le tag HTML <kbd>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées