Что такое HTML

HTML (HyperText Markup Language) -- язык гипертекстовой разметки, описывающий структуру и содержимое веб-страницы.

Зачем нужно

HTML -- фундамент веба. Каждая веб-страница -- это HTML-документ. Браузер получает HTML, парсит его и строит визуальное представление. Без HTML нет веб-страниц: ни текста, ни картинок, ни форм, ни ссылок.

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

Где используется

  • Все веб-сайты и веб-приложения
  • Email-рассылки (HTML-письма)
  • Электронные книги (EPUB основан на HTML)
  • Документация (многие генераторы выдают HTML)
  • Мобильные приложения (Cordova, Capacitor, WebView)
  • Десктопные приложения (Electron, Tauri)

Предпосылки

Никаких. HTML -- стартовая точка для изучения веб-разработки.

Что такое HTML

Расшифровка аббревиатуры

  • Hyper -- "сверх", выход за рамки линейного текста
  • Text -- текстовое содержимое
  • Markup -- разметка, аннотирование текста тегами
  • Language -- формальный язык с правилами

Роль HTML в вебе

Веб строится на трёх столпах:

Технология Роль Аналогия
HTML Структура и содержимое Скелет и органы
CSS Внешний вид Кожа, одежда
JavaScript Поведение и интерактивность Мышцы и нервы

HTML отвечает за семантику -- смысловое значение контента. Когда ты оборачиваешь текст в <h1>, ты говоришь: "это главный заголовок". Когда используешь <nav> -- "это навигация".

История и HTML5

Версия Год Ключевое
HTML 1.0 1993 Тим Бернерс-Ли, базовые теги
HTML 2.0 1995 Первый стандарт IETF
HTML 3.2 1997 Таблицы, апплеты
HTML 4.01 1999 CSS-отделение, фреймы
XHTML 1.0 2000 Строгий XML-синтаксис
HTML5 2014 Семантика, мультимедиа, API
HTML Living Standard сейчас Постоянно обновляется WHATWG

HTML5 -- не просто новая версия, а переход к Living Standard (живому стандарту). Его поддерживает WHATWG (Web Hypertext Application Technology Working Group). Новые фичи добавляются постоянно без смены номера версии.

Ключевые нововведения HTML5:

  • Семантические элементы (<header>, <footer>, <article>, <section>)
  • Встроенное мультимедиа (<video>, <audio>) без Flash
  • <canvas> для 2D-графики
  • Новые типы <input> (date, email, range и др.)
  • API: Geolocation, Web Storage, Web Workers, WebSocket

Как браузер рендерит HTML

Процесс от получения HTML до картинки на экране:

1. Загрузка     -- Браузер получает HTML-файл по HTTP(S)
2. Парсинг      -- Токенизация → построение DOM-дерева
3. CSSOM         -- Параллельно парсит CSS → CSSOM-дерево
4. Render Tree   -- DOM + CSSOM = Render Tree (что и как отображать)
5. Layout        -- Вычисление позиций и размеров элементов
6. Paint         -- Отрисовка пикселей на экране
7. Composite     -- Сборка слоёв в финальный кадр

DOM (Document Object Model) -- древовидное представление HTML-документа в памяти. JavaScript работает именно с DOM, а не с текстом HTML.

Простейший HTML-документ

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это мой первый HTML-документ.</p>
</body>
</html>

Разбор по строкам:

  • <!DOCTYPE html> -- объявление типа документа (HTML5)
  • <html lang="ru"> -- корневой элемент, язык русский
  • <head> -- метаинформация (не видна на странице)
  • <meta charset="UTF-8"> -- кодировка символов
  • <meta name="viewport" ...> -- адаптивность для мобильных
  • <title> -- заголовок вкладки браузера
  • <body> -- видимое содержимое страницы
  • <h1> -- заголовок первого уровня
  • <p> -- параграф текста

Как открыть HTML-файл

  1. Создай файл index.html
  2. Напиши HTML-код
  3. Открой файл в браузере (двойной клик или Ctrl+O)
  4. Или используй Live Server в VS Code для автообновления

Частые ошибки

Ошибка Почему плохо Как правильно
Не указан <!DOCTYPE html> Браузер переключается в quirks mode Всегда начинай с <!DOCTYPE html>
Не указан charset Кириллица может отображаться кракозябрами <meta charset="UTF-8"> в начале <head>
Не указан lang Screen readers не знают язык <html lang="ru">
Путают HTML с программированием Неверные ожидания HTML -- разметка, логика -- в JavaScript
Пропущены закрывающие теги Непредсказуемый рендеринг Всегда закрывай парные теги

Практика

  1. Создай файл index.html и напиши минимальный HTML5-документ
  2. Открой его в браузере и через DevTools (F12) посмотри вкладку Elements -- это и есть DOM
  3. Попробуй убрать <!DOCTYPE html> и посмотри, изменится ли что-то визуально
  4. Добавь заголовок <h1>, параграф <p>, и список <ul> с тремя пунктами
  5. Открой DevTools → Console и набери document.title -- так JavaScript читает DOM

Связанные темы

Ресурсы