← HTML & CSS/Заголовки и абзацы#3 из 383← ПредыдущийСледующий →+10 XP
Полезно по теме:Гайд: старт в frontendПрактика: DOM и событияТермин: DOMМаршрут: старт с нуля

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

Ты каждый день читаешь статьи — на ВКонтакте, в Telegram-каналах, в онлайн-журналах. Любой текстовый контент строится по одинаковой схеме: заголовки разных уровней и абзацы. В HTML для этого есть специальные теги.

Заголовки h1–h6

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

<h1>Название магазина — Sneaker Shop</h1>
<h2>Коллекция 2024</h2>
<h3>Мужские кроссовки</h3>
<h4>Nike Air Max</h4>
<h5>Цветовые варианты</h5>
<h6>Примечание о размерах</h6>

По умолчанию браузер делает h1 самым крупным, а h6 — самым мелким. Но это лишь дефолтный стиль — CSS меняет внешний вид полностью.

Почему иерархия заголовков важна для SEO

Поисковый робот Google читает страницу как оглавление книги. <h1> — главная тема страницы. <h2> — разделы. <h3> — подразделы. Если нарушить иерархию, поисковик хуже понимает структуру и сайт падает в выдаче.

Правила иерархии:

  • На странице должен быть один <h1> — главный заголовок
  • После <h1> идут <h2>, после <h2> — <h3> и т.д.
  • Не пропускай уровни: нельзя перейти с <h1> сразу на <h4>
    • <!-- Неправильно — пропуск уровней -->
<h1>Кроссовки</h1>
<h4>Nike</h4>  <!-- Нарушение: пропущены h2 и h3 -->

<!-- Правильно -->
<h1>Кроссовки</h1>
<h2>Бренды</h2>
<h3>Nike</h3>

    Тег <p> — абзац

    Абзац — основная единица текстового контента:

    <p>Этот магазин работает с 2015 года и предлагает лучшие кроссовки мира.</p>
<p>Бесплатная доставка при заказе от 3000 рублей.</p>

    Каждый <p> автоматически отделяется от других вертикальным отступом. Не используй пустые <p></p> для создания отступов — это работа CSS.

    Тег <br> — перенос строки

    <br> — самозакрывающийся тег. Переносит текст на новую строку без создания нового абзаца:

    <p>
  ООО «СникерШоп»<br />
  ИНН: 1234567890<br />
  Москва, ул. Пушкина, д. 1
</p>

    Используй <br> только в адресах, стихах и аналогичных случаях. Не злоупотребляй им для создания отступов.

    Тег <hr> — горизонтальная линия

    <hr> рисует разделительную линию между секциями:

    <h2>Мужские кроссовки</h2>
<p>Описание секции...</p>
<hr />
<h2>Женские кроссовки</h2>
<p>Описание секции...</p>

    Типичные ошибки

    Ошибка 1: Несколько h1 на странице

    <h1>Магазин кроссовок</h1>
<h1>Nike Air Max</h1>  <!-- Неверно — должен быть один h1 -->

    Ошибка 2: Использовать заголовки для стилизации

    <!-- Неверно — h3 не потому что нужен заголовок третьего уровня,
     а потому что хочется маленький жирный текст -->
<h3>Добавить в корзину</h3>

<!-- Верно — используй CSS для стилизации -->
<p class="button-label">Добавить в корзину</p>

    Ошибка 3: Текст вне тегов

    <body>
  Просто текст без тега — плохая практика
  <p>Текст в абзаце — правильно</p>
</body>

    В реальных проектах

    На лендинге Wildberries или Ozon <h1> — это обычно название категории товаров. В блоге — заголовок статьи. Поисковое продвижение (SEO) напрямую зависит от правильной расстановки заголовков. Хороший фронтенд-разработчик всегда проверяет структуру заголовков на странице.

    Примеры

    Создание иерархии заголовков и работа с их уровнями

    // Создаём заголовки разных уровней
const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

