В этой статье я расскажу про 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>)
Пример использования в музыке:
<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 
На данный момент, по статистике caniuse, поддерживаемость тегов <sup>, <sub> на уровне 96%:
<kbd> / <samp>
Это теги для оформления текста, связанного с клавишами и выводом кода.
<kbd> — используется для обозначения клавиш на клавиатуре или клавиатурных комбинаций. Это может быть полезно, например, при создании инструкций или руководств по использованию программного обеспечения.
Пример:
<p>Нажмите <kbd>Enter</kbd>, чтобы продолжить.</p>
<samp> — этот тег используется для отображения вывода кода, результатов выполнения программы. Этот тег может быть полезен при демонстрации примеров кода на веб-странице.
Пример:
<p>Для вывода текста на экран в Python используется функция <samp>print()</samp>.</p>P.S. Также существует тег <code>,который по сути делает то же самое, однако, разница состоит в том, что<code> используется для отображения программного кода, а <samp> — для отображения результата выполнения этого кода.
Поддерживаемость браузерами тегов <samp> и <kbd>:
مرحبا بك في موقع الويب</bdo></p>
<p><bdo dir="rtl">Привет, это обратное направление текста</bdo></p>
Также существует CSS свойство direction, которое позволяет делать то же самое, но более глобально, на уровне стилей:
HTML:
<p class="right-to-left">Это текст с измененным направлением.</p>CSS:
.right-to-left { direction: rtl; /* Устанавливаем направление текста справа налево */ }Поддерживаемость тега:
<abbr>
Этот тег используется для расшифровки аббревиатур и акронимов. В этом примере <abbr> используется для создания аббревиатуры «HTML» с полным расшифровкой «HyperText Markup Language». Если навести курсор мыши на аббревиатуру, то можно увидеть всплывающую подсказку с полной расшифровкой.
Атрибуты:
title — используется для расшифровки аббревиатуры/акронима. Когда юзер наводит курсор мыши на аббревиатуру, всплывает подсказка (tooltip) с тем текстом, что был указан в атрибуте.
<p><abbr title="Национальное управление по аэронавтике и исследованию космического пространства">NASA</abbr>, является ведущей организацией в области исследования космоса и аэронавтики.</p> 
<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>Результат кода:
Атрибут 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%:
Продолжая тему выпадающих списков, стоит рассказать про тег <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>:
Тег <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>
Использование с типом 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>
Поддерживаемость браузерами составляет 96,48%:
<details> и <summary>
Теги <details> и <summary> используются для создания спойлеров и скрытой информации без использования JavaScript. Эта пара может быть полезна для создания, к примеру, FAQ-страницы, фильтров и сортировок (указание скрытых свойств для экономии места), инструкций, руководств и комментариев.
Внутрь тега <details> помещается тег <summary>, который служит своего рода “кнопкой” для открытия/скрытия информации. Пример:
<details> <summary>Как я могу установить приложение?</summary> <p>Для установки нашего приложения, перейдите на страницу "Загрузки" и следуйте инструкциям для вашей операционной системы.</p> </details>
Тег <details> может иметь атрибут open, который определяет, будет ли содержимое блока отображаться открытым по умолчанию при загрузке страницы и не требовали щелчка пользователя для раскрытия. По умолчанию атрибут open равен false:
<details open> <summary>Какой-то вопрос</summary> <p>Этот блок с вопросом уже открыт при загрузке страницы.</p> </details>Теги поддерживаются браузерами на 96,78%:
ссылка на оригинал статьи https://habr.com/ru/articles/774112/
Добавить комментарий