Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023