Элементы для кода в HTML

Элементы HTML для компьютерного кода

В HTML есть несколько элементов для отображения пользовательского ввода и компьютерного кода, таких как <kbd>, <samp>, <code> и <var>.

HTML <kbd> для ввода с клавиатуры

Элемент <kbd> отмечает ввод с клавиатуры. Его содержимое отображается моноширинным шрифтом браузера по умолчанию.

Пример

Сочетание клавиш, отмеченное с помощью <kbd>.

Страница, использующая элемент kbd для обозначения ввода с клавиатуры: «Save the document by pressing Ctrl + S», где Ctrl + S — ввод с клавиатуры.

> Результат: полная HTML-страница

Prompt

Страница, использующая элемент kbd для обозначения ввода с клавиатуры: «Save the document by pressing Ctrl + S», где Ctrl + S — ввод с клавиатуры.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kbd</title>
</head>
<body>

<p>Сохраните документ, нажав <kbd>Ctrl + S</kbd></p>

</body>
</html>

HTML <samp> для вывода программы

Элемент <samp> отмечает пример вывода компьютерной программы. Его содержимое отображается моноширинным шрифтом браузера по умолчанию.

Пример

Пример вывода программы, отмеченный с помощью <samp>.

Страница, использующая элемент samp для обозначения примера вывода программы: сообщение «File not found.», затем «Press F1 to continue» с переносом строки.

> Результат: полная HTML-страница

Prompt

Страница, использующая элемент samp для обозначения примера вывода программы: сообщение «File not found.», затем «Press F1 to continue» с переносом строки.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samp</title>
</head>
<body>

<p>Сообщение от моего компьютера:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

</body>
</html>

HTML <code> для компьютерного кода

Элемент <code> отмечает фрагмент компьютерного кода. Его содержимое отображается моноширинным шрифтом браузера по умолчанию.

Пример

Фрагмент кода, отмеченный с помощью <code>.

Страница, использующая элемент code для отображения фрагмента компьютерного кода: x = 5; y = 6; z = x + y;

> Результат: полная HTML-страница

Prompt

Страница, использующая элемент code для отображения фрагмента компьютерного кода: x = 5; y = 6; z = x + y;

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент Code</title>
</head>
<body>

<code>
x = 5;
y = 6;
z = x + y;
</code>

</body>
</html>

Сохранение переносов строк

Элемент <code> не сохраняет лишние пробелы и переносы строк. Чтобы сохранить их, поместите элемент <code> внутрь элемента <pre>.

Пример

Код внутри <pre>, сохраняющий переносы строк.

Страница, которая помещает элемент code внутрь элемента pre, чтобы сохранить лишние пробелы и переносы строк, отображая x = 5; y = 6; z = x + y; на отдельных строках.

> Результат: полная HTML-страница

Prompt

Страница, которая помещает элемент code внутрь элемента pre, чтобы сохранить лишние пробелы и переносы строк, отображая x = 5; y = 6; z = x + y; на отдельных строках.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code внутри Pre</title>
</head>
<body>

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

</body>
</html>

HTML <var> для переменных

Элемент <var> отмечает переменную в программировании или в математическом выражении. Его содержимое обычно отображается курсивом.

Пример

Переменные, отмеченные с помощью <var> в предложении.

Страница, использующая элемент var для обозначения переменных в предложении: площадь треугольника равна 1/2 x b x h, где b — основание, а h — вертикальная высота.

> Результат: полная HTML-страница

Prompt

Страница, использующая элемент var для обозначения переменных в предложении: площадь треугольника равна 1/2 x b x h, где b — основание, а h — вертикальная высота.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Элемент Var</title>
</head>
<body>

<p>Площадь треугольника равна: 1/2 x <var>b</var> x <var>h</var>, где <var>b</var> — основание, а <var>h</var> — высота.</p>

</body>
</html>

Итоги главы

Подведём итог: элемент <kbd> отмечает ввод с клавиатуры, <samp> отмечает пример вывода программы, <code> отмечает фрагмент кода, <var> отмечает переменную, а <pre> отмечает предварительно отформатированный текст.