Что такое HTML: основа структуры веб-страниц

Что такое HTML?

HTML — это протокол сетевого обмена, который определяет, как браузер отправляет запросы и получает ответы от сервера, включая заголовки и коды состояния.

HTML — это язык разметки, который задаёт структуру и смысл веб‑контента; браузер парсит его, строит DOM и затем отображает страницу вместе со стилями и скриптами.

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

HTML — это язык программирования, предназначенный для вычислений в браузере; он содержит переменные, циклы и условия и напрямую исполняется движком как код.

Что такое HTML

HTML (HyperText Markup Language) — язык разметки, предназначенный для описания структуры и смысла (семантики) содержимого веб‑страницы: заголовков, абзацев, списков, ссылок, изображений, форм и прочих частей документа.

HTML не является языком программирования: в нём нет вычислительной модели с переменными, циклами и ветвлениями как у JavaScript, поэтому HTML описывает “что это такое” (например, “это заголовок”, “это навигация”, “это ссылка”), а не “что делать”.

Современное понимание HTML строится вокруг веб‑платформы:

HTML задаёт структурный каркас и смысл.
CSS задаёт представление (оформление).
JavaScript задаёт поведение (интерактивность) и может изменять структуру через DOM.

HTML развивается как Living Standard: спецификация обновляется непрерывно, поэтому “актуальность” определяется не номером версии, а текущим состоянием стандарта и поддержкой в браузерах.

Из чего состоит HTML-документ

HTML‑документ — это текст, который браузер читает (парсит) и превращает во внутреннюю модель DOM (Document Object Model), то есть дерево узлов, с которым работают рендеринг, стили и скрипты.

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

Элемент: логическая часть документа, например p, a, header, main, article, section, button.
Теги: синтаксическая запись элемента; обычно есть открывающий и закрывающий, например p … </p>.
Атрибуты: параметры элемента в открывающем теге, например href, src, alt, id, class, name.
Текстовые узлы: текст внутри элементов; это отдельные узлы DOM.
Комментарии: существуют в исходнике и DOM, но не должны использоваться как носитель логики.

Базовый скелет HTML‑страницы:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>пример</title>
  </head>
  <body>
    <h1>заголовок</h1>
    <p>абзац с <a href="/about">ссылкой</a>.</p>
  </body>
</html>

Неверное представление, что HTML нужен только для “визуальной вёрстки”, приводит к типичным проблемам: слабая доступность (accessibility), плохая индексация, сложность поддержки и переиспользования компонентов.

Зачем нужен <!DOCTYPE html>:

Он переключает браузер в стандартизованный режим рендеринга (вместо “quirks mode”), что снижает вероятность странностей в разметке и стилях.

Типы элементов по форме записи:

Обычные (с парными тегами): div, p, a, section.
Пустые (void elements): img, br, meta, link, input (у них нет закрывающего тега и нельзя помещать внутрь содержимое).

Пример типичных пустых элементов:

<meta charset="utf-8">
<link rel="stylesheet" href="/styles.css">
<img src="/logo.png" alt="логотип">
<input type="email" name="email">

Атрибуты по смыслу:

Глобальные: применимы почти везде (например, id, class, hidden, title, lang, data-*).
Булевы: наличие атрибута означает “включено”, например disabled, checked, required.

Пример булевых атрибутов:

<button disabled>недоступно</button>
<input type="checkbox" checked>

Наличие id должно быть уникальным в пределах документа; повторение одинаковых id ломает предсказуемость поиска элементов и якорных ссылок.

Как HTML превращается в страницу (DOM, CSS, JS)

После получения HTML (обычно по HTTP) браузер запускает парсер, строит DOM и параллельно может запрашивать дополнительные ресурсы: CSS, изображения, шрифты, скрипты.

Схема “HTML → отображение”:

HTML-текст
  |
  v
Парсинг
  |
  v
DOM-дерево <---- JavaScript читает/изменяет DOM
  |
  v
CSSOM (модель стилей) + расчёт стилей
  |
  v
Render Tree (что реально рисуется)
  |
  v
Layout (геометрия) -> Paint (рисование) -> Composite (сборка слоёв)

Роль JavaScript в контексте HTML:

JavaScript может создавать/удалять элементы, менять атрибуты, добавлять классы, подписываться на события (клик, ввод, отправка формы).
Любое изменение DOM/атрибутов потенциально влияет на стили и перерисовку.

Пример: изменение текста в DOM (важно: исходник HTML не переписывается, меняется DOM в памяти):

<p id="status">загрузка...</p>
<script>
  const el = document.getElementById('status');
  el.textContent = 'готово';
</script>

Встраивание скриптов в середине документа без понимания порядка выполнения может приводить к ошибкам “элемент ещё не существует”; типовое решение — размещение `script` перед `</body>` или использование `defer` в `head`, например `script defer src="/app.js"`.

DOM — это не “HTML‑строка”, а объектная модель; поэтому сравнение “что написано в файле” и “что получилось в DOM” может отличаться из‑за правил парсинга и восстановления ошибок.

Семантика, доступность и типовые конструкции

Семантика — это выбор элементов по смыслу, а не по внешнему виду: button для действия, a для перехода по ссылке, nav для навигации, main для основного содержимого.

Практическое правило выбора:

Если происходит переход по URL, уместен a с href.
Если выполняется действие (открыть модалку, отправить запрос, переключить состояние), уместен button.
Если требуется просто контейнер без смысла, уместен div (но это крайний вариант, когда семантического элемента нет).

Пример семантической структуры страницы:

<header>
  <nav aria-label="основная навигация">
    <a href="/">главная</a>
    <a href="/articles">статьи</a>
    <a href="/contacts">контакты</a>
  </nav>
</header>

<main>
  <article>
    <h1>заголовок статьи</h1>

    <section>
      <h2>введение</h2>
      <p>основная мысль и контекст.</p>
    </section>

    <section>
      <h2>детали</h2>
      <ul>
        <li>пункт списка</li>
        <li>ещё пункт</li>
      </ul>
    </section>
  </article>
</main>

<footer>
  <p>служебная информация</p>
</footer>

Доступность (a11y) тесно связана с HTML, потому что:

Семантические элементы дают экранным дикторам и вспомогательным технологиям правильные роли.
Правильные подписи форм (label) делают поля понятными.
alt у изображений обеспечивает альтернативное описание.

Пример доступной формы:

<form action="/subscribe" method="post">
  <fieldset>
    <legend>подписка</legend>

    <label for="email">email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>

    <button type="submit">отправить</button>
  </fieldset>
</form>

Пример изображения с альтернативным текстом:

<img src="/team.jpg" alt="команда проекта на встрече">

Использование div вместо button для кликабельных элементов ухудшает доступность и управление с клавиатуры; даже при добавлении обработчика клика семантика и стандартное поведение теряются.

Таблица: “что выбрать по смыслу”

Задача	Корректный элемент	Почему
Переход на страницу	`a` (с `href`)	Это ссылка, участвует в навигации и истории
Запуск действия	`button`	Есть роль кнопки, клавиатурное управление, состояния
Основной контент	`main`	Помогает структуре документа и навигации
Самодостаточный материал	`article`	Материал можно читать отдельно (пост, карточка)
Часть материала	`section`	Логический раздел с заголовком
Навигация	`nav`	Явно обозначает меню/ссылки

Итого: HTML — основной язык разметки веба, описывающий структуру и семантику контента; браузер парсит HTML в DOM, а внешний вид обычно задаётся CSS, интерактивность — JavaScript.