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