Мой дэйли дайджест

одно техническое понятие в день

HTML

28 мая 2026 · ~12 мин чтения

формат веб разметка история стандарт

HTML

HTML (HyperText Markup Language) — это язык разметки, которым описывают структуру и смысл документа в вебе. Файл с расширением .html — это, по сути, обычный текст с «тегами»-метками, которые сообщают браузеру: вот это заголовок, вот это абзац, вот это ссылка, вот это картинка.

История

HTML — один из тех редких случаев, когда у технологии есть один автор и один год рождения.

1989 — идея. Тим Бернерс-Ли (Tim Berners-Lee), британский физик-программист, работал в CERN (Европейская организация по ядерным исследованиям, под Женевой). У него была банальная боль: учёные из разных стран обмениваются документами, а каждый формат — свой. Он написал служебную записку «Information Management: A Proposal» — там предложил универсальный способ ссылаться из одного документа на другой. Босс на записке вывел резолюцию «vague but exciting» («туманно, но любопытно») — и разрешил поэкспериментировать.

1990 — первая реализация. Бернерс-Ли в одиночку, на компьютере NeXT (тот самый, который Стив Джобс продавал после ухода из Apple), пишет:

Тегов в той версии было около двух десятков: <title>, <h1>–<h6>, <p>, <a>, <ul>, <li>, <dl> и ещё пара. Никаких картинок, форм, таблиц.

1991 — публикация. В августе Бернерс-Ли публикует первый общедоступный документ с описанием HTML на телеконференции alt.hypertext. Эту дату многие считают «днём рождения веба».

1993 — Mosaic и тег <img>. Студент Иллинойского университета Марк Андриссен (Marc Andreessen) пишет браузер Mosaic, и они с командой добавляют революционный тег <img> — теперь в страницы можно вставлять картинки. Веб моментально перестаёт быть текстовым гетто для физиков и становится массовым.

1995 — HTML 2.0 (RFC 1866). Первая попытка стандартизации. Появляются формы (<form>, <input>), таблицы. Стандартом занимается IETF — та же организация, что делает RFC для интернет-протоколов.

1997 — HTML 3.2 и HTML 4.0. Стандарт переходит в W3C (World Wide Web Consortium) — консорциум, который Бернерс-Ли основал в 1994 году специально для веб-стандартов. Появляются скрипты (<script>), стили (<style>), фреймы.

1999 — HTML 4.01. Долгожителем оказался: эта версия была актуальной почти десять лет.

2000–2007 — XHTML. Попытка переписать HTML по правилам XML — строже, требовательнее (каждый тег надо закрывать, всё в нижнем регистре, и т. п.). Веб-разработчики дружно сказали «нет, спасибо», и XHTML 2.0 тихо умер.

2004 — основание WHATWG. Группа инженеров из Mozilla, Apple и Opera, недовольная медлительностью W3C, организует свою рабочую группу — WHATWG (Web Hypertext Application Technology Working Group). Они начинают пилить новый HTML параллельно официальному.

2014 — HTML5. Официальная рекомендация W3C. Появляются <video>, <audio>, <canvas>, семантические теги (<header>, <nav>, <article>, <footer>), формы с типами (<input type="email">, type="date"), <svg> прямо в разметке.

2019 — HTML Living Standard. W3C и WHATWG договариваются: единый стандарт ведёт WHATWG, и теперь у HTML нет «версий». Это живой стандарт — обновляется постоянно, иногда несколько раз в неделю. Поэтому говорить «HTML 6» уже неправильно: после HTML5 версий нет.

HTML устарел концептуально, но не на практике

Все попытки заменить HTML более «правильным» форматом провалились (XHTML, XML-based UI-форматы, всякие Flash и Silverlight). Веб победил именно потому, что HTML прощает ошибки: незакрытый тег, опечатка в атрибуте — браузер всё равно покажет страницу. Это раздражает педантов, но работает 35 лет подряд.

Что это такое

