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]