HTML описывает веб-страницу как документ из смысловых элементов: заголовков, абзацев, ссылок, списков, изображений, форм и разделов. Браузер читает разметку, исправляет допустимые ошибки по стандартному алгоритму и строит дерево объектов. Затем CSS оформляет эти объекты, JavaScript меняет их и реагирует на события, а вспомогательные технологии используют смысл элементов для навигации.
Разметка, а не язык рисования
Название HyperText Markup Language переводится как язык разметки гипертекста. Гипертекст содержит переходы между документами, а разметка сообщает, какую роль выполняет фрагмент. Запись заголовка не приказывает браузеру нарисовать буквы строго определённого размера. Она говорит: этот текст является заголовком соответствующего уровня.
Такое разделение позволяет одному документу существовать в разных представлениях. На большом экране заголовок может быть крупным, в режиме чтения сохранить только структуру, а программа экранного доступа объявит его пользователю и позволит перейти к следующему разделу. Если вместо смысла автор использует случайные визуальные трюки, эти способы чтения теряют ориентиры.
Из чего состоит элемент
Большинство элементов имеет открывающий тег, содержимое и закрывающий тег. Атрибуты уточняют свойства: адрес ссылки, источник изображения, язык текста, имя поля формы. Одни элементы вкладываются в другие, поэтому документ естественно превращается в иерархию.
Важно соблюдать вложенность. Абзац может содержать ссылку, а раздел включает заголовок и несколько абзацев. Но интерактивную кнопку нельзя бездумно помещать внутрь другой кнопки: у элементов есть модели содержимого и правила поведения. Валидатор помогает находить нарушения, однако правильность определяется не только синтаксисом. Разметка должна отражать реальную функцию.
Что находится в начале документа
Объявление типа сообщает браузеру, что страницу нужно обрабатывать в стандартном режиме. Корневой элемент html охватывает документ, head содержит метаданные, а body представляет видимое содержимое. В head указывают кодировку, заголовок вкладки, описание, правила адаптации к экрану и ссылки на ресурсы.
Кодировку важно объявить рано, чтобы байты русского текста не превратились в неверные символы. Заголовок страницы нужен вкладкам, истории и результатам поиска. Описание помогает кратко представить материал, хотя поисковая система может выбрать собственный фрагмент. Эти строки редко видны внутри статьи, но участвуют в её использовании.
Почему появились семантические элементы
Ранние сайты часто собирали макет из таблиц и безымянных контейнеров. HTML развивался, и в нём закрепились header, nav, main, article, section, aside и footer. Они не гарантируют конкретный дизайн. Их задача состоит в том, чтобы обозначить крупные области и отношения.
Семантика полезна сразу нескольким участникам. Разработчик быстрее понимает исходник, поисковый робот отличает основное содержание от навигации, а пользователь вспомогательной технологии получает карту страницы. Однако тег section не следует ставить вокруг каждого блока ради модного названия. Раздел обычно имеет собственную тему и заголовок.
Как работают ссылки и изображения
Ссылка связывает текущий документ с адресом другого ресурса. Именно она превратила первую веб-страницу в часть растущей сети, а не в одинокий файл. Текст ссылки должен объяснять назначение перехода, особенно когда читатель просматривает список ссылок отдельно от окружающего абзаца.
Изображение загружается как отдельный ресурс. Атрибут alt передаёт текстовую альтернативу, когда картинка не видна или человек использует экранный диктор. Хороший alt сообщает полезную роль изображения в контексте, а не механически перечисляет каждый цвет. Декоративной картинке, не несущей информации, обычно задают пустую альтернативу.
Как форма превращается во взаимодействие
HTML содержит поля ввода, подписи, переключатели, списки и кнопки отправки. Браузер уже умеет фокусировать их с клавиатуры, проверять некоторые типы данных и отправлять значения серверу. Если всё заменить нарисованными контейнерами, эти свойства придётся воспроизводить вручную и легко допустить ошибку.
Связь label с полем увеличивает область нажатия и даёт понятное имя программе доступа. Тип email подсказывает мобильной клавиатуре подходящую раскладку, но не доказывает существование адреса. Сервер обязан повторно проверять входные данные, потому что клиентскую проверку можно обойти.
Что браузер делает с ошибками
HTML в интернете часто несовершенен: забыты закрывающие теги, перепутаны уровни или встречается старая разметка. Современный стандарт подробно определяет разбор таких случаев, чтобы разные браузеры строили сопоставимое дерево. Они не просто прекращают работу на первой ошибке.
Эта терпимость обеспечивает совместимость старых страниц, но не оправдывает небрежность. Исправленная разметка предсказуемее для стилей, скриптов и доступности. Браузер может восстановить дерево не так, как воображал автор, особенно при сложной вложенности таблиц и форм.
Почему HTML остаётся основой приложения
Даже когда интерфейс создаёт большой JavaScript-пакет, итогом обычно становятся HTML-элементы в документе. CSS оформляет их, а JavaScript добавляет поведение. Если исходная страница содержит осмысленный каркас, пользователь быстрее получает содержание, ссылки работают надёжнее, а базовые функции меньше зависят от выполнения сценариев.
HTML не конкурирует с более сложными технологиями. Он задаёт общий словарь документа, поверх которого строятся оформление и интерактивность. Чем богаче становится веб-приложение, тем важнее не терять этот слой: кнопка должна оставаться кнопкой, заголовок отражать иерархию, поле иметь подпись, а ссылка вести к настоящему адресу.
Почему исходник и дерево могут различаться
Инструменты разработчика показывают уже построенный DOM, а не обязательно буквальный файл сервера. Парсер может автоматически добавить отсутствующий элемент, закрыть абзац перед неподходящим вложением или переместить узлы таблицы по установленным правилам. После запуска сценария дерево меняется ещё сильнее.
Поэтому ошибку исследуют на двух уровнях. Просмотр исходного ответа помогает понять, что прислал сервер, а инспектор DOM показывает текущее состояние, с которым работают стили и программа. Различие не является обманом браузера: оно следует из стандартного алгоритма разбора и последующих действий страницы.
