HTML у 2026 році: що нового з’явилося у мові, яка «ніколи не змінюється»

HTML часто сприймають як завершену технологію: є заголовки, посилання, зображення, форми — що тут ще можна вигадати? Поки JavaScript щороку отримує новий синтаксис, а CSS перетворюється майже на повноцінну мову програмування інтерфейсів, HTML начебто стоїть на місці.

Насправді HTML продовжує розвиватися. Просто тепер у нього немає традиційних версій на кшталт HTML 5, HTML 6 або HTML 7. WHATWG підтримує його як Living Standard — живий стандарт, який оновлюється безперервно. Тому фраза «HTML 2026» означає не окремий реліз, а стан стандарту та браузерної підтримки у 2026 році. Саме так сучасну модель розвитку HTML пояснює WHATWG у своєму FAQ.

Варто також уточнити термінологію. У HTML з’являються елементи, атрибути, правила вкладеності та парсингу. Властивості, або properties, переважно належать до DOM і JavaScript, а CSS properties — до CSS.

Отже, чи є про що писати у 2026 році? Так. Революції на рівні появи <video> або <canvas> не сталося, але HTML поступово забирає на себе завдання, для яких раніше доводилося писати JavaScript.

Що з підтримкою

Нові HTML-можливості перебувають на різних етапах готовності.

command і commandfor уже можна використовувати в сучасних браузерах.
closedby для <dialog> поки що краще застосовувати як прогресивне покращення.
<selectedcontent> працює не в усіх браузерах і потребує fallback.
loading="lazy" для <video> та <audio> уже входить до стандарту, але ще не став Baseline.
<meta name="text-scale"> залишається експериментальною можливістю.
shadowrootslotassignment орієнтований передусім на сучасні Web Components.
controls для <img> уже описаний у стандарті, але конкретна поведінка залежить від браузера.

Діалоги без JavaScript: `command` і `commandfor`

Одна з головних тенденцій сучасного HTML — декларативна інтерактивність. Браузер отримує все більше можливостей самостійно відкривати, закривати та перемикати елементи.

Атрибути command і commandfor дозволяють пов’язати кнопку з діалогом або popover-елементом без обробника click.

<button commandfor="confirm-delete" command="show-modal">
  Видалити запис
</button>

<dialog id="confirm-delete" closedby="any">
  <h2>Видалити запис?</h2>
  <p>Цю дію неможливо буде скасувати.</p>

  <button
    commandfor="confirm-delete"
    command="close"
    value="cancel">
    Скасувати
  </button>

  <button
    commandfor="confirm-delete"
    command="close"
    value="delete">
    Видалити
  </button>
</dialog>

commandfor містить id цільового елемента, а command описує дію. Для діалогів доступні команди show-modal, close і request-close.

Це вже не експеримент: підтримка command стала Baseline у грудні 2025 року, тому у 2026-му цю можливість можна розглядати як робочий інструмент. MDN підтверджує її міжбраузерну доступність.

Атрибут closedby="any" дозволяє закривати діалог кнопкою, клавішею Esc або натисканням поза його межами. Саме closedby і поведінка popover-елементів увійшли до напрямів Interop 2026, але цей атрибут поки що підтримується не всюди. Тому всередині діалогу все одно варто залишати явну кнопку закриття.

Новий елемент `<selectedcontent>` і справді кастомний `<select>`

Найпомітніший новий HTML-елемент, з яким веброзробники стикаються у 2026 році, — <selectedcontent>.

Раніше стандартний <select> було надзвичайно складно стилізувати. Якщо дизайнер вимагав іконки, підписи або нестандартний вигляд пунктів, розробники часто замінювали його конструкцією з <div> і великою кількістю JavaScript. Разом із цим доводилося самостійно відтворювати керування клавіатурою, фокус і доступність.

Тепер <select> може містити кнопку з <selectedcontent>, у яку браузер копіює вміст вибраного <option>.

<select name="city">
  <button>
    <selectedcontent></selectedcontent>
  </button>

  <option value="kyiv">
    <span>🇺🇦</span>
    <span>Київ</span>
    <small>Україна</small>
  </option>

  <option value="warsaw">
    <span>🇵🇱</span>
    <span>Варшава</span>
    <small>Польща</small>
  </option>
</select>

Щоб увімкнути нову модель оформлення, використовується CSS:

select,
::picker(select) {
  appearance: base-select;
}

Після цього список можна оформлювати через Grid, Flexbox, псевдоелементи ::picker-icon, ::checkmark та інші сучасні засоби CSS, зберігаючи нативну поведінку форми.

Проте Baseline у цієї можливості ще немає. <selectedcontent> підтримується Chrome, додається у Safari 27, але поки що не працює в усіх основних браузерах. Актуальний статус наведений у довіднику MDN, а Apple демонструє реалізацію для Safari 27 у матеріалі WWDC 2026.

Отже, кастомний <select> уже можна вивчати та застосовувати як progressive enhancement: у старому браузері користувач усе одно отримає звичайний працездатний список.

Ліниве завантаження `<video>` та `<audio>`

Одне зі справжніх доповнень HTML Living Standard 2026 року — атрибут loading для елементів <video> та <audio>.

<video
  controls
  loading="lazy"
  preload="metadata"
  poster="/images/course-cover.webp"
  width="1280"
  height="720">
  <source src="/video/course.av1.mp4" type="video/mp4">
  <source src="/video/course.webm" type="video/webm">
</video>

Значення loading="lazy" підказує браузеру не завантажувати медіафайл, доки елемент не наблизиться до видимої частини сторінки. Це особливо корисно для каталогів, стрічок і довгих сторінок із кількома відео.

