10 важнейших HTML-элементов, которые должен знать каждый разработчик

Современный HTML далеко ушёл от базовых абзацев и заголовков. Хотя большинство разработчиков знают основы, настоящая мощь заключается в семантических HTML-элементах, которые делают вашу разметку самоописываемой, доступной и удобной в поддержке. Эти часто упускаемые из виду HTML-жемчужины снижают зависимость от JavaScript и создают более осмысленный веб-опыт.

Элементы, определяющие структуру и смысл

Элемент <dialog>: нативные модальные окна без лишних хлопот

Забудьте о сложных JavaScript-библиотеках для модальных окон. Элемент <dialog> предоставляет нативную функциональность модальных окон со встроенными возможностями доступности:

<dialog id="confirmDialog">
  <p>Are you sure you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('confirmDialog');
  // Show modal: dialog.showModal()
  // Show non-modal: dialog.show()
  // Close: dialog.close()
</script>

Этот семантический HTML-элемент автоматически управляет фокусом, закрытием по клавише Escape и отрисовкой фона. Он устраняет целые зависимости от JavaScript, обеспечивая при этом лучшую доступность.

Элемент <template>: правильный клиентский шаблонизатор

Тег <template> содержит HTML-контент, который не отрисовывается до тех пор, пока вы явно не клонируете и не вставите его через JavaScript. Идеально подходит для динамической генерации контента:

<template id="card-template">
  <article class="card">
    <h3></h3>
    <time></time>
    <p></p>
  </article>
</template>

<script>
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);
  // Populate clone and append to DOM
</script>

В отличие от скрытых div-элементов, содержимое template не загружает ресурсы и не выполняет скрипты до активации, что делает его идеальным для производительного веб-дизайна.

Элементы, улучшающие взаимодействие с пользователем

Пара <details> и <summary>: сворачиваемый контент без JavaScript

Эти элементы создают разворачиваемые/сворачиваемые секции вообще без JavaScript:

<details>
  <summary>System Requirements</summary>
  <ul>
    <li>8GB RAM minimum</li>
    <li>50GB available storage</li>
    <li>Modern browser support</li>
  </ul>
</details>

Программы чтения с экрана автоматически объявляют развёрнутое состояние, а навигация с клавиатуры работает из коробки. Атрибут open управляет начальным состоянием, а треугольник раскрытия можно стилизовать с помощью CSS.

Элемент <meter>: визуальные индикаторы со смыслом

Отображайте датчики, рейтинги или индикаторы заполненности с семантическим контекстом:

<meter value="7" min="0" max="10" optimum="8" low="3" high="7">
  7 out of 10
</meter>

Браузер понимает, что это не просто визуальный элемент — это измерение с определёнными границами, порогами и оптимальным диапазоном. Разные цвета появляются автоматически в зависимости от того, попадает ли значение в низкий, средний или высокий диапазон.

Элементы, предоставляющие богатый контекст

Элемент <time>: машиночитаемые даты

Сделайте даты и время понятными как для людей, так и для машин:

<time datetime="2024-12-15T09:00">December 15 at 9:00 AM</time>

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

Элемент <data>: связь человеческих и машинных значений

Связывайте человекочитаемый контент с машиночитаемыми значениями:

<data value="978-0-123456-78-9">JavaScript: The Good Parts</data>

Идеально подходит для кодов продуктов, ISBN или любого сценария, где вам нужны как отображаемые, так и данные значения без скрытых полей ввода или data-атрибутов. JavaScript может получить доступ к значению через свойство value.

Элемент <abbr>: доступные аббревиатуры

Предоставляйте полные значения для аббревиатур без загромождения текста:

<abbr title="Application Programming Interface">API</abbr>

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

Элементы, отображающие прогресс и вывод

Элемент <progress>: определённые состояния загрузки

Показывайте реальный прогресс вместо бесконечных спиннеров:

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

В отличие от общих анимаций загрузки, этот элемент передаёт реальную информацию о статусе завершения. Опустите атрибут value для неопределённого индикатора прогресса.

Элемент <output>: результаты вычислений

Отображайте результат вычислений или взаимодействий пользователя семантически:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

Атрибут for явно связывает вывод с его исходными полями ввода, создавая чёткие отношения в вашей разметке. Программы чтения с экрана понимают, что это вычисленный результат, а не просто статический текст.

Элемент <picture>: адаптивные изображения с художественным направлением

Предоставляйте разные изображения в зависимости от размера области просмотра или возможностей устройства:

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="narrow.jpg" alt="Responsive image">
</picture>

Это выходит за рамки простых адаптивных изображений — это художественное направление в HTML, позволяющее обрезать или полностью изменять изображения для разных контекстов. Браузер выбирает первый подходящий source или возвращается к элементу img.

Заключение

Эти HTML-элементы представляют собой сдвиг в том, как мы думаем о разметке. Вместо div-элементов с классами, которые понимают только люди, мы используем элементы, которые описывают свою собственную цель. Элементы <dialog>, <details> и <template> устраняют зависимость от JavaScript. Элементы <time>, <data> и <abbr> делают контент машиночитаемым. Элементы <meter>, <progress> и <output> придают семантический смысл динамическим значениям.

Хороший HTML — это не запоминание тегов, а выбор элементов, которые делают ваш контент самоописываемым. Когда ваша разметка объясняет сама себя, ваш код становится более удобным в поддержке, ваши сайты более доступными, а ваша разработка более эффективной. Начните с одного или двух из этих элементов в вашем следующем проекте и ощутите разницу, которую создаёт семантический HTML.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.