Тег var отмечает переменную: букву в формуле, название параметра в описании кода или слово-заполнитель, которое читатель должен заменить своим значением. Тег парный, закрывающий обязателен, собственных атрибутов у него нет. Браузер выводит его курсивом и больше с ним ничего не делает: смысл тега нужен читателю, программам и стилям.
Где тег var нужен в формулах, в описании кода и в инструкциях, почему его не стоит путать с ключевым словом var в JS и функцией var() в CSS, как изменить его вид и какие ошибки встречаются чаще всего, - ответы ниже.
<p>Площадь равна
<var>a</var> × <var>b</var>.</p>В этой статье
- Тег var в HTML: что это и что он обозначает
- Тег var в формулах: какие буквы отмечать, индексы и степени
- Тег var в коде и инструкциях: параметры и подстановки рядом с code и kbd
- Что ещё называют var: ключевое слово JS и функция var() в CSS
- Стили тега var: курсив по умолчанию и как его изменить
- Тег var или code, i, em, span: как выбрать
- Частые ошибки с тегом var
Тег var в HTML: что это и что он обозначает
Спецификация HTML понимает переменную широко: это переменная в математическом выражении или в программе, идентификатор константы, символ физической величины, параметр функции или просто слово-заполнитель в тексте. Справка MDN (на английском) короче: название переменной в математическом выражении или в контексте программирования.
Например, в предложении «Если в ряду n кресел, то в зале из 12 рядов всего 12n мест» буква n - переменная: вместо неё можно записать любое число. Число 12 переменной не считается: оно не меняется.
Браузер выводит var курсивом (в Chrome font-style: italic) и больше ничего не добавляет: вес и цвет остаются как у окружающего текста, подчёркивания нет. В заголовке получается жирный курсив, в ссылке текст берёт цвет ссылки. При копировании в буфер попадает только текст без разметки.
Тег var в формулах: какие буквы отмечать, индексы и степени
В формуле в var записывают каждую переменную отдельно: букву, которая обозначает величину. Числа, знаки действий и постоянные величины остаются обычным текстом: 2 и π не переменные, потому что их значение не меняется.
<p>Длина окружности:
<var>C</var> = 2 × π × <var>r</var></p>Если у переменной есть индекс или степень, тег sub или sup работает вместе с var: индекс записывается сразу после буквы. Каждую букву отмечают своим тегом, даже когда они стоят рядом, как в записи mc2.
<var>x</var><sub>1</sub> + <var>x</var><sub>2</sub>
<var>E</var> = <var>m</var><var>c</var><sup>2</sup>При копировании такие записи склеиваются: степень окажется прямо за числом, и «mc²» превратится в «mc2». Подробнее об этом написано в разделе про копирование страницы про sup. Для громоздких формул с дробями и корнями подходит MathML, а var удобен для коротких формул внутри предложения.
Пример: что в записи переменная
Три записи. Нажимайте на слова и числа в рамках, а кадр покажет получившуюся разметку и проверит, все ли переменные отмечены и нет ли лишнего.
Тег var в коде и инструкциях: параметры и подстановки рядом с code и kbd
В описании кода var отмечает название параметра или переменной, о которой идёт речь. Название функции, ключевое слово и значение переменными не считаются, для них подходит тег code.
<p>Функция <code>area</code> принимает
параметр <var>r</var>.</p>Вторая частая задача - слово-заполнитель, то есть слово в инструкции, которое читатель должен заменить своим значением (по-английски placeholder). Команду вводят с клавиатуры, поэтому её оборачивают в kbd, а часть, которую нужно заменить, отмечают var.
<p>Введите
<kbd>cd <var>папка</var></kbd>.</p>Внутри kbd, samp и code тег var остаётся курсивным, хотя сами эти теги выводятся прямым моноширинным шрифтом. Поэтому заполнитель хорошо заметен: он единственный курсивный в строке.
Не путайте заполнитель и пример значения. В var записывают то, что читатель заменит своим (папка), а конкретное значение, которое он введёт (photos), остаётся в kbd.
Пример: инструкция с подстановкой
Выберите команду и впишите свои значения. Кадр покажет шаблон, в котором заполнитель отмечен тегом var, и готовую команду с вашими словами.
Что ещё называют var: ключевое слово JS и функция var() в CSS
Слово var встречается в трёх разных местах, и в поиске их смешивают. Это тег var в HTML, ключевое слово var в JS, которое объявляет переменную, и функция var() в CSS, которая читает значение пользовательского свойства. Между ними нет связи, общее только слово.
| Что это | Где записывается | Что делает | Пример |
|---|---|---|---|
var в HTML | В тексте страницы | Отмечает переменную или заполнитель, ничего не вычисляет | <var>x</var> |
var в JS | В скрипте | Объявляет переменную; чаще пишут let и const | var count = 0; |
var() в CSS | В стилях | Берёт значение пользовательского свойства и применяет его | color: var(--main-color); |
Тег var ничего не вычисляет и не создаёт переменную: значение из него скрипт не прочитает как переменную. Это только пометка в тексте.
Пример: тег, JS или CSS
Шесть записей. Выберите вариант, и кадр объяснит, что это за запись.
Стили тега var: курсив по умолчанию и как его изменить
В Chrome var по умолчанию выводится курсивом, а вес, цвет и размер остаются такими же, как у окружающего текста. Внутри code, kbd и samp курсив сохраняется, а шрифт остаётся моноширинным.
Оформление меняют в CSS. Например, переменную можно сделать моноширинной, выделить цветом или убрать курсив.
var {
font-family: monospace;
font-style: italic;
color: #5B4FD6;
}Убирать курсив без замены не стоит: читатель узнаёт переменную по особому виду. Если курсив убран, отличайте var цветом или шрифтом.
Пример: как выглядит var в разных окружениях
Выберите, где стоит var, и какой стиль задан. Кадр сравнивает вид var с окружающим текстом: начертание, шрифт, размер и цвет.
Тег var или code, i, em, span: как выбрать
Если нужен только курсив, тег var не подходит: справка MDN советует для оформления брать span со стилем или подходящий смысловой тег. Выбор зависит от того, что нужно сообщить.
| Тег | Что он отмечает | Когда выбрать |
|---|---|---|
var | Переменная или слово-заполнитель | Формула, описание кода, инструкция |
| code | Фрагмент кода | Название функции, ключевое слово, значение |
kbd | Ввод с клавиатуры | Команда или клавиша, которую вводит читатель |
| i | Термин, иностранное слово, мысль | Курсив без смысла переменной |
| em | Акцент, интонация | Слово читается с нажимом |
span | Ничего не сообщает | Нужен только вид: цвет, шрифт |
Частые ошибки с тегом var
Ошибки с этим тегом связаны с тем, что его используют ради курсива или отмечают им то, что переменной не является.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Курсив ради вида: <var>Внимание!</var> | Тег сообщает, что это переменная, а это предупреждение | strong для важности, span со стилем для вида |
Число в теге: <var>12</var> рядов | Число не меняется, значит, это не переменная | Оставить число обычным текстом |
Постоянная величина: 2 × <var>π</var> × <var>r</var> | Значение π не меняется | Отметить только r |
Название функции: <var>area</var>(r) | Название функции не переменная | <code>area</code> |
Ключевое слово JS: <var>var</var> count | Слово var в скрипте не имеет отношения к тегу | <code>var</code> |
Вся команда в теге: <kbd><var>cd папка</var></kbd> | Заменяется только слово «папка», а не вся команда | cd <var>папка</var> |
Вся формула в одном теге: <var>S = a × b</var> | Отметки не отличают переменные от знаков действий | Каждую переменную отдельно: <var>S</var> = <var>a</var> × <var>b</var> |
| Ждут, что тег объявит переменную или вычислит значение | Тег только помечает текст, скрипт о нём ничего не знает | Значения хранить в скрипте, а в тексте выводить их из скрипта |
Курсив убран без замены: var { font-style: normal; } | Читатель больше не отличает переменную от обычного слова | Добавить цвет или шрифт: color, font-family |
