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/, ресурс practical antipatterns по адресу https://htmhell.dev/ и данные из Web Almanac по адресу http://almanac.httparchive.org/.