<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><br></code> тег, чтобы добавить перенос строки.</p>
Отображение клавиш:
<p>Нажмите<code>Ctrl+C</code>, чтобы скопировать.</p>
HTML-теги:
<p>Используйте<code><code></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.
Актуальность
Тег <code>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023