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

Тег <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-элементы <, > или &, то их нужно экранировать с помощью &lt;, &gt; или &amp;.
  • Если тег используется для отображения кода с отступом, то пробелы или табуляции, используемые для отступа, могут привести к тому, что код переместится на следующую строку (если элемент контейнера недостаточно широк).

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

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

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

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

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

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

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

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

Актуальность

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


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


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

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

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

<div>

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

  • 25 января 2023

<dl>

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

  • 25 января 2023

<option>

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

  • 25 января 2023

<ul>

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

  • 25 января 2023

<video>

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

  • 25 января 2023

<datalist>

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

  • 25 января 2023

<caption>

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

  • 25 января 2023