Element HTML kbd reprezentuje dane wprowadzane przez użytkownika. Może to być tekst wpisywany za pomocą klawiatury, polecenie wiersza poleceń, skrót klawiszowy, jak również mogą to być polecenia wydawane głosowo.
Najprostszym przypadkiem użycia elementu kbd jest oznaczenie polecenia, które użytkownik ma gdzieś wpisać, np. w wierszu poleceń. Zobacz poniżej Prosty przykład użycia elementu kbd.
Elementy kbd można także zagnieżdżać. Wtedy wewnętrzny element kbd oznacza konkretny klawisz do naciśnięcia, a element zewnętrzny reprezentuje ogólnie fragment treści dotyczący wprowadzania danych do komputera. W ten sposób głównie można oznaczać skróty klawiszowe (zobacz poniżej przykład Oznaczanie skrótów klawiszowych).
Element kbd można także łączyć w różnych kombinacjach z elementem samp.
Element kbd zagnieżdżony w elemencie samp oznacza dane wprowadzone przez użytkownika, które są wyświetlane przez system. Może to być na przykład fragment komunikatu o błędzie zawierający tekst wpisany przez użytkownika, który ten błąd spowodował albo może to być wynik programu, w którym jest powtórzony tekst wpisany przez użytkownika. Zobacz poniżej przykład Element kbd w samp.
Natomiast element samp w elemencie kbd oznacza dane wejściowe wprowadzane za pomocą elementów interfejsu użytkownika systemu, czyli nazwy menu i ich elementów oraz nazwy przycisków. Zobacz poniżej przykład Element samp w kbd
Standardowo przeglądarki wyświetlają zawartość elementu kbd domyślną czcionką o stałej szerokości znaków.
Przykłady użycia elementu HTML kbd
Prosty przykład użycia elementu kbd
Za pomocą elementu kbd można oznaczać między innymi polecenia wpisywane przez użytkownika.
<p>Otwórz wiersz poleceń i wpisz polecenie <kbd>sudo apt-get install gedit</kbd>.</p>
Oznaczanie skrótów klawiszowych
Pojedyncze klawisze, które należy nacisnąć, jak na przykład w skrótach klawiszowych, można oznaczać na dwa sposoby — za pomocą indywidualnych elementów kbd oraz za pomocą elementów kbd zagnieżdżonych w nadrzędnym elemencie kbd. Spójrz na poniższe przykłady:
<p>Naciśnij kombinację klawiszy <kbd>Ctrl</kbd>+<kbd>C</kbd>.</p>
<p>Naciśnij kombinację klawiszy <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd>.</p>W pierwszym przypadku klawisze są oznaczone indywidualnie, a w drugim – są dodatkowo objęte nadrzędnym elementem kbd. Każda z tych metod jest równie dobra, ale pierwsza jest prostsza.
Ten przykład można jeszcze bardziej uprościć, jak poniżej:
<p>Naciśnij kombinację klawiszy <kbd>Ctrl + X</kbd>.</p>To też jest prawidłowy sposób oznaczania skrótów klawiszowych, choć w tym przypadku trudniej jest odnieść się za pomocą CSS tylko do samych klawiszy (z pominięciem znaku +). Powiedzmy, że mamy taki arkusz stylów:
kbd {
border-radius: 4px;
padding: 3px 3px 2px;
border: 1px solid #aaaaaa;
}W pierwszym przykładzie otrzymamy taki wynik: Naciśnij kombinację klawiszy Ctrl+C.
W trzecim przykładzie wynik będzie następujący: Naciśnij kombinację klawiszy Ctrl + X.
Przykład drugi nie będzie dobrze wyglądał przez zagnieżdżenie elementów kbd: Naciśnij kombinację klawiszy Ctrl+V. Można to jednak łatwo naprawić przez zmianę selektora CSS kbd na kbd > kbd.
Element kbd w samp
Element kbd wewnątrz elementu samp oznacza tekst wpisany przez użytkownika i wyświetlony przez komputer. Na przykład:
<p>Wpisz swoje imię i nazwisko po czym naciśnij klawisz <kbd>Enter</kbd>. Program wyświetli następujący napis: <samp>Wpisałeś <kbd>Jan Kowalski</kbd></samp>.</p>Element samp w kbd
Element samp w elemencie kbd oznacza nazwy menu i inne elementy interfejsu użytkownika programów:
<p>Wybierz kolejno pozycje <kbd><samp>Wstawianie</samp></kbd> > <kbd><samp>Obrazy</samp></kbd>.</p>Kontekst użycia
| Elementy nadrzędne | Elementy, w których można używać elementów treści syntagmatycznej |
|---|---|
| Elementy potomne | Elementy syntagmatyczne |
| Znaczniki | Znaczniki otwierający i zamykający są obowiązkowe |
| Interfejs DOM | HTMLElement |
Atrybuty obowiązkowe
Element kbd nie ma atrybutów obowiązkowych.
Atrybuty opcjonalne
Element kbd obsługuje atrybuty globalne i atrybuty zdarzeniowe.