Тег code отмечает в тексте короткий фрагмент компьютерного кода: название функции, команду, файл, свойство CSS. Браузер показывает его моноширинным шрифтом, но главное здесь смысл: этот кусок читают и переписывают буква в букву. Тег парный, закрывающий обязателен, собственных атрибутов у него нет, работают только глобальные. Для нескольких строк кода его помещают внутрь pre: code отвечает за смысл, а pre за пробелы и переносы строк.
<p>Метод <code>querySelector</code> ищет первый подходящий элемент.</p>В этой статье
Что считать кодом
Кодом считают то, что читатель может ввести или скопировать в файл, редактор или командную строку без правок: querySelector(), git status, index.html, margin: 0 auto, <section>. Название программы, слово «код» в обычном смысле и просто «техническое» слово кодом не считаются.
Соседние теги делят работу по смыслу: kbd отмечает то, что пользователь нажимает или вводит, samp - то, что программа выводит, var - переменную в формуле или описании. Всё остальное, что читается как код, относится к code.
<p>Откройте <code>index.html</code> и добавьте <code><section></code>.</p>Обратите внимание на <section> в примере: угловые скобки записаны особым образом. Зачем, объясняет следующий раздел.
Угловые скобки и амперсанд: почему тег пропадает
Браузер читает всё, что похоже на тег, как тег, в том числе внутри code. Если записать в код <b>текст</b> как есть, страница не покажет угловых скобок: слово станет жирным, а скобки и название тега исчезнут. Чтобы браузер вывел знак как обычный символ, его записывают через сущность - короткий код, который начинается с & и заканчивается точкой с запятой.
Достаточно запомнить три знака: < записывают как <, > как >, а сам амперсанд & как &. Последний нужен, потому что иначе записанный в коде © браузер превратит в значок ©.
<p>Тег <code><b></code> делает текст жирным, а запись <code>&copy;</code> даёт значок.</p>Пример: проверьте свой фрагмент
В поле уже есть пример, его можно менять. Первое окошко показывает, что получит читатель, если записать текст в код без замены, второе - с заменой знаков. Нижнее поле - готовая разметка для страницы.
Заменяйте все три знака сразу: так правило проще, чем помнить, где браузер простит пропуск.
Размер шрифта: откуда 13 px
По умолчанию у code шрифт monospace, и Chrome делает для него поправку: пока размер текста определяет сам браузер (его не задали вообще, указали 100% или 1em), код получается мельче остального текста, 13 px против 16. Если размер записан в пикселях, поправки нет, и код такой же, как текст вокруг.
Пример: четыре условия, четыре размера
Четыре одинаковые строки. В каждой подписано, как и что заданы, а внизу - размер текста и размер кода, которые определил браузер.
Чтобы размер не зависел от таких мелочей, укажите шрифт списком: как только в нём есть не только слово monospace, поправка исчезает. Запись monospace, monospace из двух одинаковых слов тоже работает.
code {
font-family: Consolas, "Courier New", monospace;
}Если код нужен мельче текста, задайте это явно: при тексте 16 px запись font-size: 0.9em даёт 14,4 px, и результат не меняется от того, как браузер выбирает размер сам.
Длинная строка: перенос или прокрутка
Внутри code пробелы работают как в обычном тексте: несколько подряд схлопываются в один, а строка разрывается там, где есть пробел. Поэтому команда с параметрами переносится сама, а длинное название без пробелов нет: document.querySelectorAll в узкой колонке выступает за её край. На телефоне колонка около двухсот пикселей, так что с такими названиями это случается часто.
Пример: как уместить длинное название
Колонка шириной 200 px. Кнопки переключают способ, под колонкой подписан результат. Число пикселей измерено в кадре.
Есть два способа. Первый - разрешить разрывать строку где угодно свойством overflow-wrap: anywhere. Второй - оставить строку целой и дать колонке полосу прокрутки: overflow-x: auto. Разрыв меняет только вид: скопированный текст остаётся целым.
code {
overflow-wrap: anywhere;
}Многострочный код с отступами в code не уместить: пробелы схлопнутся. Для него нужен pre.
Подсветка: тег сам не раскрашивает
Тег code не знает, на каком языке написан код, и ничего не раскрашивает. Цвета появляются, когда части кода оборачивают в span и задают им цвет через CSS. Библиотеки подсветки, например Prism и highlight.js, делают это сами: разбирают код и оборачивают каждую часть в span с нужным классом.
<code>margin: <span class="num">0</span> auto;</code>.num {
color: #b4452d;
}Язык принято указывать классом на самом code, например class="language-css". Атрибута для языка в стандарте нет, это соглашение: на него опираются библиотеки подсветки, в том числе Prism. Для одной короткой строки в тексте подсветка обычно лишняя, её применяют к длинным листингам.
Фон и отступы: как выделить код в тексте
Браузер оформляет code только шрифтом: ни фона, ни полей у него нет. Читателю проще заметить код, если добавить лёгкий фон, небольшие поля и скругление.
code {
background: #eef1f6;
padding: 2px 6px;
border-radius: 4px;
}
pre code {
background: none;
padding: 0;
}Второе правило нужно для кода внутри pre: без него у code появится собственный фон поверх фона блока, и получится плашка на плашке. Поля сверху и снизу у строчного элемента не раздвигают строки, поэтому абзац не разъезжается.
Остальное code берёт у окружения: в ссылке он сохраняет цвет ссылки, а в заголовке остаётся жирным и такого же размера, как сам заголовок.
Частые ошибки
Ошибки с этим тегом почти всегда сводятся к одному из двух: смысл тега путают со шрифтом или забывают про угловые скобки.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Тег внутри code записан как есть: <b> | Браузер принимает его за разметку, скобки и название тега исчезают | Записать < и >, амперсанд как & |
code ради моноширинного шрифта: в заголовке, в названии бренда | Тег обещает «это код», а там просто оформление | span с классом и font-family |
Многострочный код в одном code | Пробелы и переносы схлопываются, строки сливаются | Обернуть в pre: <pre><code>...</code></pre> |
Клавиша или ответ программы отмечены как code | Смысл теряется: это ввод или вывод, а не код | kbd для ввода, samp для вывода |
| Ожидают, что цвета появятся сами | code не раскрашивает код | span с классами или библиотека подсветки |
Фон задан на всех code и не снят внутри pre | Плашка на плашке в блоке кода | Правило pre code { background: none; padding: 0; } |
| Длинное название без пробелов в узкой колонке | Выступает за край, у страницы появляется лишняя ширина | overflow-wrap: anywhere или overflow-x: auto |
