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

🔹 <details> и <summary>

С помощью этих тегов можно создать раскрывающийся блок с контентом, который часто называют «аккордеоном», без использования JavaScript. Подобные элементы можно встретить на страницах с часто задаваемыми вопросами (FAQ). <details> — сам интерактивный элемент, а <summary> — его заголовок.

🔹 <progress>

Этот тег создаёт индикатор, который показывает прогресс выполнения задачи, например загрузки файла на сервер. Он имеет атрибут max — максимальное значение и value — текущее значение. Внешний вид элемента <progress> зависит от браузера, но его можно стилизовать, чтобы все пользователи видели одинаковый дизайн.

🔹 <dialog>

С помощью этого тега вы можете создать всплывающее или модальное окно. Чтобы настроить открытие и закрытие окна, нужно использовать JavaScript-методы show(), showModal() и close(). Преимуществом тега является то, что логика работы окна реализована в самом браузере, благодаря чему мы можем отправлять меньше трафика пользователю.

Какими из этих тегов вы пользуетесь в работе?