loading і preload вирішують різні завдання:

loading визначає, коли починати завантаження;
preload підказує, скільки даних отримати після його початку.

Коли встановлено loading="lazy", відкладене завантаження має пріоритет над preload.

Підтримку атрибута для медіа додали до HTML Living Standard, а Chrome увімкнув її у стабільному Chrome 148. В інших рушіях реалізація ще наздоганяє стандарт, тому це поки що прогресивне покращення, а не повна заміна інших стратегій оптимізації відео.

Масштабування тексту через `<meta name="text-scale">`

У Chrome 146 з’явився новий метатег:

<meta name="text-scale" content="scale">

Він дозволяє пов’язати базовий розмір шрифту сторінки із системними налаштуваннями користувача. Якщо людина збільшила текст в операційній системі або браузері, значення rem і em на сторінці також можуть масштабуватися відповідно.

Після підключення метатега не варто фіксувати розмір кореневого елемента:

html {
  /* Не встановлюємо font-size: 16px */
}

body {
  font-size: 1rem;
}

Це важливий крок у напрямі доступності, особливо на мобільних пристроях. Водночас розробник повинен перевірити інтерфейс при масштабуванні тексту до 200–300%: картки, кнопки та навігація не мають ламатися або обрізати контент.

Поки що text-scale залишається експериментальною можливістю з обмеженою підтримкою. Детальні рекомендації та попередження наведені у документації MDN, а перша стабільна реалізація з’явилася у Chrome 146.

Новий атрибут `shadowrootslotassignment`

У квітні 2026 року до HTML Living Standard додали shadowrootslotassignment — атрибут для декларативного Shadow DOM.

<article id="product-card">
  <template
    shadowrootmode="open"
    shadowrootslotassignment="manual">
    <header>
      <slot id="title-slot"></slot>
    </header>
  </template>

  <h2>Нова модель ноутбука</h2>
</article>

Значення manual вимикає автоматичне розподілення елементів за іменами слотів. Розробник може самостійно передати потрібні вузли через HTMLSlotElement.assign():

const card = document.querySelector("#product-card");
const slot = card.shadowRoot.querySelector("#title-slot");
const title = card.querySelector("h2");

slot.assign(title);

Це вузькоспеціалізована можливість, але вона важлива для серверного рендерингу та складних Web Components. Атрибут був доданий до стандарту у квітні 2026 року, після чого його підтримка з’явилася у Firefox 151 і Safari 27 beta.

Менші, але справжні зміни стандарту

У 2026 році HTML отримав ще кілька технічних доповнень.

`controls` для `<img>`

Тепер стандарт дозволяє написати:

<img
  src="/images/large-map.avif"
  alt="Детальна карта велосипедних маршрутів Києва"
  controls>

Атрибут повідомляє браузеру, що він може показати власні елементи керування зображенням — наприклад, кнопку повноекранного перегляду. Конкретний інтерфейс залишається на розсуд браузера.

Для <img controls> обов’язково потрібен непорожній alt. Атрибут уже описаний у HTML Living Standard, але поки що не варто очікувати однакових кнопок і поведінки в усіх браузерах.

Нові значення `modulepreload`

<link rel="modulepreload"> тепер може використовувати as="style" і as="json":

<link
  rel="modulepreload"
  href="/modules/theme.css"
  as="style">

<link
  rel="modulepreload"
  href="/data/catalog.json"
  as="json">

Це потрібно для попереднього завантаження CSS- і JSON-модулів. Зміна була додана до HTML-стандарту в січні 2026 року, але її практична користь залежить від підтримки відповідних типів модулів у цільових браузерах.

Зміна правил HTML-парсера

У червні 2026 року стандарт навчив HTML-парсер розпізнавати XML-подібні processing instructions виду <?target data?> як окремі DOM-вузли, а не лише як помилкові коментарі.

Звичайним сайтам поки що не потрібно використовувати цей синтаксис. Він створює основу для майбутнього потокового HTML і декларативного оновлення частин документа. Відповідна зміна вже об’єднана зі стандартом, але пов’язаний механізм <template for> усе ще проходить стандартизацію.

А що з `focusgroup`, `<template for>` і `<model>`?

У новинах 2026 року можна зустріти ще кілька гучних HTML-можливостей:

focusgroup додає навігацію стрілками для панелей інструментів, меню та інших складених віджетів;
<template for> дає змогу серверу потоково оновлювати частини документа без JavaScript;
<model> вбудовує інтерактивні 3D-моделі подібно до зображень і відео.

Chrome 150 уже реалізував focusgroup і потокові оновлення, але відповідні зміни focusgroup та <template for> ще не прийняті до HTML Living Standard.

<model> з’являється у Safari 27 для iOS, iPadOS і macOS, однак поки що розробляється окремою W3C Community Group і не є універсальним елементом стандарту WHATWG. Його можливості показані в огляді WebKit для WWDC 2026.

Отже, ці технології цікаві для експериментів, але називати їх загальнодоступним «новим HTML» поки зарано.

і на цьому поки що все, чекаємо наступних оновлень.

# html5 # html2026 # features

HTML у 2026 році: що нового з’явилося у мові, яка «ніколи не змінюється»

Що з підтримкою

Діалоги без JavaScript: command і commandfor

Новий елемент <selectedcontent> і справді кастомний <select>

Ліниве завантаження <video> та <audio>

Масштабування тексту через <meta name="text-scale">

Новий атрибут shadowrootslotassignment