В физическом смысле HTML — это обычный текстовый файл. Если открыть его в блокноте, ты увидишь что-то такое:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Привет</title>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Это первый абзац.</p>
  <p>А вот <a href="https://example.com">ссылка наружу</a>.</p>
</body>
</html>

Всё, что в угловых скобках <...>, — это теги. Они работают парами: открывающий и закрывающий (<p>...</p>). Текст между ними — содержимое, к которому тег приписывает смысл.

Ключевые понятия:

Чем HTML отличается от похожих штук:

HTML vs Markdown. Markdown (формат, в котором написан этот файл) — тоже разметка, но проще. В Markdown # Заголовок превращается в <h1>Заголовок</h1>. То есть Markdown в итоге всегда компилируется в HTML — браузеры понимают только HTML. Markdown — это «удобная запись для людей», HTML — «универсальная запись для машин».

HTML vs XML. XML (eXtensible Markup Language) — старший родственник, тоже из тегов в угловых скобках. Но XML строгий: незакрытый тег — ошибка, парсер откажется работать. HTML прощает почти всё. Ещё разница: XML не определяет, что значит каждый тег — там можно изобретать свои. В HTML набор тегов фиксированный и каждому приписан смысл.

HTML vs JSON. JSON — это формат данных (ключ → значение), HTML — формат документа (структура с вложенностью и смыслом каждого блока). На JSON неудобно описывать абзац с курсивом внутри ссылки; HTML для этого и придуман.

Аналогии из жизни

Аналогия 1: разметка в книге. Представь рукопись, которую автор отдаёт редактору. Редактор красным карандашом помечает: «это глава», «это эпиграф», «это сноска», «это курсив». HTML — те же пометки, только машиночитаемые. Браузер берёт текст с пометками и «верстает» книгу по правилам.

Где ломается: в книге пометки временные — финальная типография уберёт их и оставит только результат. В HTML пометки навсегда: браузер каждый раз заново «верстает» страницу из исходника, разметка остаётся.

Аналогия 2: чертёж дома. Архитектор рисует план: тут стена, тут окно, тут дверь. Прораб смотрит и строит. HTML — это план, браузер — прораб, экран — построенный дом.

Где ломается: у настоящего чертежа есть точные размеры — «окно 120 × 80 см». В HTML размеры обычно НЕ указывают — это работа CSS (соседний язык про стили). HTML говорит «здесь окно», CSS — «оно вот такого размера и такого цвета». Чертёж совмещает оба этих языка, а в вебе их специально разделили.

Аналогия 3: партитура. Композитор пишет партитуру: вот ноты для скрипки, вот для виолончели. Оркестр играет. HTML — партитура веб-страницы, браузер — оркестр.

Где ломается: партитуру играют один раз, а HTML «играется» каждый раз, когда кто-то открывает страницу — и каждый «оркестр» (Chrome, Safari, Firefox) играет немного по-своему. Поэтому одна страница может выглядеть в разных браузерах слегка иначе, и это нормально.

Как это работает

Когда ты вводишь в браузере адрес и жмёшь Enter, происходит примерно следующее:

  1. DNS-запрос. Браузер узнаёт IP-адрес сервера (см. предыдущие статьи про HTTPS).
  2. HTTP-запрос. Браузер просит у сервера: «отдай мне страницу по такому-то пути».
  3. Сервер отвечает. В теле ответа лежит тот самый HTML-файл — просто длинная строка с тегами.
  4. Парсинг. Браузер читает файл и строит из него DOM (Document Object Model) — дерево объектов. Каждый тег становится узлом дерева. Заголовок — родитель, абзацы внутри — дети.
  5. Подгрузка ресурсов. Если в HTML есть <link rel="stylesheet" href="styles.css">, <script src="app.js"> или <img src="logo.png"> — браузер делает отдельные запросы за каждым файлом. Иногда десятки запросов на одну страницу.
  6. Применение стилей. CSS-файл объясняет, как должен выглядеть каждый элемент: цвет, размер, расположение.
  7. Выполнение скриптов. JavaScript может менять DOM на лету: добавлять элементы, удалять, реагировать на клики.
  8. Рендеринг. Браузер рисует итоговую картинку на экране.

