<code>

25 января 2023

Что делает тег

Тег <code> используется для выделения фрагмента кода, который должен отображаться моноширинным шрифтом и сохранять пробельные символы и переносы строк.

Синтаксис тега <code>

<code>const greeting = 'Привет, мир!';</code>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <code> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Отображение кода:

<p>Приведём фрагмент кода:</p>
<code>
function sum(a, b) {
  return a + b;
}
</code>

Перечисление переменных:

<p>Вы можете объявить переменные с помощью ключевых слов <code>var</code>, <code>let</code> или <code>const</code>.</p>

Встроенный код:

<p>Используйте <code>&lt;br&gt;</code> тег, чтобы добавить перенос строки.</p>

Отображение клавиш:

<p>Нажмите<code>Ctrl+C</code>, чтобы скопировать.</p>

HTML-теги:

<p>Используйте<code>&lt;code&gt;</code> тег, чтобы отобразить код.</p>

URL:

<p>Зайдите на сайт <code>https://example.com</code>.</p>

Для чего использовать тег <code>

Отобразить фрагменты кода на веб-странице.
Отформатировать код моноширинным шрифтом с сохранением пробелов и переносов строк.
Выделить код. Используйте тег с библиотекой подсветки синтаксиса, чтобы показать цветную кодировку синтаксиса.
Отобразить сочетания клавиш или комбинаций.
Показать имена переменных, функции или методы.
Выделить URL-адрес или фрагменты кода, содержащие URL-адреса.

Атрибуты тега <code>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Элемент <code> не следует использовать для форматирования текста типографским способом. Тег предназначен для отображения компьютерного кода, а не для обычного текста. Кроме того, <code> не нужно использовать для синтаксиса разметки — вместо него следует использовать элемент <pre>.

Нюансы

Если <code> содержит HTML-элементы <, > или &, то их нужно экранировать с помощью <, > или &.
Если тег используется для отображения кода с отступом, то пробелы или табуляции, используемые для отступа, могут привести к тому, что код переместится на следующую строку (если элемент контейнера недостаточно широк).

Поддержка браузерами

Тег поддерживается всеми современными браузерами.

Актуальная информация — на caniuse.

Альтернативные теги

Если вам нужно отобразить блоки предварительно отформатированного текста, используйте тег <pre>.

Чем заменить тег

Чтобы отобразить программный код, используйте тег <code>. Однако, если вам нужно отобразить синтаксис разметки или текст, который должен отображаться с форматированием фиксированной ширины, используйте тег <pre>.

Чтобы отобразить код с подсветкой синтаксиса, можете воспользоваться библиотеками Prism.js или highlight.js.