Заголовки и абзацы

Заголовки (h1-h6) создают иерархию контента: h1 — главный заголовок страницы (только один!), h2 — разделы, h3 — подразделы и так далее. Абзацы (p) — основной способ представления текста. Правильная иерархия заголовков критична для SEO и доступности.

Шесть уровней заголовков:

• <h1> — главный заголовок страницы. Обычно один на страницу.
• <h2> — заголовок раздела
• <h3> — заголовок подраздела
• <h4>-<h6> — вложенность дальше

Важно: заголовки должны идти по порядку. Нельзя прыгать с h1 на h4 — это нарушает иерархию и путает скринридеры.

Абзацы (<p>):

• Каждый абзац — отдельный блок
• Пустая строка между абзацами = два абзаца
• Внутри абзаца можно использовать strong, em, a, span

h1 — только один на страницу:

• Это как название книги — не может быть двух
• Для заголовков разделов используйте h2

Иерархия для SEO:

• Поисковые системы используют заголовки для понимания структуры
• h1 — основная тема страницы
• h2 — ключевые разделы
• Неправильная иерархия = хуже позиция в поиске

Заголовки — как оглавление книги. h1 — название книги. h2 — главы. h3 — параграфы внутри глав. Вы не начнёте книгу сразу с подраздела — нужно начинать с главы.

**Самый простой:**

<h1>Мой сайт</h1>
<h2>О себе</h2>
<p>Я веб-разработчик.</p>
<h2>Проекты</h2>
<p>Мои лучшие работы.</p>

Базовая структура: h1 — заголовок страницы, h2 — разделы, p — текст.

**Простой:**

<h1>Гайд по CSS</h1>

<h2>Введение</h2>
<p>CSS — это язык стилей.</p>

<h2>Селекторы</h2>
<p>Селекторы определяют, какие элементы стилизовать.</p>

<h3>Классы</h3>
<p>Классы начинаются с точки.</p>

<h3>ID</h3>
<p>ID начинается с решётки.</p>

Правильная иерархия: h1 → h2 → h3. Каждый уровень логически вложен в предыдущий.

**Реальный пример:**

<h1>Продуктовая компания</h1>

<h2>О компании</h2>
<p>Мы производим <strong>натуральные</strong> продукты с 2020 года.</p>

<h2>Продукция</h2>

<h3>Напитки</h3>
<p>Соки и морсы <em>без добавления сахара</em>.</p>

<h3>Снеки</h3>
<p>Хрустящие чипсы из натуральных ингредиентов.</p>

<h2>Контакты</h2>
<p>Телефон: +7 (999) 123-45-67</p>

Реальный пример: сайт компании с правильной иерархией h1 → h2 → h3.

**Неправильно:** Использовать несколько h1 на странице

**Почему:** h1 — главный заголовок страницы. Несколько h1 запутывают поисковые системы и скринридеры.

**Правильно:** Один h1 на страницу. Для других заголовков используйте h2-h6.

**Неправильно:** Прыгать уровни (h1 → h3, пропуская h2)

**Почему:** Нарушение иерархии заголовков ухудшает SEO и доступность.

**Правильно:** Соблюдайте последовательность: h1 → h2 → h3. Не пропускайте уровни.

**Неправильно:** Использовать заголовки только для визуального размера

**Почему:** Заголовки — это семантика, а не стили. Если хотите текст покрупнее — используйте CSS.

**Правильно:** Заголовки определяют структуру контента. Для визуального форматирования используйте CSS.

• h1 — только один на страницу
• Заголовки идут по порядку: h1 → h2 → h3
• p — основной способ представления текста
• Заголовки — семантика, а не стили
• Правильная иерархия важна для SEO и доступности

Назад: Вы знаете базовые теги (H4) — теперь вы можете структурировать контент с помощью заголовков и абзацев.

Вперёд: В следующем уроке (H6) вы изучите форматирование текста: жирный, курсив, подчёркивание и другие стили.