HTML - простой, но абсолютно необходимый в веб-разработке язык разметки. Поэтому каждый, даже начинающий, программист знает если не весь HTML, то хотя бы его основы. Но сегодня я хочу обратить внимание на ряд мало используемых HTML-тегов, о которых стоит знать.

Итак, приступим.

progress

Элемент progress позволяет создать индикатор выполнения задачи (progress bar):

<progress value="70" max="100">70%</progress>

Этот элемент включает два атрибута:

1. max: описывает максимальное значение, может быть целым числом или числом с плавающей точкой, значение по умолчанию равно 1,
2. value: определяет уже выполненную часть задачи, может быть числом от 0 до max или до 1, если max не указан.

ins и дел

Элемент ins определяет текст, который был вставлен в документ, он автоматически подчеркивается браузерами.

В свою очередь элемент del указывает на текст, исключенный из документа, такой текст автоматически перечеркивается браузерами:

<p>The price of the new shirt is <del>$50</del> <ins>$25</ins><p>

details

Элемент details очень удобен при работе с большими документами. Он позволяет просматривать или скрывать содержимое этого тега, после нажатия на дочерний элемент summary:

<details>
  <summary>DEV.to</summary>
  <p>DEV.to is a place where coders share, stay up-to-date and grow their careers. Credits to dev.to for this line</p>
</details>

dialog

Элемент dialog указывает на диалоговое окно, упрощая создание всплывающих диалогов и модальных окон для веб-сайта. Атрибут open указывает на то, что диалог находится в активном состоянии.

<dialog open>Hola World! Garvit Here</dialog>

Спасибо за внимание.

Перевод статьи Garvit Motwani “4 Non-Popular HTML Tags”.