Веб и HTML: основы
Курс начинается с языка разметки HTML — фундамента, на котором держится клиентская часть любого веб-приложения. Прежде чем перейти к самому языку, обратимся к контексту: что такое веб, как устроена доставка документа от сервера к браузеру, какие организации стандартизируют веб-технологии. Эти сведения часто остаются за рамками курсов фронтенд-разработки, но без них непонятно, почему HTML устроен именно так и почему современные практики выглядят как выглядят.
Базовые понятия веба
Гипертекст и гипермедиа
Гипертекст (англ. hypertext) — это методика связи электронных текстовых документов с помощью интерактивных элементов — гиперссылок (англ. hyperlink), позволяющая читателю самостоятельно выбирать последовательность просмотра. По размещённым в тексте ссылкам читатель переходит к другим документам или к иным фрагментам того же документа; порядок такого перемещения он определяет сам.
Идея нелинейного чтения возникла ещё в докомпьютерную эпоху, но воплощение в современном виде стало возможным с развитием вычислительной техники. Термин гипертекст был введён математиком и философом Тедом Нельсоном в 1965 году в докладе «Complex Information Processing: A File Structure for the Complex, the Changing and the Indeterminate» 1. Несколько позже тем же автором был предложен расширенный термин гипермедиа (англ. hypermedia) — концепция распространялась не только на текст, но и на другие виды электронного контента, — однако в обиходе закрепился именно первоначальный вариант.
Идеи Нельсона при его непосредственном участии воплотились в проекте гипертекстовой системы Xanadu, которая существует по сей день, но сколь-либо значимого распространения не получила. Несмотря на это, сама концепция гипертекста оказалась востребованной — особенно в научной среде, где она облегчала поиск и консолидацию больших объёмов информации.
Всемирная паутина: от идеи до современного состояния
В 1989 году в Европейской организации по ядерным исследованиям (фр. Organisation européenne pour la recherche nucléaire; аббревиатура CERN сохранилась от исторического названия Conseil Européen pour la Recherche Nucléaire — временного совета 1952–1954 годов) исследователи Тим Бернерс-Ли и Роберт Кайо работали над информационной системой для структурирования служебной информации с использованием гипертекста 2. Результатом стал язык разметки документов HyperText Markup Language (HTML) и протокол передачи данных HyperText Transfer Protocol (HTTP). Параллельно Бернерс-Ли предложил концепцию Всемирной паутины (англ. World Wide Web, WWW) — распределённой системы доступа к семантически связанным документам, расположенным на разных компьютерах единой сети, — а также написал первый в мире HTTP-сервер httpd и программу-клиент, веб-браузер (англ. web browser) WorldWideWeb (позднее переименованный в Nexus, чтобы избежать путаницы с самой паутиной).
К 1992 году благодаря распространению вычислительной техники и стандартизации межсетевого обмена набирала обороты тенденция укрупнения университетских и исследовательских сетей в единую глобальную сеть. Её прообразом была ARPANET (1969), созданная по заказу Министерства обороны США; опорной магистралью, объединившей региональные сети в гражданский Internet, стала NSFNet (1985) — сеть Национального научного фонда США (англ. National Science Foundation, NSF). Концепция WWW была удачно имплементирована как сервис в развивающейся глобальной сети, а базовая механика — «пользователь вводит в браузере адрес HTML-документа (URL) → используя протокол HTTP, браузер отправляет запрос по этому URL на веб-сервер → веб-сервер возвращает HTML-документ» — практически без изменений используется по сей день.
URL и HTTP как основа доступа к ресурсам
Бернерс-Ли также является автором Uniform Resource Locator (URL) — единообразного указателя местонахождения ресурса. URL представляет собой последовательность символов, определяющую протокол передачи данных, доменное имя и путь к конкретному ресурсу:
https://example.org/articles/intro.html?lang=ru#section-2
В этом адресе различимы пять частей: схема (https), хост (example.org), путь (/articles/intro.html), параметры запроса (?lang=ru) и фрагмент (#section-2). Параметры запроса позволяют передавать дополнительные данные между клиентом и сервером, фрагмент адресует часть документа на стороне клиента и серверу не отправляется.
HTTP — это прикладной протокол по схеме «запрос — ответ». Клиент (браузер) отправляет запрос, описывающий желаемое действие методом (GET, POST, PUT, PATCH, DELETE) и адресом, а сервер возвращает ответ со статус-кодом и телом сообщения. Подробное рассмотрение протокола, методов, статус-кодов и заголовков мы отложим до темы 8, посвящённой API-клиенту; пока ограничимся пониманием, что HTTP — основной транспорт, по которому браузер получает HTML-документы, изображения, стили и скрипты.
В разговорной практике термины «HTTP-сервер» и «веб-сервер» часто используются как синонимы и обозначают программный продукт, реализующий работу с протоколом HTTP (nginx, Apache httpd, Caddy). При необходимости уточняют контекст: говорят о веб-сервере как о хосте (физической или виртуальной машине) с установленным на нём HTTP-сервером и обслуживаемым контентом, либо как о самом ПО.
Архитектура браузера: движок, рендеринг, JavaScript-интерпретатор
Веб-браузер — это клиентское приложение, которое получает доступ к веб-страницам и отображает их пользователю. Современные браузеры являются очень сложными программными продуктами; их архитектура может различаться в деталях, но как правило включает следующие компоненты:
- пользовательский интерфейс (англ. user interface, UI) — адресная строка, меню навигации, меню закладок и т. д.;
- движок браузера (англ. browser engine) — согласует действия между пользовательским интерфейсом и движком рендеринга;
- движок рендеринга (англ. rendering engine) — отвечает за отображение контента: разбирает (парсит) HTML и CSS и отображает результат на экране;
- модуль сетевого взаимодействия (англ. networking module) — обслуживает сетевые вызовы (например, HTTP-запросы);
- бэкенд пользовательского интерфейса (англ. UI backend) — отрисовывает базовые виджеты (выпадающие списки, поля ввода, флажки), абстрагируя различия операционных систем;
- интерпретатор JavaScript, JavaScript-движок (англ. JavaScript engine) — парсит и выполняет код на JavaScript;
- модуль хранения данных (англ. Data storage module) — отвечает за локальное хранение файлов cookie, данных Web Storage, IndexedDB и т. п.
Изучение устройства браузеров не является целью курса, но для лучшего понимания процессов веб-разработки полезно ознакомиться со статьями Tali Garsiel 3 и Mariko Kosaka 4.
На момент подготовки пособия наиболее распространённые браузеры (по данным независимой службы анализа веб-трафика StatCounter) перечислены ниже.
Chrome использует движок рендеринга Blink (форк WebKit) и высокопроизводительный JavaScript-движок V8. Реализована многопроцессная архитектура: каждая вкладка работает в отдельном процессе, что повышает стабильность и облегчает изоляцию (sandboxing). Технология Site Isolation изолирует сайты друг от друга в памяти. Chrome активно поддерживает передовые веб-стандарты — WebAssembly, WebRTC, PWA, HTTP/3.
Safari работает на движке WebKit, который Apple оптимизирует для производительности и энергоэффективности на macOS и iOS. JavaScript исполняется движком JavaScriptCore (Nitro). Safari ориентирован на низкое энергопотребление и поддерживает Intelligent Tracking Prevention (ITP) — систему защиты от отслеживания. Safari известен консервативным подходом к внедрению новых веб-стандартов, из-за чего разработчикам приходится учитывать его ограничения.
С 2020 года Microsoft Edge основан на Chromium и использует те же Blink и V8, что и Chrome; ранее работал на собственном движке EdgeHTML. Edge обеспечивает более низкое потребление оперативной памяти благодаря системе Sleeping Tabs и поддерживает технологию Application Guard для виртуализации вкладок. На основе Chromium Edge поддерживает практически все современные веб-стандарты и расширения из Chrome Web Store.
Firefox использует движок Gecko и JavaScript-движок SpiderMonkey. Технология Quantum обеспечивает многопоточный рендеринг. Firefox традиционно играет роль независимой реализации стандартов, не привязанной к Chromium, и активно поддерживает WebAssembly, WebRTC, HTTP/3, TLS 1.3, а также расширения на основе WebExtensions API.
Стандартизация: W3C, WHATWG, HTML как Living Standard
Одна из ключевых организаций, отвечающих за стандартизацию веб-технологий, — W3C (World Wide Web Consortium). W3C — международная организация, основанная в 1994 году Тимом Бернерсом-Ли. Её основная задача — разработка и продвижение стандартов, обеспечивающих развитие интернета как открытой и доступной среды. Члены W3C включают крупные IT-компании (Google, Microsoft, Apple, Mozilla), академические учреждения и независимых экспертов. W3C разрабатывает спецификации, известные как W3C Recommendations, которые становятся официальными стандартами после обсуждения и тестирования. Эти рекомендации охватывают HTML, CSS, DOM, WCAG, Web APIs, SVG, Semantic Web и другие технологии.
Разработка нового стандарта проходит несколько этапов: Working Draft (черновик) → Candidate Recommendation (кандидат в рекомендации) → Proposed Recommendation (предложенная рекомендация) → W3C Recommendation (официальная рекомендация).
Параллельно с W3C над стандартами веба работает консорциум WHATWG (Web Hypertext Application Technology Working Group), основанный в 2004 году разработчиками браузеров Apple, Mozilla и Opera в ответ на медленный темп работы W3C. Современный HTML развивается именно в WHATWG, как непрерывно обновляемый Living Standard, без зафиксированных «версий». Ранее принятая нумерация (HTML 4.01, HTML5) сегодня используется скорее как маркетинговый и методический ярлык; формальный источник истины — спецификация WHATWG. Долгое время W3C и WHATWG публиковали параллельные, местами расходящиеся версии HTML и DOM, что создавало путаницу для разработчиков. В 2019 году организации подписали соглашение, по которому WHATWG стал единственным держателем спецификаций HTML и DOM, а W3C сосредоточилась на других направлениях — CSS, WCAG, Web APIs.
Несмотря на разработанные стандарты, разные браузерные движки интерпретируют код несколько по-разному, поэтому веб-страницы могут выглядеть в браузерах не идентично. Это породило практики кросс-браузерной вёрстки и кросс-браузерного тестирования. В 2021 году основные производители браузеров инициировали проект Compat 2021, направленный на улучшение совместимости. Годом позже стартовал Interop 2022, в рамках которого вендоры договорились поэтапно доводить поддержку заранее оговорённого объёма веб-технологий до идентичной работы во всех браузерах. Год за годом расхождения сокращаются.
Язык HTML и его роль
HTML как язык разметки контента, а не оформления
HTML — это язык разметки, который используется для структурирования контента в электронных документах с помощью элементов, определяемых тегами (англ. tag). Браузер интерпретирует теги и отображает содержимое в соответствии с их назначением. То есть, «оборачивая» ту или иную часть документа в определённый тег, разработчик передаёт браузеру инструкцию: что это за фрагмент и как его отобразить.
Наглядный пример — теги <h1> и <p>, размечающие заголовок и абзац:
<h1>Великолепный заголовок</h1>
<p>Не менее потрясающий абзац.</p>
Браузер отобразит:
Несмотря на то, что текст заголовка и абзаца визуально различается, сам HTML не позволяет управлять начертанием, кеглем, отступами и прочими параметрами отображения. Для этого служит язык стилизации CSS, который мы рассмотрим в теме 2. Различие в отображении <h1> и <p> объясняется тем, что браузер применяет к ним собственный стиль по умолчанию (англ. user-agent stylesheet).
Здесь и далее под HTML-документом мы будем понимать код на языке HTML, помещённый в файл с расширением .html или .htm, а под веб-страницей — результат рендера этого документа браузером, с применением CSS-стилизации и исполняемого JavaScript-кода, если они были использованы.
Структура HTML-элемента: открывающий и закрывающий теги, атрибуты, содержимое
Рассмотрим структуру HTML-элемента на примере элемента <a> (англ. anchor, якорь), который предназначен для создания ссылок.
HTML-элемент состоит из:
- открывающего и закрывающего тегов (
<a>и</a>); - атрибутов в открывающем теге — пар вида
имя="значение", описывающих параметры элемента. Многие атрибуты применимы ко всем элементам, но часть атрибутов специфична для конкретных тегов. Полный перечень атрибутов, определённых стандартом, доступен в справочнике MDN; - содержимого — текста или вложенных элементов, к которым применяется тег.
У тега <a> ключевой атрибут — href (англ. hypertext reference), задающий адрес перехода. В значении допустим не только веб-URL: href="mailto:author@example.org" откроет почтовый клиент, href="tel:+79991234567" — приложение для звонка, href="#section-2" прокрутит страницу к элементу с id="section-2". Атрибут target="_blank" открывает ссылку в новой вкладке; при этом в rel принято указывать noopener (и для надёжности noreferrer), иначе целевая страница получает через window.opener доступ к текущей — потенциальная уязвимость.
Парные и пустые элементы
Тег <a> является парным: его открывающая и закрывающая части обрамляют содержимое. Однако существуют и пустые (англ. void) элементы, у которых нет содержимого и нет закрывающего тега. Типичные примеры — изображение <img>, перенос строки <br>, горизонтальная линия <hr>, поле ввода <input>, метатег <meta>, ссылка на ресурс <link>. Такие элементы целиком описываются одним тегом и набором атрибутов:
<img src="logo.svg" alt="Логотип компании">
<input type="email" name="contact" required>
<meta charset="UTF-8">
В XHTML и XML-совместимой записи подобные теги принято завершать косой чертой (<br />) — отсюда ещё одно распространённое название, «самозакрывающиеся» (англ. self-closing). В современном HTML5 слеш в пустом теге парсером допускается, но игнорируется и на поведение не влияет, поэтому такая запись считается избыточной.
Комментарии
Любой фрагмент HTML можно заключить в комментарий вида <!-- ... -->. Содержимое комментария не отображается на странице и не влияет на разметку, но видно в исходном коде и в DevTools. Комментарии используются для пояснений в разметке (обозначить начало секции, оставить TODO для команды) и временного отключения участков, которые жалко удалять окончательно. Главное ограничение — комментарии нельзя вкладывать друг в друга: парсер закроет внешний на первой же встреченной последовательности -->, и остаток уйдёт в обычный текст страницы.
Вложенность элементов и иерархическая модель документа
HTML позволяет вкладывать одни элементы в другие, образуя иерархическую структуру страницы. Вложенность важна для правильного отображения и логической организации контента. Пример:
<div id="el-1">
Элемент 1
<div id="el-2">
Элемент 2
</div>
<div id="el-3">
Элемент 3
</div>
</div>
После небольшой стилизации браузер отобразит это так:
По отношению к элементам 2 и 3 элемент 1 является родительским, а элементы 2 и 3 — дочерними по отношению к элементу 1. Совокупность таких отношений образует дерево документа: каждый элемент имеет ровно одного родителя (кроме корневого) и любое количество дочерних элементов. Это дерево лежит в основе всей последующей работы — на нём строятся CSS-селекторы, на нём же стоит DOM, через который JavaScript манипулирует страницей (тема 7).
Хорошим тоном при написании HTML-кода является явная демонстрация вложенности через отступы (англ. indent), как показано в примере выше. Современные редакторы и форматировщики делают это автоматически.
Структура HTML-документа
Каждый HTML-документ имеет определённую структуру, состоящую из обязательных и вспомогательных элементов. Рассмотрим базовый пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вдохновляющий заголовок страницы</title>
</head>
<body>
<h1>Великолепный заголовок</h1>
<p>Не менее потрясающий абзац.</p>
</body>
</html>
<!DOCTYPE> и режим стандартов
<!DOCTYPE> (document type) — объявление типа документа, в котором указывается тип и версия языка разметки для корректной обработки последующего содержимого браузером. Правильное объявление типа критически важно: при его отсутствии или некорректной форме браузер переходит в режим совместимости (англ. quirks mode), имитирующий поведение старых версий браузеров. Это сделано, чтобы не сломать унаследованные сайты двадцатилетней давности, но почти гарантированно приведёт к неправильной интерпретации актуального HTML- и CSS-кода.
В современной практике используется HTML5, которому соответствует лаконичная инструкция <!DOCTYPE html> — её и следует ставить первой строкой любого нового документа. Для более старых версий HTML и XHTML существовали свои громоздкие формы записи, которые сегодня встречаются только в исторических документах.
Проверить разметку на соответствие спецификации можно официальным валидатором W3C — validator.w3.org. Он принимает URL, файл или фрагмент кода и возвращает перечень нарушений: незакрытые теги, недопустимая вложенность, неизвестные атрибуты, проблемы с доступностью. Прогонять через валидатор готовые страницы — полезная привычка: часть ошибок браузеры молча «прощают», но они всплывают позже в виде странных артефактов рендера или проблем с доступностью.
Корневой элемент <html>, атрибуты lang и dir
<html> — корневой элемент, внутри которого размещается весь контент страницы. Из его атрибутов в практике важны прежде всего:
lang— указывает язык содержимого документа. В нашем примере значение"ru"соответствует русскому языку. Атрибут позволяет браузеру корректно применить типографические правила (вид кавычек, расстановка переносов), а ассистивным технологиям — выбрать правильный движок синтеза речи. Указыватьlang— обязательная практика;dir— направление текста:ltr(слева направо, значение по умолчанию) илиrtl(справа налево, для арабского, иврита и др.).
Раздел <head>: кодировка, viewport, заголовок, подключение ресурсов
<head> содержит метаинформацию о документе, не отображаемую как контент страницы. Типовое наполнение:
<meta charset="UTF-8">— кодировка документа. UTF-8 сегодня является де-факто стандартом, обеспечивающим корректное отображение символов любых письменностей;<meta name="viewport" content="width=device-width, initial-scale=1.0">— управляет масштабом страницы на мобильных устройствах. Без этого тега мобильные браузеры покажут страницу в режиме «как на настольном компьютере» с уменьшенным масштабом, что для современных адаптивных сайтов нежелательно;<title>— заголовок страницы, отображается на вкладке браузера, в результатах поиска и в подписях ссылок при шаринге;<link rel="stylesheet" href="styles.css">— подключение внешнего файла со стилями;<script src="script.js" defer></script>— подключение внешнего JavaScript-файла. Атрибутdeferоткладывает выполнение скрипта до построения дерева документа. Скрипт может подключаться и в<body>(обычно в самом конце, чтобы не блокировать рендер контента), но современная практика — размещать<script>в<head>с атрибутомdeferилиasync. Для ES-модулей используется запись<script src="script.js" type="module"></script>; подробнее о модулях — в теме 6.
Раздел <body>: видимый контент страницы
<body> содержит основное содержимое веб-страницы — текст, изображения, ссылки, формы, мультимедиа. Всё, что пользователь увидит на странице, должно располагаться здесь. У <body> нет жёстких ограничений на состав, кроме одного: внутри <body> не размещают теги, относящиеся к разделу <head> (например, <meta> или <title>).
Базовые блочные и строчные элементы
Поток документа — естественный порядок размещения элементов перед применением стилей. Браузер рендерит HTML сверху вниз, располагая элементы в порядке их появления в коде. Этот процесс называется нормальным потоком документа.
По умолчанию браузер размещает элементы в одном из двух базовых режимов, определяемом типом элемента:
- блочные (англ. block) элементы занимают всю доступную ширину родительского контейнера и начинаются с новой строки, располагаясь друг под другом. Даже если ширина блочного элемента явно задана и рядом мог бы поместиться такой же, в потоке они выстраиваются один под другим. Блочные элементы могут содержать как другие блочные, так и строчные элементы. Примеры:
<div>,<p>,<h1>–<h6>,<section>; - строчные (англ. inline) элементы занимают только необходимую ширину и не создают разрывов строк. Несколько строчных элементов стремятся уместиться на одной строке, насколько хватает ширины родителя; при недостатке ширины текст переносится на следующую строку. Как правило, строчные элементы содержат текст или другие строчные элементы; из этого правила есть исключения (например, у
<a>в HTML5 прозрачная модель содержимого, и он может оборачивать блочные элементы), но на первых порах ориентироваться на упрощённое правило удобно. Примеры:<span>,<a>,<q>,<code>.
Нормальный поток и его поведение мы детально рассмотрим в теме 3, посвящённой layout. Пока достаточно понимать, что разделение на блочные и строчные элементы — это базовая настройка отображения, которую затем можно переопределить с помощью CSS.
В HTML возможно использование специальных символов — мнемоник (англ. named character references). В первую очередь они нужны для знаков, конфликтующих с синтаксисом самого HTML: <, >, &. Кроме того, мнемоники вроде © (©), — (—), (неразрывный пробел) исторически применялись для типографических символов, отсутствующих на клавиатуре. При кодировке UTF-8 все эти знаки можно и удобнее записывать в исходнике напрямую; мнемоника остаётся востребованной, поскольку сам неразрывный пробел в коде визуально неотличим от обычного.
Семантическая разметка
Зачем нужна семантика: доступность, SEO, ассистивные технологии
Семантическая разметка — способ структурирования веб-страницы с использованием элементов, которые ясно передают смысл их содержимого. Большинство HTML-тегов уже несут семантическую нагрузку: <h1> отмечает заголовок первого уровня, <p> — абзац, <ul> — ненумерованный список. В HTML5 были добавлены специальные секционирующие теги — <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> — позволяющие выразить не только смысл отдельных фрагментов, но и общую структуру страницы.
Семантичная разметка преследует три практические цели:
- доступность (англ. accessibility): ассистивные технологии, в первую очередь программы чтения с экрана (англ. screen reader), используют семантическую разметку для построения навигации по странице. Пользователь скринридера может перейти к следующему
<h2>или попасть в основной блок<main>одной командой — но только если эти элементы расставлены; - поисковая оптимизация (англ. Search Engine Optimization, SEO): поисковые роботы используют семантическую разметку для понимания иерархии и важности контента;
- сопровождаемость кода: разметка с осмысленными именами тегов читается быстрее, чем сплошное полотно из
<div>.
Секционирующие элементы: header, nav, main, article, section, aside, footer
Секционирующие теги используются для определения структуры страницы и организации контента в крупные смысловые блоки:
<header>— заголовочная часть страницы или отдельного раздела;<nav>— основная навигация сайта;<main>— основной контент страницы (уникальный для каждой страницы; на странице должен быть ровно один такой элемент);<section>— логически связанный раздел контента;<article>— независимый контент, который имеет смысл и вне страницы (статья, пост блога, карточка товара);<aside>— боковой блок с дополнительной информацией, связанной с основным контентом косвенно (врезки, сноски, справочные блоки);<footer>— нижняя часть страницы или раздела с контактами, копирайтом, ссылками.
Пример типового использования:
<header>
<h1>Название отличного сайта</h1>
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Наши услуги</h2>
<p>Мы предоставляем лучшие решения.</p>
</section>
<aside>
<h3>Полезные ссылки</h3>
<ul>
<li><a href="/blog">Блог</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Все права защищены.</p>
</footer>
Текстовые и групповые элементы: figure, figcaption, details, summary, dialog
Помимо секционирующих, в HTML5 есть набор текстовых и групповых элементов для разметки отдельных смысловых единиц:
<figure>— контейнер для иллюстраций, схем, фотографий, фрагментов кода, таблиц, на которые ссылается основной текст;<figcaption>— подпись к содержимому<figure>, обычно первый или последний дочерний элемент;<details>и<summary>— раскрывающийся блок: пользователь видит<summary>, а развёрнутое содержимое<details>показывается по клику. Готовая встроенная функциональность аккордеона без JavaScript;<dialog>— модальное или немодальное диалоговое окно, открываемое через DOM-методshowModal(). Современная замена ручных реализаций модальных окон поверх<div>;<mark>— выделение фрагмента, который требует внимания читателя (например, найденный поиском текст);<time>— дата или время в машинно-читаемой форме (<time datetime="2026-04-22">22 апреля 2026</time>);<address>— контактная информация автора или владельца раздела;<cite>— указание на источник или название цитируемой работы;<blockquote>— блочная цитата большого объёма.
Пример сочетания нескольких контентных элементов:
<article>
<figure>
<img src="cover.jpg" alt="Обложка статьи">
<figcaption>Обложка статьи</figcaption>
</figure>
<p>Дата публикации: <time datetime="2026-04-22">22 апреля 2026</time></p>
<details>
<summary>Аннотация</summary>
<p>Краткое содержание статьи, раскрываемое по клику.</p>
</details>
</article>
Сравнение семантичной разметки и «div-ада»
Среди всех HTML-элементов отдельно стоит выделить <div>. Этот элемент — конструкционный контейнер: он не несёт семантического значения и без стилизации невидим для пользователя. Та же страница, что в примере выше, могла бы быть собрана исключительно на <div>:
<div>
<h1>Название отличного сайта</h1>
<div>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</div>
</div>
<div>
<div>
<h2>Наши услуги</h2>
<p>Мы предоставляем лучшие решения.</p>
</div>
</div>
<div>
<p>© 2026 Все права защищены.</p>
</div>
Визуально после рендера обе страницы могут выглядеть идентично. Но, как несложно заметить, разметка на сплошных <div> менее читаема, и — что важнее — она негативно влияет на SEO и доступность: поисковые роботы и скринридеры теряют возможность понять, где здесь шапка, где навигация, а где основной контент. Подобная практика получила в индустрии полуироничное название «div-ад» (англ. div soup) и считается антипаттерном. Простое правило: если для смыслового блока существует подходящий семантический тег — использовать его, а к <div> прибегать там, где нужен именно конструкционный контейнер для целей вёрстки.
Метаинформация документа
Метатеги управления рендерингом и индексацией
Раздел <head> помимо подключения ресурсов содержит набор метатегов, передающих браузеру и внешним системам сведения о документе. Среди практически значимых:
<meta name="description" content="...">— короткое описание страницы, используемое поисковыми системами в качестве сниппета в результатах поиска. В пределах 150–160 символов;<meta name="robots" content="index, follow">— инструкция поисковым роботам: индексировать ли страницу и переходить ли по ссылкам с неё. Значенияnoindex,nofollowисключают страницу из индекса или запрещают переход по её ссылкам;<link rel="canonical" href="...">— указание канонического URL страницы. Используется, когда одна и та же страница доступна по нескольким адресам, чтобы поисковые системы не считали их дубликатами;<link rel="icon" href="favicon.svg">— пиктограмма страницы во вкладке браузера, в избранном, в результатах поиска.
Встречающийся в старой разметке <meta http-equiv="X-UA-Compatible" content="IE=edge"> относился к режимам совместимости Internet Explorer; с выводом IE из поддержки в 2022 году тег стал историческим артефактом и в новой разметке не нужен.
Метатег <meta name="keywords"> исторически использовался для перечисления поисковых запросов, по которым автор хотел бы видеть страницу в выдаче. Современные поисковые системы его игнорируют — он остался как памятник эпохе массового SEO-спама.
Системы разметки метаданных
Помимо базовых метатегов, которые читают сами браузеры и поисковые роботы, существует ряд внешних систем разметки — протоколов и словарей, с помощью которых страница сообщает о себе сторонним сервисам: соцсетям, мессенджерам, агрегаторам, поисковым движкам. Технически все они выражаются через те же <meta> и <link> в <head> либо через атрибуты прямо на содержательной разметке, но логически это отдельный слой «разметки про разметку».
Задачи, которые решают такие системы, сводятся к двум:
- сформировать превью при публикации ссылки — карточку с заголовком, описанием и изображением в соцсетях, мессенджерах, поисковых сниппетах (этим занимается протокол Open Graph и родственные ему Twitter Cards);
- описать содержимое страницы как структурированные сущности — товар, событие, рецепт, организацию, статью — в формате, который поисковые системы могут использовать для расширенных сниппетов и агрегаций (этим занимаются словарь schema.org и форматы его записи: JSON-LD, Microdata, RDFa).
Доступность на уровне разметки
Доступность (англ. accessibility, a11y) — свойство веб-страницы быть пригодной к восприятию пользователями с разными возможностями: незрячими и слабовидящими, людьми с моторными или когнитивными нарушениями, пользователями в условиях плохой сети или нестандартного устройства ввода. Практически это означает, что страница должна корректно работать не только при визуальном просмотре мышью, но и при навигации клавиатурой, при озвучивании программой чтения с экрана (англ. screen reader), при увеличенном масштабе, при контрастной теме. Разработка с учётом доступности — не отдельная опция для узкой аудитории, а часть нормального качества продукта: те же приёмы, которые делают страницу пригодной для скринридера, улучшают её SEO, облегчают автоматическое тестирование и делают интерфейс устойчивее к нестандартным условиям использования.
Международный стандарт доступности — Web Content Accessibility Guidelines (WCAG), разрабатываемый W3C в рамках инициативы WAI (Web Accessibility Initiative). WCAG определяет четыре базовых принципа — воспринимаемость, управляемость, понятность, надёжность — и формулирует проверяемые критерии соответствия на трёх уровнях: A, AA (целевой для большинства публичных сайтов) и AAA. Дополняет стандарт спецификация WAI-ARIA, описывающая роли (role), состояния и свойства (aria-*), которыми размечаются кастомные интерактивные виджеты, когда встроенной семантики HTML недостаточно.
На уровне разметки грамотная доступность держится на нескольких простых подходах: логический порядок элементов в HTML соответствует порядку, в котором контент должен восприниматься (CSS может переупорядочить его визуально, но скринридер читает исходник); заголовки <h1>–<h6> образуют последовательную иерархию и работают для скринридера как навигация; семантические теги используются вместо анонимных <div> (см. предыдущий раздел); у каждого <img> задан осмысленный alt (пустой alt="" — явный сигнал декоративности, отсутствующий атрибут — ошибка). Действует устойчивая формулировка, известная как первое правило ARIA: «Не используйте ARIA, если можно обойтись нативным HTML-элементом». Нативные <button>, <a>, <input> из коробки получают правильную семантику, поведение клавиатуры и фокус — ARIA нужен только там, где этих средств недостаточно.
Базовую проверку доступности дают бесплатные инструменты, доступные прямо в браузере: расширение axe DevTools, встроенный в Chrome DevTools аудит Lighthouse, вкладка Accessibility с деревом доступности. Они быстро ловят типовые нарушения, но не заменяют ручной проверки клавиатурой и реальным скринридером, которая остаётся стандартом.
Итоги темы
Веб-страница — это конечный результат цепочки «URL → HTTP-запрос → HTML-документ → рендер браузером». В этой цепочке HTML играет роль базового языка, описывающего структуру и смысл контента, тогда как оформление и поведение возложены на CSS и JavaScript. Современный HTML — это Living Standard, поддерживаемый WHATWG; его развитие синхронизируется с реализациями в основных браузерных движках (Blink, WebKit, Gecko) через инициативы вроде Interop.
Корректная разметка строится из трёх слоёв: правильная структура документа (DOCTYPE, <html>, <head>, <body>), осмысленный выбор семантических тегов вместо сплошных <div> и согласованная метаинформация. Поверх этой основы накладывается забота о доступности: логический порядок элементов, иерархия заголовков, осмысленные атрибуты alt, минимально необходимое использование ARIA. Эти решения принимаются на самом раннем этапе и стоят дёшево, если о них помнить с первой строки разметки, и дорого — если возвращаться к ним постфактум.
В следующей теме мы перейдём к языку CSS и научимся управлять оформлением страницы, сохраняя смысловую структуру, заложенную здесь.
Литература
- Nelson T. H. A File Structure for the Complex, the Changing and the Indeterminate. — Proceedings of the 1965 20th National Conference, 1965, С. 84–100, DOI: 10.1145/800197.806036.
- Berners-Lee T. Information Management: A Proposal. — CERN, 1989, https://www.w3.org/History/1989/proposal.html.
- Garsiel T., Irish P. How browsers work: Behind the scenes of modern web browsers. — 2011, http://taligarsiel.com/Projects/howbrowserswork1.htm.
- Kosaka M. Inside look at modern web browser. — 2018, https://developer.chrome.com/blog/inside-browser-part1.