Comment représenter une touche du clavier en HTML ?

La balise HTML <kbd></kbd> permet de spécifier qu'il s'agit d'une touche du clavier :

<kbd>Ctrl</kbd>

affiche un contenu du type : Ctrl

En HTML, pour représenter une touche du clavier, vous pouvez utiliser l'élément <kbd>. Cet élément est utilisé pour indiquer une saisie clavier. Le contenu de l'élément <kbd> est généralement présenté dans une police monospace par les navigateurs, ce qui le distingue visuellement du texte normal.

Voici un exemple de code HTML utilisant l'élément <kbd> pour représenter une touche du clavier :

<p>Pour sauvegarder votre document, appuyez sur <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Ce code affichera un paragraphe avec les touches "Ctrl" et "S" mises en évidence pour indiquer qu'il s'agit de touches du clavier.

Si vous souhaitez styliser davantage l'apparence des touches, vous pouvez ajouter du CSS pour personnaliser leur apparence. Par exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Représenter une touche du clavier</title>
    <style>
        kbd {
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            display: inline-block;
            padding: 2px 5px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <p>Pour sauvegarder votre document, appuyez sur <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
</body>
</html>

Avec ce code CSS ajouté, les éléments <kbd> auront une apparence plus distincte, similaire à des touches de clavier dans une interface utilisateur. Voici l'exemple en ligne :