В этой статье я расскажу про 7 HTML-тегов, которые, возможно, вы еще не открыли для себя. Мы посмотрим, как они работают и насколько поддерживаются современными браузерами. Поехали!
<sub> / <sup>
Это теги для добавления текста с надстрочным и подстрочным индексами.
Иногда нам нужно выделить символы или цифры, которые находятся выше или ниже базовой линии текста. Например, в химии для обозначения химических формул, в математике для записи степеней и индексов, в музыке для обозначения аккордов, или просто для оформления сносок и сокращений. Все это можно легко достичь с помощью тегов <sup>
и <sub>
.
Никаких атрибутов не требуют.
Пример использования в математическом выражении:
Σ<sub>i=1</sub><sup>n</sup> (x<sub>i</sub><sup>2</sup> + y<sub>i</sub><sup>2</sup>)
![Результат вывода кода Результат вывода кода](https://habrastorage.org/r/w1560/getpro/habr/upload_files/f79/8b4/b05/f798b4b05252c88ad17772144ebd3ac7.png)
Пример использования в музыке:
<p>Песня: "Wonderful Tonight" by Eric Clapton</p>
<p>A E<sup>7</sup>
It's late in the evening
D A
She's wondering what clothes to wear
A E<sup>7</sup>
She puts on her make-up
D A
And brushes her long blonde hair
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/ca2/ae6/f59/ca2ae6f599d9d9ef16de67dbf1fd4856.png)
На данный момент, по статистике caniuse, поддерживаемость тегов <sup>, <sub>
на уровне 96%:
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/14e/9c3/7e5/14e9c37e5daff98ca79cb0e5977f3e7f.png)
<kbd> / <samp>
Это теги для оформления текста, связанного с клавишами и выводом кода.
<kbd>
— используется для обозначения клавиш на клавиатуре или клавиатурных комбинаций. Это может быть полезно, например, при создании инструкций или руководств по использованию программного обеспечения.
Пример:
<p>Нажмите <kbd>Enter</kbd>, чтобы продолжить.</p>
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/193/e23/b49/193e23b4969a269efb36ea2cf49a20d0.png)
<samp>
— этот тег используется для отображения вывода кода, результатов выполнения программы. Этот тег может быть полезен при демонстрации примеров кода на веб-странице.
Пример:
<p>Для вывода текста на экран в Python используется функция <samp>print()</samp>.</p>
P.S. Также существует тег <code>,
который по сути делает то же самое, однако, разница состоит в том, что<code>
используется для отображения программного кода, а <samp>
— для отображения результата выполнения этого кода.
Поддерживаемость браузерами тегов <samp>
и <kbd>
:
![<samp> <samp>](https://habrastorage.org/r/w1560/getpro/habr/upload_files/dfe/f92/727/dfef927272d474738baee09745da2fac.png)
![<kbd> <kbd>](https://habrastorage.org/r/w1560/getpro/habr/upload_files/218/608/3f8/2186083f8adee4975e91c161e51342f7.png)
<bdo>
<bdo>
(Bi-Directional Override) используется для изменения направления текста. Это особенно полезно при работе с языками, которые читаются справа налево, такими как, например, арабский или иврит.
Тег <bdo>
в HTML имеет всего один обязательный атрибут:
dir
(направление): Этот атрибут определяет направление текста внутри тега <bdo>. Возможные значения:"ltr" (left-to-right) — текст идет слева направо (стандартное направление).
"rtl" (right-to-left) — текст идет справа налево
Пример:
<p><bdo dir="rtl">مرحبا بك في موقع الويب</bdo></p>
<p><bdo dir="rtl">Привет, это обратное направление текста</bdo></p>
![Привет, это обратное направление текста Привет, это обратное направление текста](https://habrastorage.org/r/w1560/getpro/habr/upload_files/a08/eb9/68d/a08eb968d26a8f5b7904ef1325d2776a.png)
Также существует CSS свойство direction
, которое позволяет делать то же самое, но более глобально, на уровне стилей:
HTML:
<p class="right-to-left">Это текст с измененным направлением.</p>
CSS:
.right-to-left {
direction: rtl; /* Устанавливаем направление текста справа налево */
}
Поддерживаемость тега:
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/6e8/80f/9a2/6e880f9a2e5fd8c6ffbb694e4a7bbfe6.png)
<abbr>
Этот тег используется для расшифровки аббревиатур и акронимов. В этом примере <abbr>
используется для создания аббревиатуры "HTML" с полным расшифровкой "HyperText Markup Language". Если навести курсор мыши на аббревиатуру, то можно увидеть всплывающую подсказку с полной расшифровкой.
Атрибуты:
title
— используется для расшифровки аббревиатуры/акронима. Когда юзер наводит курсор мыши на аббревиатуру, всплывает подсказка (tooltip) с тем текстом, что был указан в атрибуте.
<p><abbr title="Национальное управление по аэронавтике и исследованию космического пространства">NASA</abbr>, является ведущей организацией в области исследования космоса и аэронавтики.</p>
![<abbr> <abbr>](https://habrastorage.org/getpro/habr/upload_files/26f/85c/339/26f85c33912f7538cce04b8a7ee8a32e.gif)
Поддерживаемость браузера опять составляет 96,16%:
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/cf1/ebd/bc2/cf1ebdbc2e3f0f2dc820e3414374d6cd.png)
<optgroup>
Этот тег используется внутри элемента <select>
для создания группировки связанных элементов <option>
. Этот тег позволяет логически объединить варианты выбора в выпадающем списке, делая его более организованным.
Чаще всего с optgroup используются атрибуты label
и disabled
:
Атрибут label
используется для установки названия группы вариантов выбора внутри <optgroup>
. Это название будет отображаться в выпадающем списке перед вариантами выбора в этой группе.
<label for="books">Выберите книгу:</label>
<select id="books">
<optgroup label="Классика">
<option>Война и мир</option>
<option>Преступление и наказание</option>
<option>Гордость и предубеждение</option>
</optgroup>
<optgroup label="Научная фантастика">
<option>2001 год: Космическая одиссея</option>
<option>Марсиан</option>
<option>Стройка</option>
</optgroup>
<optgroup label="Поэзия">
<option>Собрание стихов Анны Ахматовой</option>
<option>Стихи Осипа Мандельштама</option>
<option>Поэмы Александра Пушкина</option>
</optgroup>
</select>
Результат кода:
![](https://habrastorage.org/getpro/habr/upload_files/948/c5b/99e/948c5b99ee34693a25c55c199d73c4ff.gif)
Атрибут disabled
применяется для отключения группы вариантов выбора. Когда группа <optgroup>
отключена, пользователи не смогут выбирать варианты внутри этой группы:
<label for="pizza">Выберите пиццу:</label>
<select id="pizza">
<optgroup label="Мясные пиццы">
<option>Пепперони</option>
<option>Салями</option>
<option>Беконатор</option>
</optgroup>
<optgroup label="Нет в наличии" disabled>
<option>Грибная феерия</option>
<option>Шпинатная радуга</option>
<option>Супер томатная</option>
</optgroup>
<optgroup label="Экзотические пиццы">
<option>Пицца с ананасами</option>
<option>Пицца с бананами</option>
<option>Пицца с шоколадом</option>
</optgroup>
</select>
Поддерживаемость браузерами — 96,16%:
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/016/b98/e96/016b98e965f7ca67749568152df76c10.png)
Продолжая тему выпадающих списков, стоит рассказать про тег <datalist>
.
Тег <datalist>
это инструмент 2 в 1, который комбинирует в себе поле input и выпадающий список, давая возможность юзеру вписать свое собственное значение или выбрать из предложенных.
Чтобы указать, какой список вариантов должен отображаться для какого поля ввода, <datalist>
должен содержать атрибут id
, который затем связывается с атрибутом list
элемента <input>:
<label for="destination">Куда поедем?:</label>
<input list="countries" id="countryInput" name="countryInput">
<datalist id="countries">
<option value="Италия">
<option value="Швейцария">
<option value="Испания">
<option value="Греция">
<option value="Норвегия">
<option value="Канада">
<option value="Япония">
<option value="Австралия">
<option value="Мексика">
<option value="Южная Африка">
</datalist>
А еще этот тег поддерживает функцию автозавершения: браузер автоматически заканчивает ввод пользователя на основе доступных вариантов из списка <datalist>
:
![](https://habrastorage.org/getpro/habr/upload_files/7db/1eb/361/7db1eb361642d6c4d38b33b2773f7a37.gif)
Тег <datalist>
можно использовать не только с элементом <input>
типа "text", хотя это наиболее распространенное применение. Его также можно использовать с другими типами, например, "number", "email", “tel”, “range”, “color”, “search”, “time”. Здесь уже стоит вопрос о целесообразности такого использования, но хочу показать вам примеры, которые меня наиболее удивили.
Использование с типом color:
<label for="color">Выберите цвет:</label>
<input type="color" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option>#FF0000</option>
<option>#00FF00</option>
<option>#0000FF</option>
<option>#FFFF00</option>
<option>#FF00FF</option>
<option>#00FFFF</option>
</datalist>
![](https://habrastorage.org/getpro/habr/upload_files/175/115/694/17511569442ff20c11ce4670a48e2dc3.gif)
Использование с типом range:
<label for="volume">Выберите уровень громкости:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" list="volumeOptions">
<datalist id="volumeOptions">
<option value="0">Тихо</option>
<option value="25">Низкая громкость</option>
<option value="50">Средняя громкость</option>
<option value="75">Высокая громкость</option>
<option value="100">Максимальная громкость</option>
</datalist>
![](https://habrastorage.org/getpro/habr/upload_files/aa3/e15/eab/aa3e15eab5df0a1050636ee435922223.gif)
Поддерживаемость браузерами составляет 96,48%:
![](https://habrastorage.org/r/w1560/getpro/habr/upload_files/c79/617/f13/c79617f13c5220b4cc4cccb4c1c85ac0.png)
<details>
и <summary>
Теги <details>
и <summary>
используются для создания спойлеров и скрытой информации без использования JavaScript. Эта пара может быть полезна для создания, к примеру, FAQ-страницы, фильтров и сортировок (указание скрытых свойств для экономии места), инструкций, руководств и комментариев.
Внутрь тега <details>
помещается тег <summary>
, который служит своего рода “кнопкой” для открытия/скрытия информации. Пример:
<details>
<summary>Как я могу установить приложение?</summary>
<p>Для установки нашего приложения, перейдите на страницу "Загрузки" и следуйте инструкциям для вашей операционной системы.</p>
</details>
![](https://habrastorage.org/getpro/habr/upload_files/559/055/23a/55905523ab1a1651becc283bde5ecd68.gif)
Тег <details>
может иметь атрибут open
, который определяет, будет ли содержимое блока отображаться открытым по умолчанию при загрузке страницы и не требовали щелчка пользователя для раскрытия. По умолчанию атрибут open
равен false:
<details open>
<summary>Какой-то вопрос</summary>
<p>Этот блок с вопросом уже открыт при загрузке страницы.</p>
</details>
Теги поддерживаются браузерами на 96,78%:
![details & summar details & summar](https://habrastorage.org/r/w1560/getpro/habr/upload_files/a21/f18/dc7/a21f18dc79fab3d6cc9185d34c23c24c.png)