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

HTML содержит несколько элементов для определения пользовательского ввода и компьютерного кода.

x = 2; y = 6; z = x + y;

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

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

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

Следующий пример указывает заданный текст как ввод с клавиатуры в документе:

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

Результат:

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

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

Этот пример определяет некоторый текст как образец вывода из компьютерной программы в документе:

<p>Сообщение с моего компьютера:</p>
<p><samp>Файл не найден.<br>Чтобы продолжить, нажмите F1</samp></p>

Результат:

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

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

Следующий пример определяет данный текст как компьютерный код в документе:

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

Результат:

Чтобы исправить это, вы можете поместить элемент <code> внутрь элемента <pre>:

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

Результат:

x = 2;
y = 6;
z = x + y;

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

Элемент HTML <var> используется для определения переменной в программировании или в математическом выражении. Содержимое внутри обычно отображается курсивом.

Следующий пример определяет заданный текст как переменные в документе:

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

Результат:

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

Справочник по тегам содержит дополнительную информацию об элементах HTML и их атрибутах.

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Семантические элементы HTML

Адаптивный веб-дизайн HTML ☚