Заголовки и параграфы: теги <h1>–<h6>, <p>

Почему заголовки и параграфы — это 🔥

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

Давай разберёмся, как работать с тегами <h1>–<h6> и <p> так, чтобы твои страницы выглядели профессионально!

Теги `<h1>`–`<h6>`: Иерархия важности 📊

HTML предлагает шесть уровней заголовков — от <h1> (самый важный) до <h6> (наименее значимый).

Пример структуры:

<h1>Главный заголовок страницы</h1>  <!-- Обычно один на странице -->
<h2>Подзаголовок раздела</h2>  
<h3>Дополнительный подраздел</h3>  
<h4>Мелкий пункт</h4>  
<!-- <h5> и <h6> используются редко -->

🔑 Правила использования:

<h1> — король страницы. Он должен чётко отражать её содержание. Обычно он один, но в HTML5 можно использовать несколько (например, внутри <article>).
Не пропускай уровни! После <h2> должен идти <h3>, а не сразу <h5> — это ломает логическую структуру.
Не используй заголовки ради стилизации. Если нужен просто крупный текст — лучше CSS.

Тег `<p>`: Основа текстового контента ✍️

Абзацы создаются тегом <p>. Они группируют связанные предложения в логические блоки.

Пример:

<p>Это первый абзац. Он содержит основную мысль.</p>
<p>А это второй — он развивает идею или добавляет детали.</p>

💡 Важные нюансы:

Браузеры автоматически добавляют отступы между <p>.
Не используй <p> для разметки пустых строк или отступов — для этого есть CSS.
Внутри <p> можно вкладывать инлайновые теги (<strong>, <a>, <em>), но не блочные (<div>, <h2>).

Реальный пример: Статья о котиках 🐱

Посмотрим, как это работает в жизни:

<h1>Почему кошки — идеальные питомцы</h1>

<p>Кошки независимы, ласковы и не требуют сложного ухода. Вот три причины завести мурлыку:</p>

<h2>1. Они сами себя развлекают</h2>
<p>Кошке не нужна постоянная активность с хозяином. Игрушка или солнечный зайчик — и она счастлива.</p>

<h2>2. Чистоплотность</h2>
<p>Кошки ухаживают за шерстью сами, а лоток решает вопрос туалета.</p>

<h3>Но есть нюансы:</h3>
<p>Некоторые породы (например, сфинксы) требуют особого ухода за кожей.</p>

Частые ошибки и как их избежать 🚨

Каша из <div> вместо семантики
Неправильно:

<div class="big-text">Заголовок</div>  
<div>Абзац</div>

Правильно:

<h2>Заголовок</h2>  
<p>Абзац</p>

Избыточное количество <h1>
Это путает SEO-роботов. Лучше использовать один или продумать структуру (например, в <article>).
Пустые <p> для отступов
Если нужен отступ — используй CSS-свойство margin.

Проверь себя: Мини-задание 🛠️

Создай HTML-документ с такой структурой:
- Заголовок первого уровня: «Моё хобби»
- Два абзаца с описанием
- Подзаголовок <h2>: «Почему это круто»
- Список причин (каждая — отдельный <p>)