--- title: ' : l''élément de saisie clavier' slug: Web/HTML/Element/kbd tags: - Element - HTML - Reference - Web translation_of: Web/HTML/Element/kbd --- {{HTMLRef}} L'élément HTML **``** 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 {{Glossary("user agent")}} rend par défaut le contenu d'un élément `` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML. `` 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. {{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}} ## Attributs Cet élément ne contient que [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). ## Notes d'utilisation D'autres éléments peuvent être utilisés en association avec `` afin de représenter certains scénarios plus spécifiques : - Imbriquer un élément `` dans un autre élément `` 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. - Imbriquer un élément `` dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après. - Imbriquer un élément `` dans un élément `` 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.. > **Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément ``. À 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. ## Exemples ### Exemple simple ```html

Utilisez la commande help macommande afin de consulter la documentation pour la commande "macommande".

``` #### Résultat {{EmbedLiveSample('Exemple_simple', 350, 80)}} ### Représenter les frappes de touches dans une saisie Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément `` dans un élément `` englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément ``. #### Sans mise en forme Commençons par analyser le code HTML. ##### HTML ```html

Vous pouvez également créer un nouveau document en utilisant le raccourci clavier Ctrl+N.

``` On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément `` et que chaque touche possèe son propre élément. ##### Résultat Sans mise en forme particulière, voici le résultat obtenu : {{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}} #### Avec style On peut alors ajouter un peu de CSS : ##### CSS On ajoute un règle pour les les éléments `` avec la classe  `"key"` afin de représenter les touches d'un clavier : ```css kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } ``` ##### HTML On met à jour le code HTML afin d'utiliser cette classe : ```html

Vous pouvez également créer un nouveau document en utilisant le raccourci clavier Ctrl+N.

``` ##### Résultat {{EmbedLiveSample("Avec_style", 650, 80)}} ### Saisie restituée En imbriquant un élément `` dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho). #### HTML ```html

S'il se produit une erreur de syntaxe, cet outil affichera la commande initialement saisie pour que vous la revoyez :

custom-git ad mon-nouveau-fichier.cpp
``` #### Résultat {{EmbedLiveSample("Saisie_restituée", 650, 100)}} ### Représenter les options de saisies à l'écran Imbriquer un élément `` dans un élément ``  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.). #### HTML Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire : ```html

Pour créer un nouveau fichier, sélectionner l'option Fichier⇒Nouveau document dans le menu.

N'oubliez pas de cliquer sur le bouton OK afin de confirmer que vous avez saisi le nom du nouveau fichier.

``` On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément `` qui contient le menu et le nom de l'élément du menu dans des éléments `` et ``, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran. #### Résultat {{EmbedLiveSample("Représenter_les_options_de_saisies_à_l'écran", 650, 120)}} ## Résumé technique
Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises {{no_tag_omission}}
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM {{domxref("HTMLElement")}}
Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.
## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ | | {{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}} | {{Spec2('HTML5 W3C')}} | Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier). | | {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs {{Compat("html.elements.kbd")}} ## Voir aussi - {{htmlelement("code")}} - {{htmlelement("samp")}}