<kbd>
- 25 января 2023
Тег <kbd>
используется для определения клавиатурного ввода, обычно для представления клавиши клавиатуры, комбинации клавиш или действия, связанного с клавишей.
Синтаксис тега <kbd>
<kbd>Клавиша</kbd>
Спецификация HTML
Тег <kbd>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <kbd>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Отображение сочетания клавиш:
<p>Чтобы скопировать выделенный текст, нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
Указание ввода с клавиатуры:
<p>Пожалуйста, введите ваше имя: <input type="text" name="name"> и нажмите <kbd>Enter</kbd>.</p>
Для чего использовать тег <kbd>
- Чтобы отобразить сочетание клавиш.
- Чтобы указать клавиши, необходимые для выполнения действия.
Атрибуты тега <kbd>
У тега <kbd>
нет специфических атрибутов.
Глобальные атрибуты
Тег <kbd>
поддерживает все глобальные атрибуты в HTML.
Ограничения
Для использования тега <kbd>
нет никаких ограничений.
Нюансы
Если тег <kbd>
используется для обёртывания нескольких символов, каждый из них будет отображаться как отдельная клавиша.
Поддержка браузерами
Тег <kbd>
поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Можно использовать тег <code>
для встроенного кода или тег <pre>
для обозначения предварительно отформатированного текста.
Чем заменить тег
Используйте комбинацию тегов <code>
и <span>
для достижения аналогичного эффекта.
Актуальность
Тег <kbd>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023