headings.forEach(tag => {
  const el = document.createElement(tag)
  el.textContent = 'Пример заголовка ' + tag
  console.log(el.tagName + ': ' + el.textContent)
})

// Пример правильной иерархии для страницы магазина
const pageStructure = [
  { level: 'h1', text: 'Sneaker Shop — интернет-магазин кроссовок' },
  { level: 'h2', text: 'Популярные бренды' },
  { level: 'h3', text: 'Nike' },
  { level: 'h3', text: 'Adidas' },
  { level: 'h2', text: 'Новые поступления' },
  { level: 'h3', text: 'Весна 2024' },
]

console.log('--- Структура заголовков страницы ---')
pageStructure.forEach(item => {
  const indent = '  '.repeat(parseInt(item.level[1]) - 1)
  console.log(indent + item.level.toUpperCase() + ': ' + item.text)
})

    Подсчёт заголовков и проверка SEO-правила об одном h1

    // Имитируем анализ заголовков на странице
const pageTags = ['h1', 'h2', 'h3', 'h2', 'h3', 'h3', 'h2']

const counts = {}
pageTags.forEach(tag => {
  counts[tag] = (counts[tag] || 0) + 1
})

console.log('Статистика заголовков:')
Object.keys(counts).sort().forEach(tag => {
  console.log(tag + ': ' + counts[tag] + ' шт.')
})

// SEO-проверка: на странице должен быть ровно один h1
const h1Count = counts['h1'] || 0
if (h1Count === 0) {
  console.log('Проблема: нет h1 — поисковик не поймёт тему страницы')
} else if (h1Count === 1) {
  console.log('Отлично: ровно один h1 — SEO в порядке')
} else {
  console.log('Проблема: ' + h1Count + ' заголовков h1 — нужен только один')
}

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

    Ты каждый день читаешь статьи — на ВКонтакте, в Telegram-каналах, в онлайн-журналах. Любой текстовый контент строится по одинаковой схеме: заголовки разных уровней и абзацы. В HTML для этого есть специальные теги.

    Заголовки h1–h6

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

    <h1>Название магазина — Sneaker Shop</h1>
<h2>Коллекция 2024</h2>
<h3>Мужские кроссовки</h3>
<h4>Nike Air Max</h4>
<h5>Цветовые варианты</h5>
<h6>Примечание о размерах</h6>

    По умолчанию браузер делает h1 самым крупным, а h6 — самым мелким. Но это лишь дефолтный стиль — CSS меняет внешний вид полностью.

    Почему иерархия заголовков важна для SEO

    Поисковый робот Google читает страницу как оглавление книги. <h1> — главная тема страницы. <h2> — разделы. <h3> — подразделы. Если нарушить иерархию, поисковик хуже понимает структуру и сайт падает в выдаче.

    Правила иерархии:

  • На странице должен быть один <h1> — главный заголовок
  • После <h1> идут <h2>, после <h2> — <h3> и т.д.
  • Не пропускай уровни: нельзя перейти с <h1> сразу на <h4>
    • <!-- Неправильно — пропуск уровней -->
<h1>Кроссовки</h1>
<h4>Nike</h4>  <!-- Нарушение: пропущены h2 и h3 -->

<!-- Правильно -->
<h1>Кроссовки</h1>
<h2>Бренды</h2>
<h3>Nike</h3>

    Тег <p> — абзац

    Абзац — основная единица текстового контента:

    <p>Этот магазин работает с 2015 года и предлагает лучшие кроссовки мира.</p>
<p>Бесплатная доставка при заказе от 3000 рублей.</p>

    Каждый <p> автоматически отделяется от других вертикальным отступом. Не используй пустые <p></p> для создания отступов — это работа CSS.

    Тег <br> — перенос строки

    <br> — самозакрывающийся тег. Переносит текст на новую строку без создания нового абзаца:

    <p>
  ООО «СникерШоп»<br />
  ИНН: 1234567890<br />
  Москва, ул. Пушкина, д. 1
