# HTML

> Язык гипертекстовой разметки, задающий структуру и смысл содержимого веб-страниц; развивается как «живой стандарт» WHATWG.

Источник: https://llmdocs.ru/wiki/html/ · обновлено 2026-11-09 · лицензия CC BY-SA 4.0

- **Полное название**: HyperText Markup Language
- **Автор**: Тим Бернерс-Ли
- **Появился**: 1991
- **Стандарт**: HTML Living Standard (WHATWG)
- **Расширение файлов**: .html, .htm
- **MIME-тип**: text/html
- **Связанные технологии**: CSS, JavaScript, DOM
**HTML** (англ. *HyperText Markup Language* — «язык гипертекстовой разметки») — язык, которым описывается структура веб-страницы: заголовки, абзацы, списки, ссылки, изображения, таблицы, формы. Браузер читает HTML-документ, строит из него дерево объектов [DOM](https://llmdocs.ru/wiki/dom.md) и отображает страницу. Внешний вид задаёт [CSS](https://llmdocs.ru/wiki/css.md), а поведение — [JavaScript](https://llmdocs.ru/wiki/javascript.md); HTML отвечает за содержимое и его смысл.

HTML — фундамент веба: любая страница, будь то статический сайт или сложное веб-приложение, в итоге приходит в браузер как HTML.

## История

Тим Бернерс-Ли создал HTML в CERN в 1990–1991 годах вместе с протоколом [HTTP](https://llmdocs.ru/wiki/http.md) и первым браузером. Первое описание «HTML Tags» содержало около 18 элементов. HTML 2.0 стал стандартом IETF (RFC 1866) в 1995 году,[4] затем развитие перешло в консорциум W3C: HTML 3.2 (1997), HTML 4.01 (1999), XHTML 1.0 (2000) — версия на основе строгого XML.

В 2004 году разработчики браузеров Apple, Mozilla и Opera, недовольные курсом W3C на XHTML 2.0, основали группу **WHATWG** и начали развивать HTML эволюционно, с учётом реального поведения браузеров. Результат стал известен как **HTML5** (рекомендация W3C — 2014 год): семантические элементы, встроенные аудио и видео, `<canvas>`, новые типы полей форм. С 2019 года по соглашению W3C и WHATWG существует единая спецификация — **HTML Living Standard**, которая обновляется непрерывно, без номеров версий.[3][1]

## Устройство документа

HTML состоит из **элементов**, записанных **тегами** в угловых скобках. Элементы могут иметь **атрибуты** и вкладываться друг в друга:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример страницы</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav><a href="/">Главная</a> · <a href="/docs/">Документация</a></nav>
  </header>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Абзац текста со <a href="https://example.com">ссылкой</a> и <strong>важным</strong> словом.</p>
      <img src="diagram.png" alt="Схема работы протокола" width="640" height="360">
    </article>
  </main>
  <footer>© 2026</footer>
  <script src="app.js" defer></script>
</body>
</html>
```

- `<!DOCTYPE html>` включает стандартный режим отображения.
- В `<head>` — метаданные: кодировка (только [UTF-8](https://llmdocs.ru/wiki/unicode-utf8.md)), заголовок вкладки, стили, описание для поисковиков.
- В `<body>` — видимое содержимое.
- Атрибут `lang` помогает экранным дикторам и переводчикам, `viewport` — корректному отображению на телефонах.

## Семантика

Хорошая разметка описывает **смысл**, а не оформление. Вместо безликих `<div>` для всего подряд используют элементы, говорящие о роли содержимого:

| Элемент | Назначение |
|---|---|
| `<header>`, `<footer>` | шапка и подвал страницы или раздела |
| `<nav>` | навигация |
| `<main>` | основное содержимое (одно на страницу) |
| `<article>` | самостоятельная единица: статья, пост, карточка |
| `<section>` | тематический раздел с заголовком |
| `<aside>` | побочное содержимое: врезка, сноски |
| `<h1>`–`<h6>` | заголовки и их иерархия |
| `<button>`, `<a>` | действие и переход — не взаимозаменяемы |
| `<figure>`, `<figcaption>` | иллюстрация с подписью |

Семантика важна для [доступности](https://llmdocs.ru/wiki/accessibility.md) — экранные дикторы строят по ней навигацию, — для поисковых систем и для машинной обработки страниц, в том числе языковыми моделями.[5] Кнопка, сделанная из `<div>`, не получает фокус с клавиатуры и не объявляется диктором как кнопка.

## Формы

Формы собирают данные пользователя и отправляют их на сервер:

```html
<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">
  <button type="submit">Подписаться</button>
</form>
```

Типы полей (`email`, `number`, `date`, `tel`) дают подходящую клавиатуру на телефоне и встроенную проверку, а `<label>` связывает подпись с полем. Проверка в браузере — только удобство: сервер обязан проверять данные заново.

## Как браузер обрабатывает HTML

HTML прощает ошибки: спецификация точно описывает, как разбирать даже некорректную разметку, поэтому все браузеры строят одинаковое дерево DOM. Разбор идёт потоком: страница начинает отображаться до полной загрузки. Скрипты без атрибутов `defer` или `async` останавливают разбор, поэтому их подключают с `defer` или в конце `<body>`. Проверить разметку можно валидатором W3C.[6]

## HTML и генерация

HTML редко пишут вручную целиком: его генерируют шаблонизаторы на сервере, фреймворки на JavaScript и [генераторы статических сайтов](https://llmdocs.ru/wiki/static-site-generators.md), которые превращают [Markdown](https://llmdocs.ru/wiki/markdown.md) в страницы. Справочник по всем элементам и атрибутам с примерами — на MDN.[2]

## См. также

- [CSS](https://llmdocs.ru/wiki/css.md)
- [JavaScript](https://llmdocs.ru/wiki/javascript.md)
- [DOM](https://llmdocs.ru/wiki/dom.md)
- [Веб-доступность (a11y)](https://llmdocs.ru/wiki/accessibility.md)
- [Markdown](https://llmdocs.ru/wiki/markdown.md)

## Источники

1. [WHATWG — HTML Living Standard](https://html.spec.whatwg.org/)
2. [MDN — HTML: HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML)
3. [W3C — Memorandum of Understanding between W3C and WHATWG (2019)](https://www.w3.org/2019/04/WHATWG-W3C-MOU.html)
4. [RFC 1866 — Hypertext Markup Language — 2.0](https://www.rfc-editor.org/rfc/rfc1866)
5. [W3C — Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)
6. [W3C Markup Validation Service](https://validator.w3.org/)