Что нового в HTML и спецификациях вёрстки: лето 2025 года
Лето 2025 года ознаменовалось рядом существенных нововведений в экосистеме HTML и веб-вёрстки. Зависимость разработчиков от тяжеловесных JavaScript-библиотек для создания базовых компонентов интерфейса стремительно падает. Браузеры все больше берут на себя ответственность за сложный UI, повышая производительность.
Обзор посвящен возможностям, которые обсуждались летом 2025 года. Практические рекомендации уточнены 30 октября 2026 года: перед внедрением проверяйте поддержку конкретной функции в целевых браузерах. В предыдущей редакции были приведены доли использования и проценты улучшения метрик без проверяемых источников; эти оценки удалены.
Новый статус HTML Living Standard
HTML Living Standard обновляется непрерывно. Это не отдельный выпуск «HTML 2025»: для проекта важно проверять конкретные элементы и API, а также возможность сохранить базовый сценарий в браузере без их поддержки.
Нативное модальное окно <dialog>
Элемент <dialog> дает встроенные механизмы модального окна при вызове showModal(). Для приемки проверьте доступное название, начальный фокус, закрытие с клавиатуры и возврат фокуса к кнопке открытия. Наличие нативного элемента не отменяет проверку доступности готового интерфейса.
<!-- Нативное, доступное модальное окно -->
<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>В примере модальность включает showModal(). Простое добавление атрибута open показывает окно без того же модального поведения.
Popover API: революция выпадающих списков
Popover API позволяет показывать немодальные всплывающие элементы в верхнем слое отображения — top layer. Popover не блокирует остальную страницу как модальный dialog; роли, клавиатурное управление и привязку к кнопке нужно продумать под конкретный компонент.
Влияние семантики на Core Web Vitals
Семантическая разметка помогает описать структуру документа, но сама по себе не гарантирует улучшение INP или CLS. После замены компонента измеряйте Core Web Vitals на реальных сценариях: задержку обработки взаимодействия, сдвиги макета и объем выполняемого JavaScript. Сравнивать нужно одинаковые страницы и условия.
Атрибут inert: полное управление фокусом
Хотя атрибут inert появился чуть раньше, в 2025 году он стал стандартом де-факто для создания сложных SPA-приложений.
Добавление inert к любому элементу делает его (и всех его потомков) физически отсутствующими для кликов, выделения текста и навигации с клавиатуры (Tab).
<main id="app" inert>
<!-- While the menu or loader is open, users cannot -->
<!-- click or tab into this section -->
<h2>Content</h2>
<a href="#">Link</a>
</main>Атрибут inert исключает поддерево из взаимодействия и дерева доступности. Он не создает модальное окно и не переносит фокус в панель самостоятельно: управление фокусом и доступный способ закрытия остаются частью реализации.
Резюме
Нативные элементы могут сократить объем собственного кода. Принимайте замену по результатам проверки браузеров, клавиатурного управления и производительности.
Если интерфейс собирается через npm или работает вместе с Node.js-сервером, отдельно проверьте среду сборки и запуска. В плане обновления Node.js до поддерживаемой LTS-ветки есть проверка зависимостей и отката. Для статической HTML-страницы без такой сборки обновление Node.js не требуется.
При разработке корпоративного сайта включите в требования доступность, целевые браузеры и измеримые критерии производительности.
Бесплатный расчет стоимости проекта
Ответьте на 4 вопроса, и мы пришлем вилку цен под ваши задачи.