Afficher des touches de clavier dans un document HTML

Si vous écrivez des documentations au format HTML, il peut être utile de symboliser des touches de clavier, par exemple lorsque l'utilisateur est invité à saisir une certaine combinaison de touches.

Voici un moyen simple de le faire en HTML:

Variante 1


<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
border: 1px solid #6f6f6f;
background-color: #cfcfcf;
border-radius: 0.2em;
font-weight: bold;
-moz-border-radius: 0.2em;
}
-->
</style>

Tapez <span class="touche">A</span> 
<span class="touche">&#8629;Entrée</span>



Ce qui donne:

Variante 2


En voici une variante avec un petit effet de relief:

<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
background-color: #dadada;
border-radius: 0.2em;
-moz-border-radius: 0.2em;
font-weight: bold;
border-style:outset;
border-width:2px;
}
-->
</style>

Tapez <span class="touche">A</span> 
<span class="touche">&#8629;Entrée</span>


Ce qui donne:


Caractères spéciaux


Si vous avez besoin d'autres symboles ou lettres, vous pouvez consulter les tables Unicode.
Cet article est régulièrement mis à jour par des experts sous la
direction de Jean-François Pillou, fondateur de CommentCaMarche
et directeur délégué au développement numérique du groupe Figaro.
Ce document intitulé « Afficher des touches de clavier dans un document HTML » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.