HTML тег <code>
Тег <code> используется для вставки строк программного кода. Описание тега, атрибуты и примеры применения.
Тег <code> используется для разметки фрагмента компьютерного кода — имени переменной, вызова функции, фрагмента исходного кода программы или любого текста, который пользователь должен ввести или прочитать как код. В браузере содержимое отображается моноширинным шрифтом (шрифтом, в котором все символы имеют одинаковую ширину). По умолчанию тег <code> является строчным элементом.
Тег <code> является семантическим: он сообщает браузерам, вспомогательным технологиям и поисковым системам, что заключённый текст является кодом, а не обычным текстом. Именно это смысловое значение и является причиной его использования — моноширинное оформление лишь стандартное представление по умолчанию, которое можно переопределить с помощью CSS.
На этой странице рассматривается поведение <code> самостоятельно, причина необходимости оборачивать многострочный код в <pre>, ловушка с экранированием HTML при отображении угловых скобок, соглашение о подсветке синтаксиса, а также случаи, когда <code> использовать не следует.
Синтаксис
Тег <code> используется парно. Содержимое записывается между открывающим (<code>) и закрывающим (</code>) тегами.
Пример HTML тега <code>:
HTML тег <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Запустите приведённый выше пример в редакторе Try it: текст внутри <code> располагается на одной строке с окружающими абзацами и отображается моноширинным шрифтом — точно как любой другой строчный элемент.
Почему <code> сворачивает пробельные символы
Как и большинство HTML-элементов, <code> следует стандартным правилам обработки пробелов: последовательности пробелов, табуляций и переносов строк сворачиваются в один пробел. Для одного токена (<code>let x = 10;</code>) это нормально, но как только вы вставляете многострочный фрагмент, возникают проблемы:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>В браузере это отобразится как одна длинная строка — function greet(name) { return "Hello, " + name; } — потому что все переносы строк и отступы сожмутся до одинарных пробелов.
Чтобы сохранить переносы строк и отступы, оберните <code> в элемент <pre> («preformatted» — предварительно отформатированный). <pre> сохраняет пробелы в точности так, как они написаны, а вложенный <code> сохраняет семантическое значение. <pre><code>…</code></pre> — стандартная комбинация для любого блока кода длиннее одной строки.
Пример HTML тега <code> внутри HTML тега <pre>:
Пример HTML тега <code> внутри HTML тега <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Экранирование <, > и & внутри <code>
Очень распространённая задача — отобразить HTML сам по себе внутри блока <code>, но браузер не знает, что ваш <div> предназначен для отображения, а не для выполнения. Если написать буквальный символ < или >, браузер попытается распознать его как тег, и ваш пример тихо исчезнет. То же самое касается &, который начинает символьную ссылку.
Необходимо заменить эти символы их HTML-сущностями:
| Символ | Сущность | Значение |
|---|---|---|
< | < | меньше |
> | > | больше |
& | & | амперсанд |
Чтобы отобразить текст <a href="#">, нужно написать:
<code><a href="#"></code>А чтобы показать if (a && b):
<code>if (a && b)</code>Забыть экранировать & — самая незаметная ошибка: © отобразится как символ © вместо буквального текста. Если сомневаетесь, экранируйте каждый <, > и &.
Пример HTML тега <code> со свойствами CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Класс language-* для подсветчиков синтаксиса
Обычный <code> не знает, на каком языке программирования написано его содержимое, поэтому самостоятельно раскрасить ключевые слова, строки и комментарии он не может. Библиотеки подсветки синтаксиса, такие как Prism и highlight.js, решают эту задачу с помощью соглашения об именах классов: к элементу <code> (обычно внутри <pre>) добавляется класс language-<name>, библиотека сканирует страницу, считывает класс и применяет нужные цвета.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Здесь language-js указывает подсветчику обрабатывать содержимое как JavaScript. Другие распространённые значения — language-css, language-html и language-python. Класс носит чисто информационный характер для подсветчика — элемент <code> сохраняет своё семантическое значение, даже если ни один подсветчик не загружен. (Обратите внимание на => в примере выше: даже внутри выделенного блока > по-прежнему нужно экранировать, чтобы стрелочная функция отображалась корректно.)
Когда не следует использовать <code>
<code> предназначен для содержимого, которое действительно является кодом. Не используйте его только ради моноширинного шрифта:
- Ввод с клавиатуры, который должен нажать пользователь, → используйте
<kbd>, например<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Вывод программы / примеры результатов → используйте
<samp>. - Переменная или заполнитель в математике или тексте → используйте
<var>. - Чисто декоративный моноширинный текст без смыслового значения кода → используйте
<span>и оформите его с помощью CSS. Применение здесь<code>вводит в заблуждение программы чтения с экрана и поисковые системы.
Выбор правильного элемента делает разметку честной: тег описывает что представляет собой текст, а CSS определяет как он выглядит.
Связанные теги
<pre>— сохраняет пробельные символы; оберните в него<code>для многострочных блоков.<kbd>— ввод с клавиатуры, который вводит пользователь.<samp>— пример вывода программы.<var>— имя переменной или заполнителя.
Атрибуты
Тег <code> поддерживает глобальные атрибуты и атрибуты событий.
Например, можно использовать атрибут title для добавления всплывающей подсказки: <code title="Variable declaration">let x = 10;</code>.