Перейти к содержимому

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

Компьютеры используют особое форматирование и стиль текста для отображения сообщений, связанных с кодами. В HTML существуют различные элементы для отображения компьютерного кода.

Тег HTML <code>

Тег HTML <code> вставляет фрагменты программного кода, переменные и т. д. в HTML-документ. В браузере код отображается моноширинным шрифтом меньшего размера.

Пример использования тега HTML <code>:

Пример использования тега HTML <code>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text.</p>
    <code>This is a program code.</code>
    <p>This is the continuation of the ordinary text.</p>
  </body>
</html>

Тег HTML <var>:

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

Пример использования тега HTML <var>:

Пример использования тега HTML <var>:

html
<!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> указывает ввод с клавиатуры. Он используется, когда необходимо отобразить текст, который следует ввести с клавиатуры пользователя.

Пример использования тега HTML <kbd>:

Пример использования тега HTML <kbd>

html
<!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> содержит вывод компьютерной программы или скрипта. По умолчанию он отображается моноширинным шрифтом.

Пример использования тега HTML <samp>:

Пример использования тега HTML <samp>:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text. <samp>But this is a sample text.</samp> Here is another ordinary text.</p>
  </body>
</html>

Практика

Какие теги используются в HTML для отображения компьютерного кода?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.