HTML-элементы компьютерного кода
Изучите элементы HTML code, kbd, samp, var и pre: семантику, когда применять каждый и паттерн многострочного блока кода.
HTML предоставляет небольшое семейство элементов для разметки текста, связанного с компьютером: исходный код, вводимые пользователем данные, вывод программы и переменные. По умолчанию все они отображаются моноширинным шрифтом, однако они не взаимозаменяемы — каждый несёт собственный смысл. Выбор правильного элемента сообщает браузерам, поисковым системам и особенно программам чтения с экрана какой именно компьютерный текст перед ними.
На этой странице рассматривается, когда и как использовать каждый элемент:
<code>— фрагмент компьютерного кода<kbd>— текст, который пользователь вводит с клавиатуры<samp>— пример вывода программы<var>— переменная или заполнитель<pre>— предварительно отформатированный текст, сохраняющий пробелы и переносы строк- Канонический паттерн
<pre><code>для многострочных блоков кода
Почему семантика важна
Поскольку эти теги выглядят почти одинаково на экране, возникает соблазн использовать тот, который первым приходит на ум. Не поддавайтесь этому. Визуальный стиль — лишь умолчание, которое можно изменить через CSS в любой момент. Смысл же изменить так легко не получится.
Программа чтения с экрана может по-разному озвучивать содержимое <kbd> и <samp>, поисковые системы используют разметку для понимания страницы, а другие разработчики, читающие ваш HTML, опираются на эти теги, чтобы понять, является ли Ctrl + C сочетанием клавиш (<kbd>) или строкой, выведенной программой (<samp>). Используйте элемент, соответствующий смыслу, а затем стилизуйте его как угодно.
Тег HTML <code>
Тег HTML <code> помечает встроенный фрагмент компьютерного кода — имя функции, тег, CSS-свойство, команду оболочки и т. д. Он не означает «переменная»; для переменных используйте <var>. Браузеры отображают содержимое <code> моноширинным шрифтом.
Сам по себе <code> предназначен для коротких встроенных фрагментов. Для многострочных блоков оберните его в <pre> (см. ниже).
Пример тега HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>Тег HTML <var>
Тег <var> определяет переменную в математическом выражении или программном контексте — например, x и y в уравнении или имя параметра в прозе. Это правильный элемент для переменных (частая точка путаницы с <code>). Браузеры обычно отображают его курсивом.
Пример тега HTML <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>Тег HTML <kbd>
Тег <kbd> помечает ввод с клавиатуры — текст или клавиши, которые пользователь должен набрать или нажать. Используйте его для сочетаний клавиш (Ctrl + V), команд, которые читатель должен ввести, и отдельных клавиш. По умолчанию отображается моноширинным шрифтом.
Пример тега HTML <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>Тег HTML <samp>
Тег <samp> помечает пример вывода компьютерной программы или скрипта — текст, который программа печатает в ответ, в отличие от самого кода (<code>) или того, что вы вводите (<kbd>). По умолчанию отображается моноширинным шрифтом.
Удобный способ запомнить разницу: <kbd> — это то, что входит, <samp> — то, что выходит.
Пример тега HTML <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>Тег HTML <pre>
Тег <pre> определяет предварительно отформатированный текст. В отличие от обычного HTML, браузер сохраняет каждый пробел, табуляцию и перенос строки точно так, как они написаны в исходном коде, и отображает содержимое моноширинным шрифтом. Это делает <pre> идеальным для ASCII-арта, таблиц фиксированной ширины и — чаще всего — блоков кода, в которых необходимо сохранить отступы и переносы строк.
Сам по себе <pre> не несёт значения «это код»; он лишь управляет форматированием. Чтобы выразить, что предварительно отформатированный текст является кодом, сочетайте его с <code>.
Пример тега HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Многострочные блоки кода с <pre> и <code>
Для блока исходного кода, занимающего несколько строк, канонический рекомендуемый паттерн — вложить <code> внутрь <pre>. <pre> сохраняет пробелы и переносы строк; <code> добавляет семантику, указывая, что содержимое является кодом. Вместе они представляют стандартный способ отображения блока кода в HTML.
Пример <pre> с <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Обратите внимание, что содержимое <code> начинается сразу после открывающего тега и заканчивается прямо перед закрывающим. Любые пробелы или переносы строк, оставленные между <pre> и <code>, также будут отрендерены, так как <pre> сохраняет все пробельные символы.
Выбор правильного элемента
| Элемент | Значение | Типичное применение |
|---|---|---|
<code> | Фрагмент кода | Встроенное имя функции, тег или команда |
<kbd> | Ввод с клавиатуры | Сочетания клавиш и текст, вводимый пользователем |
<samp> | Пример вывода программы | Текст, выводимый программой |
<var> | Переменная | x в уравнении, имя параметра |
<pre> | Предварительно отформатированный текст | Многострочные блоки; сохраняет пробелы |