HTML тег <var>
Тег <var> описывает переменную в математическом выражении или программном контексте. Примеры использования.
Тег <var> описывает переменную в математическом выражении или программном контексте. Его содержимое обычно отображается курсивным начертанием текущего шрифта.
К другим элементам, используемым для описания технических частей документов в контекстах, где обычно применяется <var>, относятся:
- тег
<code>— определяет фрагмент кода компьютерной программы, - тег
<samp>— определяет пример вывода скрипта или компьютерной программы, - тег
<kbd>— определяет ввод с клавиатуры.
Если тег <var> ошибочно используется в оформительских, а не семантических целях, следует использовать либо <span> с соответствующим CSS, либо подходящий семантический тег из следующих: <q>, <em>, <i>.
Тег <var> не является устаревшим, однако с помощью CSS можно достичь лучших эффектов.
Синтаксис
Тег <var> является парным. Содержимое записывается между открывающим (<var>) и закрывающим (</var>) тегами.
Пример HTML тега <var>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Example <var>This is a variable</var>
</body>
</html>Когда использовать <var>
Используйте <var> для имени переменной — заполнителя, стоящего вместо значения. Он подходит для двух контекстов:
- Математические выражения. Буквы, обозначающие неизвестные или изменяющиеся величины, например
xиyв уравнении. - Программирование. Имя переменной, упоминаемой в тексте, например
countилиuserName.
Тег <var> легко спутать с соседними семантическими тегами. Выбирайте по смыслу, а не по внешнему виду текста:
| Тег | Применение | Пример |
|---|---|---|
<var> | Имя переменной или заполнитель | «Пусть n — количество пользователей.» |
<code> | Фрагмент кода компьютерной программы | «Вызовите getName() для получения значения.» |
<i> | Текст, выделяемый по несемантическим причинам (иностранное слово, мысль) | «зонд Voyager» |
Если нужно лишь курсивное оформление без особого смысла, используйте <i> или <span> со стилями вместо <var>.
Пример: переменные в уравнении
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The equation <var>x</var> + <var>y</var> = 10 has many solutions.</p>
<p>If <var>x</var> is 4, then <var>y</var> must equal 6.</p>
</body>
</html>Стилизация тега <var> с помощью CSS
По умолчанию браузеры отображают <var> курсивом. Поскольку это полноценный семантический элемент, его можно свободно перестилизовать, не изменяя смысла — например, убрать курсив и задать переменным отдельный цвет, чтобы они выделялись в техническом тексте:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
var {
font-style: normal;
font-family: monospace;
color: #0d6efd;
font-weight: 600;
}
</style>
</head>
<body>
<p>Solve for <var>x</var> when <var>y</var> = 12.</p>
</body>
</html>Доступность
Элемент <var> не имеет неявной роли ARIA, поэтому вспомогательные технологии не объявляют его содержимое как «переменную» — для программы чтения с экрана текст звучит так же, как окружающий текст. Элемент передаёт смысл авторам и инструментам стилизации, но не пользователям напрямую. Убедитесь, что роль переменной понятна из контекста, чтобы предложение по-прежнему имело смысл при прочтении вслух.
Атрибуты
Тег <var> поддерживает глобальные атрибуты и атрибуты событий.