5 редких HTML-тегов, которые мало кто использует

24 марта 2023 г.

1 минута

**В 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>

5 месяцев

С нуля

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

С нуля

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

С нуля

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

1 месяц

С нуля

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

1 месяц

С опытом

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

<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.

Kirill Kirillov

2 года назад