Введение в HTML

Что такое HTML

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

Что важно:

• Не язык программирования. Нет логики, условий, циклов.
• Язык разметки. Теги описывают смысл содержимого.
• Основа любого сайта. CSS и JavaScript работают поверх HTML.

Краткая история

Правило: сегодня актуален HTML Living Standard — не «HTML5», а постоянно обновляемый стандарт.

Как работает браузер

Путь от HTML до картинки:

HTML → DOM-дерево → CSSOM → Render tree → Layout → Paint → Экран

Что важно:

• DOM (Document Object Model) — дерево тегов в памяти.
• Рендер — браузер решает, как отрисовать каждый элемент.
• HTML описывает ЧТО, CSS — КАК.

Анатомия тега

Основной синтаксис:

<p class="intro">Привет, мир</p>

Разбор:

• <p> — открывающий тег.
• class="intro" — атрибут.
• Привет, мир — содержимое.
• </p> — закрывающий тег.

Парные и одиночные теги

Парные (с закрывающим):

<h1>Заголовок</h1>
<p>Абзац</p>
<div>Блок</div>

Одиночные (void elements):

<img src="cat.jpg" alt="Кот">
<br>
<hr>
<input type="text">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

⚠️ Void-элементы не имеют закрывающего тега и не содержат контента.

Атрибуты

Основные:

• id — уникальный идентификатор.
• class — класс (может быть несколько через пробел).
• style — inline-стили.
• data-* — пользовательские данные для JS.
• title — подсказка при наведении.
• hidden — скрыть элемент.

Пример:

<button
    id="submit-btn"
    class="btn btn--primary"
    data-action="submit"
    title="Отправить форму"
>Отправить</button>

Первый документ

<!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> — метаданные (не видны на странице).
• <body> — видимый контент.

Что описывает HTML

Не «как выглядит», а «что это»:

<!-- Плохо: див ради дива -->
<div class="big-red-text">Заголовок статьи</div>

<!-- Хорошо: смысловой тег -->
<h1>Заголовок статьи</h1>

Что даёт:

• SEO — поисковики понимают структуру.
• Доступность — скринридеры читают правильно.
• Поддержка — код читаем для людей.
• Стили — CSS применяется по семантике.

Роль HTML в стеке

Три технологии:

• HTML — структура и смысл.
• CSS — внешний вид.
• JavaScript — поведение и интерактивность.

Правило: не смешивать. Стили — в CSS, логика — в JS, структура — в HTML.

Инструменты

Что нужно:

• Редактор — VS Code, WebStorm, Cursor.
• Расширение Live Server — автообновление при сохранении.
• Браузер — Chrome / Firefox + DevTools.
• Валидатор — validator.w3.org.

VS Code — минимум расширений:

• Live Server.
• Prettier — форматирование.
• HTML CSS Support — автодополнение.
• Auto Rename Tag — парные теги.

DevTools

F12 или Ctrl+Shift+I.

Основное:

• Elements — DOM-дерево, стили.
• Console — ошибки, логи.
• Network — запросы.
• Lighthouse — аудит производительности и SEO.

Правило: DevTools — главный инструмент верстальщика. 80% отладки — здесь.

Как проверить

Валидация:

https://validator.w3.org/

Что проверяет:

• Правильность вложенности.
• Закрытые теги.
• Обязательные атрибуты.
• Устаревшие теги.

Правило: валидный HTML — база. Ошибки в разметке ломают CSS и JS.

Практика

1. Создайте файл index.html.

2. Вставьте базовый шаблон (см. выше).

3. Измените title и содержимое body.

4. Откройте в браузере — двойной клик по файлу или Live Server.

5. Откройте DevTools — посмотрите DOM-дерево.

6. Валидируйте на validator.w3.org.

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

1. Незакрытые теги:

<p>Текст
<p>Ещё текст

Решение: закрывать все парные теги.

2. Вложенность:

<p>Текст <div>блок</div></p>

⚠️ <div> не может быть внутри <p> — браузер разорвёт.

3. Отсутствие DOCTYPE:

Браузер переходит в quirks mode → странное поведение

Решение: всегда <!DOCTYPE html>.

4. id дублируется:

<div id="box"></div>
<div id="box"></div>

Решение: id уникален. Для повторяющихся — class.

5. Кириллица без charset:

Кракозябры

Решение: <meta charset="UTF-8">.

6. Отсутствие alt у картинок:

<img src="cat.jpg">

Решение: всегда alt — для доступности и SEO.

7. Устаревшие теги:

<center>Текст</center>
<font color="red">Текст</font>

Решение: CSS. Теги <center>, <font>, <marquee> — не использовать.

8. Тег под вид, а не под смысл:

<div class="title">Заголовок</div>

Решение: <h1> для заголовка.

Итог

• HTML — язык разметки, не программирования.
• Описывает смысл, не внешний вид.
• DOM — дерево в памяти браузера.
• Теги: парные и одиночные (void).
• Атрибуты: id, class, data-*.
• Базовый шаблон — DOCTYPE, html, head, body.
• Семантика важнее внешнего вида.
• DevTools — основной инструмент.
• Валидатор — проверка.

Дальше — структура HTML-документа.