---
title: '<kbd> : l''élément de saisie clavier'
slug: Web/HTML/Element/kbd
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/kbd
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">L'élément HTML <code><strong>&lt;kbd&gt;</strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le </span>{{Glossary("user agent")}}<span class="seoSummary"> rend par défaut le contenu d'un élément <code>&lt;kbd&gt;</code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</span></p>

<p><code>&lt;kbd&gt;</code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

<p>D'autres éléments peuvent être utilisés en association avec <code>&lt;kbd&gt;</code> afin de représenter certains scénarios plus spécifiques :</p>

<ul>
 <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un autre élément <code>&lt;kbd&gt;</code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li>
 <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li>
 <li>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code>&lt;kbd&gt;</code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p>
</div>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_simple">Exemple simple</h3>

<pre class="brush: html">&lt;p&gt;Utilisez la commande &lt;kbd&gt;help macommande&lt;/kbd&gt; afin de consulter
 la documentation pour la commande "macommande".&lt;/p&gt;
</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p>

<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3>

<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code>&lt;kbd&gt;</code> dans un élément <code>&lt;kbd&gt;</code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code>&lt;kbd&gt;</code>.</p>

<h4 id="Sans_mise_en_forme">Sans mise en forme</h4>

<p>Commençons par analyser le code HTML.</p>

<h5 id="HTML">HTML</h5>

<pre class="brush: html">&lt;p&gt;
  Vous pouvez également créer un nouveau document
  en utilisant le raccourci clavier
  &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
&lt;/p&gt;</pre>

<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code>&lt;kbd&gt;</code> et que chaque touche possèe son propre élément.</p>

<h5 id="Résultat_2">Résultat</h5>

<p>Sans mise en forme particulière, voici le résultat obtenu :</p>

<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p>

<h4 id="Avec_style">Avec style</h4>

<p>On peut alors ajouter un peu de CSS :</p>

<h5 id="CSS">CSS</h5>

<p>On ajoute un règle pour les les éléments <code>&lt;kbd&gt;</code> avec la classe  <code>"key"</code> afin de représenter les touches d'un clavier :</p>

<pre class="brush: css">kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}</pre>

<h5 id="HTML_2">HTML</h5>

<p>On met à jour le code HTML afin d'utiliser cette classe :</p>

<pre class="brush: html">&lt;p&gt;
  Vous pouvez également créer un nouveau document
  en utilisant le raccourci clavier
  &lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
&lt;/p&gt;</pre>



<h5 id="Résultat_3">Résultat</h5>

<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p>

<h3 id="Saisie_restituée">Saisie restituée</h3>

<p>En imbriquant un élément <code>&lt;kbd&gt;</code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;
  S'il se produit une erreur de syntaxe, cet outil affichera
  la commande initialement saisie pour que vous la revoyez :
&lt;/p&gt;
&lt;blockquote&gt;
  &lt;samp&gt;&lt;kbd&gt;custom-git ad mon-nouveau-fichier.cpp&lt;/kbd&gt;&lt;/samp&gt;
&lt;/blockquote&gt;</pre>

<h4 id="Résultat_4">Résultat</h4>

<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p>

<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3>

<p>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code>  représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p>

<h4 id="HTML_4">HTML</h4>

<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p>

<pre class="brush: html">&lt;p&gt;
  Pour créer un nouveau fichier, sélectionner l'option
  &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;Fichier&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;Nouveau
  document&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt; dans le menu.
&lt;/p&gt;

&lt;p&gt;
  N'oubliez pas de cliquer sur le bouton
  &lt;kbd&gt;&lt;samp&gt;OK&lt;/samp&gt;&lt;/kbd&gt; afin de confirmer
  que vous avez saisi le nom du nouveau fichier.
&lt;/p&gt;</pre>

<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code>&lt;kbd&gt;</code> qui contient le menu et le nom de l'élément du menu dans des éléments <code>&lt;kbd&gt;</code> et <code>&lt;samp&gt;</code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p>

<h4 id="Résultat_5">Résultat</h4>

<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Tous les rôles sont autorisés.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLElement")}}<br>
    Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.kbd")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{htmlelement("code")}}</li>
 <li>{{htmlelement("samp")}}</li>
</ul>