HTML — це маркап, а не мова програмування — використовуйте його як мову програмування.

Головна ідея

HTML досі вважається простою навичкою для початківців — теги, форми, кілька макетів — тоді як справжні сторінки стали надзвичайно складними. Сучасні документи містять тисячі вузлів DOM, проте багато сайтів все ще створюються з урахуванням звичок раннього, простішого вебу. Ця прогалина проявляється у чотирьох аспектах: способі навігації користувачів, способі інтерпретації структури пошуковими системами, ефективності відображення контенту браузерами та способі вилучення значень з маркування роботами-переглядачами та системами ШІ.

HTML — це не мова програмування

Маркування структурує контент; мови програмування описують поведінку. Різниця є очевидною:

• Логіка: Мови мають умовні оператори. HTML не приймає рішень.
• Стан: Мови зберігають змінні. У HTML їх немає.
• Вихідні дані: Мови обчислюють значення. HTML описує те, що має з’явитися.

Називати HTML мовою програмування призводить до плутанини категорій. Це мова форматування для структурування та опису контенту, який буде відображатися браузером.

У Інтернеті є проблема з DIV

Вкладені анонімні контейнери залишаються поширеними:

<div><div><div>
  <div>Text</div>
</div></div></div>

Семантичні альтернативи називають функції замість того, щоб використовувати купу обгорток:

<article>
  <header><h1>Title</h1></header>
  <main><p>Text</p></main>
</article>

Інтенсивне вкладення елементів div погіршує структуру доступності, уповільнює технічне обслуговування та створює для браузера зайву безглузду структуру для обробки. Краще використовувати елементи, які чітко визначають своє призначення.

У HTML є криза ідентичності

HTML спочатку був форматом документів для публікації. Зараз він лежить в основі досвіду, схожого на програмне забезпечення: панелей керування, PWA, ігор. Короткий часовий період:

• 1991: Академічні документи
• 1996: Макетування на основі таблиць
• 2004: Веб-додатки епохи AJAX

2024: PWA, панелі керування, ігри

Ця мова ніколи не розроблялась як середовище виконання повноцінних додатків, проте сучасний DOM надає велику кількість API, на яких будуються фреймворки додатків.

Що насправді бачить браузер

Відображення — це процес, що складається з кількох етапів, а не одноразова операція:

1. Дерево DOM — HTML парсується на елементи та структуру
2. CSSOM — додаються стилі
3. Дерево відображення — поєднання DOM та CSS
4. Розташування — обчислюється геометрія
5. Малювання — намальовуються пікселі

Погана структура маркапу може погіршити продуктивність ще до того, як CSS чи JavaScript стануть вузьким місцем. Глибокі, анонімні дерева ускладнюють роботу з розташуванням та доступністю, навіть якщо стилі виглядають коректно.

Семантичний HTML рятує Інтернет

Семантичні теги надають браузерам, пошуковим системам та технологіям допомоги більш чіткої структури:

• <article> позначає незалежний контент для читачів та індексаторів
• <nav> ідентифікує елементи навігації
• <main> підкреслює основну область контенту, яку пріоритезують пошукові роботи
• <figure> поєднує медіаконтент із підписами у форматі, зрозумілому парсерам

Приховані витрати від поганого HTML

• Продуктивність: Занадто великі DOM-структури уповільнюють відображення контенту на простих пристроях
• Доступність: Слабка структура ускладнює роботу скринь-читачів та користувачів клавіатури
• SEO: Пошукові системи все ще орієнтуються на структуру HTML ще до того, як запуститься більшість клієнтських скриптів JavaScript

HTML5 змінив усе

До появи HTML5 багатомедійний контент часто залежав від Flash або Java-аплетів. Нативні елементи та API замінили більшу частину цих інструментів:

• Мультимедіа: теги <video> та <audio> замінили плеєри-плагіни
• Графіка: теги <canvas> та <svg> дозволяють створювати графіку без використання аплетів
• Зберігання даних: об’єкт localStorage скоротив залежність від куки для зберігання даних на клієнтській стороні

Сучасний HTML є живим стандартом, яким керує WHATWG, і продовжує розвиватися, замість того щоб застигнути у вигляді номерованої версії „HTML6“.

Майбутнє HTML

Фреймворки змінюють процеси створення контенту; проте браузери все одно обробляють HTML у кінцевому етапі. Тенденції, які зберігають маркування у центрі уваги:

• Нативні веб-компоненти для повторного використання без обов’язкової потреби у фреймворку

Дизайн, орієнтований на доступність як базова вимога

Структура, зрозуміла для ШІ, де семантика покращує процес вилучення інформації та SEO

HTML, генерований на сервері, який залишається швидким та зручним у використанні ще до інтеграції з фронтендом

Структура, доступність та семантична чіткість будуть мати ще більше значення, а не менше, оскільки машини стають разом із людьми основними користувачами сторінок.

Наслідки — виклик

HTML пережив усі тенденції вебу — від сайтів-брошур до додатків із допомогою ШІ — залишаючись тихим фундаментом під усім. Вивчення тегів більше не є складною частиною. Складністю є необхідність жити з довгостроковими наслідками їх недбалого використання: недоступні структури div, повільні DOM-структури та маркування, якому не можуть довіряти ні люди, ні пошукові роботи.

Основними джерелами є стандарт HTML WHATWG за адресою http://html.spec.whatwg.org/, MDN за адресою http://developer.mozilla.org/, матеріали про практичні антіпаттерни за адресою https://htmhell.dev/ та дані з Web Almanac за адресою http://almanac.httparchive.org/.