Что нового в HTML и спецификациях вёрстки: лето 2025 года

Лето 2025 года ознаменовалось рядом существенных нововведений в экосистеме HTML и веб-вёрстки. Зависимость разработчиков от тяжеловесных JavaScript-библиотек для создания базовых компонентов интерфейса стремительно падает. Браузеры все больше берут на себя ответственность за сложный UI, повышая производительность.

Эти изменения касаются не только спецификаций WHATWG, но и эволюции практик доступности (a11y), а также их прямого влияния на метрики Core Web Vitals (влияющие на SEO).

---

Новый статус HTML Living Standard

WHATWG опубликовала масштабное обновление редакции HTML Living Standard. Эпоха «div-soup» (оборачивания всего в <div>) официально уходит в прошлое.

Полная поддержка тега <dialog>

Элемент <dialog> теперь официально поддерживается во всех актуальных версиях браузеров, включая релиз Safari 18 на движке WebKit.

Больше нет необходимости подключать сторонние библиотеки (типа SweetAlert2 или старых jQuery UI) для вызова всплывающих окон. Нативный <dialog> аппаратно ускоряется браузером и автоматически решает проблемы с фокусом.

<!-- Нативное, доступное модальное окно -->
<dialog class="dialog" id="promo-modal">
  <h2 class="dialog__title">Специальное предложение</h2>
  <p>Контент окна. Задний фон автоматически блокируется.</p>
  <form method="dialog">
    <button class="button-close">Закрыть</button>
  </form>
</dialog>

<!-- Вызов модального окна без написания JS логики управления фокусом -->
<button onclick="document.getElementById('promo-modal').showModal()">
  Открыть акцию
</button>

Интересный факт: Согласно исследованию State of HTML 2025, более 42% frontend-разработчиков уже полностью отказались от кастомных решений в пользу нативного <dialog>.

---

Popover API: революция выпадающих списков

В середине 2025 года Chrome, Firefox и Safari окончательно синхронизировали поддержку popover API. Это механизм создания нативных всплывающих элементов, тултипов и выпадающих меню (dropdown), которые рендерятся поверх всех остальных слоев (top layer), избегая конфликтов z-index.

---

Влияние семантики на Core Web Vitals

Команды Chrome UX Report в 2025 году еще раз подтвердили: правильная семантика напрямую влияет на производительность сайта. По результатам глобального анализа:

• Оптимизация INP (Interaction to Next Paint): Сайты, использующие нативные контролы и правильную структуру (<main>, <section>, <article>), демонстрируют задержку ввода на 12% ниже, чем проекты с глубокой вложенностью div-ов. Браузеру проще парсить семантическое дерево.
• Оптимизация CLS (Cumulative Layout Shift): Нативные <dialog> и popover показывают улучшение визуальной стабильности на 17%, так как браузер заранее знает их поведение в Layout-цикле, в отличие от JS-анимаций, вызывающих пересчет стилей (Reflow).

---

Атрибут inert: полное управление фокусом

Хотя атрибут inert появился чуть раньше, в 2025 году он стал стандартом де-факто для создания сложных SPA-приложений.

Добавление inert к любому элементу делает его (и всех его потомков) физически отсутствующими для кликов, выделения текста и навигации с клавиатуры (Tab).

<main id="app" inert>
  <!-- Пока открыто меню или loader, пользователь не сможет -->
  <!-- кликнуть или добраться табом до элементов этой секции -->
  <h1>Контент</h1>
  <a href="#">Ссылка</a>
</main>

Это невероятно полезно для создания боковых меню (OffcanvasDrawer), когда нужно жестко запереть фокус пользователя внутри открытой панели.

---

Резюме

HTML в 2025 году — это не просто язык разметки, это мощный декларативный UI-фреймворк. Переход на нативные API (Dialog, Popover, inert) позволяет фронтендерам писать меньше кода, отправлять меньше JavaScript по сети и создавать интерфейсы, которые по умолчанию доступны (Accessible) и быстры.

Специалисты NBM-IT следят за передовыми веб-спецификациями. Мы разрабатываем быстрые и доступные интерфейсы с соблюдением строгих стандартов Google Core Web Vitals, что напрямую влияет на рост ваших SEO-позиций.