HTML постоянно развивается, предлагая новые возможности для веб-разработчиков. В этой статье описаны восемь сравнительно малоизвестных, но полезных HTML-тегов.
<datalist> и <input>: нативное автодополнение
Сочетание <datalist> и <input> позволяет создать удобное автодополнение без JavaScript. Атрибут list в <input> связывается с <datalist> через общий id, обеспечивая нативное автодополнение со стрелками и поиском.
<input list="technologies" id="technology">
<datalist id="technologies">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
</datalist>Это простой, эффективный и кроссбраузерный способ улучшить пользовательский опыт.
<sub> и <sup>: нижние и верхние индексы
Теги <sub> и <sup> используются для корректного отображения нижних и верхних индексов в формулах и тексте. Например:
<p>Формула воды: H<sub>2</sub>O</p>
<p>Формула Эйнштейна: E=mc<sup>2</sup></p><details> и <summary>: раскрывающиеся блоки
<details> создает блоки со скрытым контентом, раскрывающиеся по клику. <summary> определяет заголовок блока. По умолчанию, в <details> отображается текст «Сведения», но его можно заменить.
<details>
<summary>Хочешь меня открыть?</summary>
<p>Lorem ipsum dolor sit amet…</p>
</details>Атрибут open позволяет отображать содержимое по умолчанию. Стилизация возможна с помощью CSS.
<dialog>: модальные окна
<dialog> предназначен для создания модальных окон, отображаемых поверх основного контента. Атрибут open управляет видимостью.
<dialog open>
<h2>Заголовок</h2>
<p>Контент модального окна</p>
</dialog>Для стилизации и затемнения фона (backdrop) потребуется JavaScript.
<figure> и <figcaption>: группировка медиа-контента
<figure> группирует медиа-контент (изображения, видео) и его описание в <figcaption>.
<figure>
<img src="image.jpg" alt="Описание картинки">
<figcaption>This is a random picture.</figcaption>
</figure><picture>: адаптивная подгрузка изображений
<picture> позволяет подбирать изображения различного разрешения в зависимости от параметров устройства. <source> указывает источник и использует srcset для разных размеров, а media задает условия показа.
<picture>
<source srcset="small.jpg" media="(max-width: 500px)">
<source srcset="medium.jpg" media="(min-width: 900px)">
<img src="default.jpg" alt="Описание картинки">
</picture>Это оптимизирует загрузку и повышает производительность сайта.
Использование этих HTML-тегов позволяет создавать более функциональные и удобные веб-страницы, минимизируя использование JavaScript и повышая производительность.