*В HTML достаточно тегов, которые многими остаются забытыми или практически не используются, так как в большинстве случаев можно ограничиться, условно, базовыми, которые применяются практически в любой верстке. Однако все же полезно знать и какие-то специфические теги, которые даже могут заменить элементы верстки, для реализации которых ранее нужен был JavaScript. Я составил подборку таких тегов. *
<datalist> — html-элемент содержащий набор опций (<option>), доступных для выбора. Задается для элемента <input> с атрибутом list.
<input list="options">
<datalist id="options">
<option value="audi">
<option value="bmw">
</datalist>
<sub> и <sup> — тегом <sub> оборачивают вложенный текст для придания ему нижнего индекса. <sup> используют для противоположной цели.
<p>СО<sub>2</sub></p>
<p>E=MC<sup>2</sup></p>
<details> — используется для раскрытия или скрытия дополнительной информации. На странице отображается в виде заголовка, слева которого появляется небольшой черный треугольник. Текст заголовка по умолчанию можно заменить с помощью тега <summary>.
<details>
<summary>Заголовок по умолчанию</summary>
Какой-то текст.
</details>
<figure> — тег для обозначения картинки с возможностью подписи к ней.
<figure>
<img src="image.jpg" alt="attribute for image">
<figcaption>Подпись к картинке</figcaption>
</figure>
<picture> — контейнер для одной или нескольких картинок, которые будут подгружаться и показываться в зависимости от размера экрана. Версии картинок разных размеров указываются в дочернем элементе <source> и подгружаются в зависимости от ширины экрана.
<picture>
<source srcset="full-logo.png" media="(min-width: 600px)">
<img src="logo.png" alt="alternative text">
</picture>
Адрес картинки в теге <source> указывается с помощью атрибута srcset. В данном примере картинка full-logo.png будет подгружена при размере экрана 600px или больше, при меньшем — картинка logo.png указанная в привычном теге img. Если браузер не поддерживает тег <picture>, то также будет выведена картинка в теге img.