Element <kbd> (od angielskiego keyboard) to semantyczny tag HTML służący do oznaczania tekstu reprezentującego dane wprowadzane przez użytkownika z klawiatury.
Najczęściej obejmuje skróty klawiszowe, nazwy klawiszy, komendy terminala oraz inne treści, które użytkownik powinien wpisać.
Przeglądarki domyślnie wyświetlają zawartość <kbd> czcionką o stałej szerokości znaków (monospace), co ułatwia odróżnienie jej od zwykłego tekstu.
Kiedy używać tagu <kbd>?
Element <kbd> sprawdza się w następujących sytuacjach:
- oznaczania poleceń, które użytkownik powinien wpisać w wierszu poleceń,
- wskazywania skrótów klawiszowych (np. Ctrl+C, Cmd+V),
- opisywania konkretnych klawiszy do naciśnięcia,
- prezentowania poleceń wydawanych głosowo w roli „wejścia” użytkownika,
- wskazywania nazw plików, które użytkownik powinien utworzyć lub znaleźć.
Użycie <kbd> dodaje czytelną informację semantyczną i poprawia dostępność treści, sygnalizując czytnikom ekranu, że dany fragment to dane wejściowe użytkownika.
Przykłady podstawowego użycia
Prosty przykład – polecenie terminala
Poniżej znajduje się minimalny fragment HTML z komendą wpisywaną przez użytkownika:
<p>Aby skopiować plik, wpisz komendę: <kbd>cp plik.txt kopia.txt</kbd></p>
W tym przypadku cały ciąg polecenia został objęty elementem <kbd> w celu podkreślenia, że jest to wejście użytkownika.
Skróty klawiszowe
Tak możesz zapisać skrót do kopiowania tekstu na różnych systemach:
<p>Aby skopiować tekst, naciśnij: <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows)</p>
<p>Na macOS użyj: <kbd>Cmd</kbd> + <kbd>C</kbd></p>
Nazwa pliku
Przykład z nazwą pliku, którą użytkownik powinien utworzyć:
<p>Dla strony głównej serwisu utwórz plik: <kbd>index.html</kbd></p>
Zagnieżdżanie elementów <kbd> – zaawansowane techniki
Możesz zagnieżdżać elementy <kbd> w sobie, aby precyzyjnie oznaczyć każdy klawisz i całą kombinację.
W takim wariancie wewnętrzny <kbd> odpowiada pojedynczemu klawiszowi, a zewnętrzny <kbd> obejmuje całą sekwencję wejścia; ułatwia to niezależne stylowanie klawiszy.
Poniżej przykład cięcia tekstu skrótem klawiaturowym:
<p>Aby wyciąć zaznaczony tekst, naciśnij <kbd><kbd>Ctrl</kbd>+<kbd>X</kbd></kbd></p>
Alternatywnie możesz zastosować prostszy zapis (mniej kontroli nad stylizacją poszczególnych klawiszy, ale większa czytelność kodu):
<p>Aby wkleić tekst, naciśnij <kbd>Ctrl + V</kbd></p>
Wybierz wariant zagnieżdżony, gdy chcesz oddzielnie stylować klawisze; wybierz wariant prosty, gdy priorytetem jest zwięzłość i czytelność.
Kombinowanie <kbd> z elementem <samp>
Łączenie <kbd> i <samp> pozwala odróżnić dane wejściowe użytkownika od danych wyjściowych systemu.
<kbd> wewnątrz <samp>
Tak oznaczysz dane wpisane przez użytkownika, które system następnie wyświetla w komunikacie:
<p>Komunikat błędu: <samp>Błąd: plik <kbd>dokument.txt</kbd> nie istnieje</samp></p>
W tym przykładzie fragment dokument.txt to treść wprowadzona przez użytkownika, część komunikatu systemowego.
<samp> wewnątrz <kbd>
Tak zapiszesz wejście realizowane poprzez elementy interfejsu (np. ścieżkę menu):
<p>Aby otworzyć plik, przejdź do <kbd><samp>Plik</samp> → <samp>Otwórz</samp></kbd></p>
Stylizowanie elementu <kbd> za pomocą CSS
Domyślny wygląd to krój monospace, ale możesz nadać mu styl wizualnych „klawiszy”.
Przykład 1 – styl przypominający przycisk
Użyj poniższych reguł CSS, aby stworzyć efekt małych klawiszy:
kbd {
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 6px;
font-family: monospace;
font-size: 14px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
HTML do podglądu efektu:
<p>Naciśnij <kbd>Enter</kbd>, aby zatwierdzić formularz.</p>
Efekt: tekst w <kbd> wygląda jak małe, czytelne przyciski klawiaturowe.
Przykład 2 – styl nowoczesny
Wersja o wyższym kontraście i pogrubieniu:
kbd {
background-color: #2c3e50;
color: #ecf0f1;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-weight: bold;
}
Przykład 3 – stylizacja zagnieżdżonych elementów
Jeżeli stosujesz zagnieżdżanie, możesz wyróżnić wewnętrzne klawisze innym kolorem:
kbd {
padding: 2px 5px;
border-radius: 2px;
border: 1px solid black;
}
kbd kbd {
border-color: red;
background-color: #ffe6e6;
}
W tym wariancie wewnętrzne <kbd> otrzymują czerwone obramowanie i delikatne tło.
Atrybuty i właściwości elementu <kbd>
Element <kbd> jest elementem liniowym (inline) i obsługuje:
- znaczniki obowiązkowe – wymagane są zarówno tag otwierający, jak i zamykający;
- atrybuty globalne – m.in.
id,class,title,style,dir,lang; - atrybuty zdarzeń – m.in.
onclick,onkeydown,onkeyupi pozostałe zdarzenia myszy/klawiatury; - interfejs DOM – element dostępny jest jako
HTMLElement.
Obsługa przeglądarek
Element <kbd> jest w pełni obsługiwany przez wszystkie nowoczesne przeglądarki, w tym Chrome, Firefox, Safari i Edge. Tag nie jest zdeprecjonowany i bezpiecznie można go używać w nowych projektach.
Praktyczne przykłady w kontekście
Dokumentacja API
Fragment dokumentacji, który jasno wskazuje, co należy wpisać w terminalu:
<h3>Jak wysłać żądanie GET?</h3>
<p>Użyj następującego polecenia:</p>
<code>curl <kbd>https://api.example.com/users</kbd></code>
Tutorial programowania
Kroki uruchomienia projektu z czytelnie oznaczonymi komendami:
- Otwórz terminal.
- Przejdź do folderu projektu:
cd moj-projekt. - Zainstaluj zależności:
npm install. - Uruchom projekt:
npm start.
Instrukcja dla użytkownika
Przykładowa ścieżka w interfejsie aplikacji może być zapisana jak poniżej:
- Kliknij
Ustawienia. - Wybierz
Bezpieczeństwo. - Naciśnij
Zmień hasło.
Różnica między <kbd>, <code> i <samp>
Choć te elementy bywają wizualnie podobne, pełnią inne role. Zestawienie różnic wygląda następująco:
| Element | Zastosowanie |
|---|---|
<kbd> |
Tekst wprowadzany przez użytkownika (dane wejściowe) |
<code> |
Fragment kodu komputerowego (np. kod źródłowy) |
<samp> |
Wynik działania programu (dane wyjściowe) |
Przykład użycia wszystkich trzech elementów razem:
<p>Wpisz polecenie: <kbd>echo "Hello"</kbd></p>
<p>Program wyświetli: <samp>Hello</samp></p>
<p>Kod programu: <code>console.log("Hello");</code></p>