HTML-разметка: что это и как устроена¶

HTML-разметка — это система описания структуры и содержания веб-страницы с помощью специальных тегов, разработанная Тимом Бернерсом-Ли в начале 1990-х годов и ставшая основным стандартом представления информации в интернете. Слово «разметка» (англ. markup) означает, что текст снабжается вставками-метками, которые указывают браузеру, какую часть информации и каким образом отображать.

¶История

Идея машинной разметки документов возникла ещё в 1960-х годах в проекте IBM «Генеральный язык разметки» (Generalized Markup Language, GML), разработанном Чарльзом Голдфарбом, Эдвардом Моссом и Дэвидом Райтом. GML позволил отделить содержание документа от его оформления, что стало основой для последующих стандартов.

В 1986 году Международная организация по стандартизации (ISO) выпустила стандарт ISO 8879 — SGML (Standard Generalized Markup Language), гибкий и мощный язык разметки, сложный в использовании. На его основе Тим Бернерс-Ли в 1991 году создал HTML (HyperText Markup Language) — упрощённый язык, специально предназначенный для гипертекстовых документов в сети. Первые версии HTML были небольшими: в HTML 2.0 (1995) насчитывалось около 70 тегов, тогда как современный стандарт HTML5 включает более сотни.

¶Устройство разметки

HTML-документ состоит из тегов, заключённых в угловые скобки. Простейший пример:

``html <p>Это абзац текста.</p> ``

Здесь <p> — открывающий тег, </p> — закрывающий, а между ними находится содержимое. Многие теги могут содержать атрибуты, уточняющие их поведение:

``html <a href="https://example.ru">Ссылка</a>; <img src="picture.jpg" alt="Описание изображения"> ``

Тег <a> создаёт гиперссылку, атрибут href указывает адрес, <img> вставляет изображение, src — путь к файлу, alt — альтернативный текст для незрячих пользователей и поисковых систем.

¶Структура документа

Современный HTML-документ имеет строгую иерархию:

• <!DOCTYPE html> — объявление типа документа;
• <html> — корневой элемент;
• <head> — служебная информация: заголовок страницы, подключаемые стили и скрипты, метаданные;
• <body> — видимое содержимое страницы.

Внутри <body> размещаются структурные теги: <header>, <nav>, <main>, <article>, <section>, <footer>. Их назначение — семантически описать части страницы, что помогает поисковым системам и программам чтения с экрана понимать её структуру.

¶Классификация тегов

¶Валидность и семантика

Валидная разметка — это разметка, соответствующая спецификации стандарта. Невалидный код (например, незакрытые теги, вложенные блоки <p> друг в друга) может приводить к некорректному отображению страницы. Проверить валидность можно через онлайн-сервис W3C Markup Validation Service.

Семантическая разметка — использование тегов по их прямому назначению. Злоупотребление тегом <div> («универсальный контейнер») вместо смысловых тегов считается антипаттерном: страница остаётся визуально корректной, но теряет смысловую структуру.

¶Связь с другими технологиями

HTML описывает структуру, но не внешний вид. Для оформления используется CSS (Cascading Style Sheets), подключаемый через тег <link> или блок <style>. Для интерактивности применяется JavaScript, подключаемый через <script>. Совокупность этих трёх технологий — основа фронтенд-разработки.

¶Роль в веб-разработке

HTML является обязательным языком для любой веб-страницы: даже если страница построена на фреймворках (React, Vue, Angular), в итоге браузер получает HTML-документ. Поисковая оптимизация, доступность для людей с ограниченными возможностями и корректная работа с экранными дикторами напрямую зависят от качества разметки.

Источники:

• Тим Бернерс-Ли. «Weaving the Web» (1999)
• Спецификация HTML5, W3C / WHATWG
• ISO 8879:1986 — Standard Generalized Markup Language
• «HTML & CSS: Design and Build Websites», Джон Дакетт