</p>

    Используй <br> только в адресах, стихах и аналогичных случаях. Не злоупотребляй им для создания отступов.

    Тег <hr> — горизонтальная линия

    <hr> рисует разделительную линию между секциями:

    <h2>Мужские кроссовки</h2>
<p>Описание секции...</p>
<hr />
<h2>Женские кроссовки</h2>
<p>Описание секции...</p>

    Типичные ошибки

    Ошибка 1: Несколько h1 на странице

    <h1>Магазин кроссовок</h1>
<h1>Nike Air Max</h1>  <!-- Неверно — должен быть один h1 -->

    Ошибка 2: Использовать заголовки для стилизации

    <!-- Неверно — h3 не потому что нужен заголовок третьего уровня,
     а потому что хочется маленький жирный текст -->
<h3>Добавить в корзину</h3>

<!-- Верно — используй CSS для стилизации -->
<p class="button-label">Добавить в корзину</p>

    Ошибка 3: Текст вне тегов

    <body>
  Просто текст без тега — плохая практика
  <p>Текст в абзаце — правильно</p>
</body>

    В реальных проектах

    На лендинге Wildberries или Ozon <h1> — это обычно название категории товаров. В блоге — заголовок статьи. Поисковое продвижение (SEO) напрямую зависит от правильной расстановки заголовков. Хороший фронтенд-разработчик всегда проверяет структуру заголовков на странице.

    Примеры

    Создание иерархии заголовков и работа с их уровнями

    // Создаём заголовки разных уровней
const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

headings.forEach(tag => {
  const el = document.createElement(tag)
  el.textContent = 'Пример заголовка ' + tag
  console.log(el.tagName + ': ' + el.textContent)
})

// Пример правильной иерархии для страницы магазина
const pageStructure = [
  { level: 'h1', text: 'Sneaker Shop — интернет-магазин кроссовок' },
  { level: 'h2', text: 'Популярные бренды' },
  { level: 'h3', text: 'Nike' },
  { level: 'h3', text: 'Adidas' },
  { level: 'h2', text: 'Новые поступления' },
  { level: 'h3', text: 'Весна 2024' },
]

console.log('--- Структура заголовков страницы ---')
pageStructure.forEach(item => {
  const indent = '  '.repeat(parseInt(item.level[1]) - 1)
  console.log(indent + item.level.toUpperCase() + ': ' + item.text)
})

    Подсчёт заголовков и проверка SEO-правила об одном h1

    // Имитируем анализ заголовков на странице
const pageTags = ['h1', 'h2', 'h3', 'h2', 'h3', 'h3', 'h2']

const counts = {}
pageTags.forEach(tag => {
  counts[tag] = (counts[tag] || 0) + 1
})

console.log('Статистика заголовков:')
Object.keys(counts).sort().forEach(tag => {
  console.log(tag + ': ' + counts[tag] + ' шт.')
})

// SEO-проверка: на странице должен быть ровно один h1
const h1Count = counts['h1'] || 0
if (h1Count === 0) {
  console.log('Проблема: нет h1 — поисковик не поймёт тему страницы')
} else if (h1Count === 1) {
  console.log('Отлично: ровно один h1 — SEO в порядке')
} else {
  console.log('Проблема: ' + h1Count + ' заголовков h1 — нужен только один')
}

    Задание

    Напиши HTML-страницу блога с правильной иерархией заголовков: один h1 "Блог о программировании", под ним h2 "JavaScript" с вложенным h3 "Основы JS" и абзацем-описанием, затем h2 "Python" с абзацем-описанием. Между разделами добавь горизонтальный разделитель hr.

    Подсказка

    На странице должен быть ровно один h1. h2 — разделы, h3 — подразделы внутри раздела. Горизонтальная линия: <hr>. Не пропускай уровни заголовков (нельзя перейти с h1 сразу на h3).

    Загружаем среду выполнения...
    Загружаем AI-помощника...