HTML

Материал из llmdocs — справочник разработчика
HTML
Полное названиеHyperText Markup Language
АвторТим Бернерс-Ли
Появился1991
СтандартHTML Living Standard (WHATWG)
Расширение файлов.html, .htm
MIME-типtext/html
Связанные технологииCSS, JavaScript, DOM

HTML (англ. HyperText Markup Language — «язык гипертекстовой разметки») — язык, которым описывается структура веб-страницы: заголовки, абзацы, списки, ссылки, изображения, таблицы, формы. Браузер читает HTML-документ, строит из него дерево объектов DOM и отображает страницу. Внешний вид задаёт CSS, а поведение — JavaScript; HTML отвечает за содержимое и его смысл.

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

История

Тим Бернерс-Ли создал HTML в CERN в 1990–1991 годах вместе с протоколом HTTP и первым браузером. Первое описание «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 состоит из элементов, записанных тегами в угловых скобках. Элементы могут иметь атрибуты и вкладываться друг в друга:

<!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), заголовок вкладки, стили, описание для поисковиков.
  • В <body> — видимое содержимое.
  • Атрибут lang помогает экранным дикторам и переводчикам, viewport — корректному отображению на телефонах.

Семантика

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

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

Семантика важна для доступности — экранные дикторы строят по ней навигацию, — для поисковых систем и для машинной обработки страниц, в том числе языковыми моделями.[5] Кнопка, сделанная из <div>, не получает фокус с клавиатуры и не объявляется диктором как кнопка.

Формы

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

<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 и генераторы статических сайтов, которые превращают Markdown в страницы. Справочник по всем элементам и атрибутам с примерами — на MDN.[2]

См. также

Источники

  1. WHATWG — HTML Living Standard
  2. MDN — HTML: HyperText Markup Language
  3. W3C — Memorandum of Understanding between W3C and WHATWG (2019)
  4. RFC 1866 — Hypertext Markup Language — 2.0
  5. W3C — Web Content Accessibility Guidelines (WCAG) 2.2
  6. W3C Markup Validation Service