Псевдосхема:

твой клик
    ↓
браузер: GET /страница
    ↓
сервер: <html>...</html>
    ↓
DOM-дерево  ←  парсер HTML
    ↓
+ стили (CSS)
+ поведение (JS)
    ↓
рендер на экран

Важная штука: HTML — декларативный язык. Ты не пишешь «нарисуй прямоугольник 200 пикселей в высоту, в нём текст с отступом 12». Ты пишешь «это абзац», а как его отрисовать — решают браузер и CSS вместе. В этом сила: тот же HTML можно открыть в браузере на айфоне, на десктопе, в screen reader для слепых, на умных часах — каждый отрендерит по-своему.

И ещё: HTML по своей природе forgiving (прощающий). В строгих языках одна ошибка — и программа не запустится. В HTML можно не закрыть тег, не поставить кавычки вокруг атрибута, написать заглавными — браузер всё равно попытается отрендерить. Внутри браузера сидит сложнейший алгоритм восстановления после ошибок, описанный прямо в стандарте. Этот «парсер с самовосстановлением» — одна из причин, почему написать новый браузер с нуля почти невозможно.

Кэш браузера держит старый HTML

Один из самых частых граблей: ты выкатил новую версию страницы, обновил index.html, а пользователи продолжают видеть старую. Причина — браузер кэширует HTML на минуты или часы и не идёт за новой версией. Решение называется cache-busting: к именам подгружаемых файлов (CSS, JS, картинки) добавляют параметр ?v=20260527c, и при изменении версии браузер видит новую ссылку и перезагружает файл. На сам HTML это не действует — поэтому для HTML обычно настраивают короткий TTL в заголовках ответа, или просят пользователя сделать Cmd+Shift+R (жёсткая перезагрузка без кэша).

Где встречается в обычной жизни

Где встречается в IT и бизнесе

Кто пользуется

Все, кто пользуется интернетом. Если конкретнее — по разным оценкам, в мире сейчас примерно 1,1 миллиарда сайтов (точно никто не считает; цифру даёт Internet Live Stats). Из них активных — где-то 200 миллионов. Все они в основе своей — HTML.

Масштаб инженерии: команда Chrome в Google, по разным оценкам, насчитывает несколько тысяч человек. Только парсер HTML и движок рендеринга (Blink) — это, по слухам, миллионы строк кода на C++. Аналогичные движки: WebKit (Apple) — основа Safari, Gecko (Mozilla) — основа Firefox.

Поверх HTML работают огромные индустрии:

Альтернативы и конкуренты

PDF. Плюс: выглядит одинаково везде, на любом устройстве. Минус: фиксированный размер страницы, текст не подстраивается под экран телефона, нельзя интерактив.

Native-приложения (iOS, Android). Плюс: быстрее, доступ к камере/GPS/уведомлениям, кастомный UI. Минус: надо писать отдельную версию под каждую платформу, обновления через магазин, дорого в разработке.

Flutter / React Native. Плюс: один код — несколько платформ. Минус: всё равно нужно собирать приложение, нельзя просто отправить ссылку.

Email (plain text). Плюс: гарантированно дойдёт и прочитается. Минус: ни картинок, ни форматирования, ни кнопок.

XML / SVG. Плюс: строгий формат, удобный для машинного парсинга. Минус: SVG — про векторную графику, не про документы; XML — про данные, не про человекочитаемое.

Когда НЕ стоит использовать

Связанные понятия

Литература и источники

Где встретилось у меня

Вчера в одном из проектов (рабочий сайт компании на nm2.duckdns.org) пришлось разбираться с кэшем браузера: задеплоенная новая версия не отображалась, пока не вставили cache-busting ?v=... ко всем ссылкам на CSS и JS из HTML. Параллельно копался в шаблонах квизового сервиса — там HTML-шаблоны на сервере подставляют тексты из базы и отдают браузеру.

Краткое резюме