Как оформить заголовки внутри страницы сайта

Чтобы оформить заголовки внутри страницы сайта, разделите содержание по вопросам посетителя: каждому самостоятельному разделу назначьте H2, а его подразделам — H3. Называйте разделы так, чтобы по одному заголовку было понятно, какой ответ находится ниже. Уровень выбирайте по смыслу, а размер и внешний вид настраивайте отдельно.

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

Что означают H1, H2 и H3

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

Представьте страницу услуги «Ремонт кофемашин». Её основные разделы могут называться «Какие неисправности ремонтируем», «Как проходит ремонт», «От чего зависит стоимость». Это уровень H2. Внутри раздела о стоимости можно выделить «Диагностика», «Запчасти» и «Согласование дополнительных работ» — уровень H3.

Для обычной страницы удобно предусмотреть один основной заголовок H1. Во многих системах управления сайтом он создаётся из названия страницы автоматически. Поэтому перед редактированием основного текста проверьте шаблон: возможно, главный заголовок уже выводится над содержанием и повторять его в редакторе не нужно.

Внутри статьи обычно достаточно H2 и H3. Если план требует более глубокой вложенности, сначала проверьте, нельзя ли упростить раздел или вынести часть материала на отдельную страницу. Дополнительный уровень имеет смысл, когда он отражает реальное деление темы.

Чем заголовок отличается от крупного текста

Крупная жирная надпись не обязательно является заголовком. В редакторе сайта можно увеличить размер обычного абзаца, но его роль в структуре от этого не изменится. Чтобы обозначить раздел, нужно выбрать соответствующий формат: например, «Заголовок 2» или «Заголовок 3».

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

Обратная ошибка — назначать заголовком любую заметную фразу. Цена, подпись к фотографии, текст кнопки и короткое предупреждение не становятся разделами только потому, что их нужно выделить. Для них выбирают оформление, соответствующее их роли.

Уровень заголовка и его внешний вид решают разные задачи. Уровень показывает место в структуре, а оформление помогает увидеть это место. Если H2 выглядит слишком крупным, корректируйте стиль в настройках сайта, сохраняя нужный уровень.

Как составить структуру заголовков: пошаговая инструкция

Для работы понадобятся текст страницы, доступ к её редактору и возможность посмотреть результат на компьютере и телефоне. Черновой план можно составить в обычном документе: сначала важно разобраться с содержанием.

Шаг 1. Определите, зачем посетитель открыл страницу

Сформулируйте задачу одним предложением. Например: «Посетитель хочет понять, подходит ли ему услуга установки кондиционера и как подготовиться к монтажу». Такая формулировка помогает выбрать разделы и отсечь сведения, которые уводят в сторону.

Затем выпишите вопросы, необходимые для решения этой задачи. Для установки кондиционера это могут быть вопросы о составе работ, выборе места, подготовке комнаты, стоимости и порядке согласования. Пока не выбирайте уровни заголовков — соберите содержание.

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

Шаг 2. Сгруппируйте близкие вопросы

Объедините вопросы, которые относятся к одной теме. Например, «Нужно ли отодвигать мебель?» и «Как обеспечить доступ к месту установки?» можно раскрыть в разделе «Как подготовить комнату к монтажу».

Не объединяйте всё под названием «Полезная информация». Такой заголовок почти ничего не сообщает. Человек не понимает, найдёт ли там подготовку, ограничения, сроки или условия оплаты.

Проверьте также, не повторяется ли один вопрос в нескольких местах. Если состав работ описан и в разделе «Что входит в услугу», и в разделе «Наш подход», выберите основное место для ответа. Второй раздел оставьте только при наличии отдельного полезного содержания.

Шаг 3. Назначьте уровни H2 и H3

Самостоятельным темам назначьте H2. Подчинённым вопросам внутри каждой темы — H3. Проверяйте связь простой фразой: «Этот подраздел раскрывает часть раздела, под которым расположен».

Например, «Подготовка помещения» может быть H2, а «Доступ к месту установки» — H3 внутри него. «Условия оплаты» обычно не относится к подготовке комнаты, поэтому такому разделу нужен собственный H2.

Не выбирайте H3 только потому, что он меньше по размеру. И не переходите сразу к более глубокому уровню ради внешнего вида. Последовательность уровней должна отражать вложенность содержания: основной раздел, затем его подразделы.

Шаг 4. Расположите разделы в порядке решения задачи

Поставьте раньше ответы, без которых трудно понять остальную страницу. В инструкции сначала объясните подготовку, затем действия и проверку результата. На странице услуги обычно полезно сначала раскрыть состав работ и ограничения, затем порядок выполнения и условия заказа.

Единого порядка для всех сайтов нет. Если главный вопрос посетителя связан со стоимостью, раздел о цене можно поставить ближе к началу. Если услуга подходит лишь при определённых условиях, ограничения лучше объяснить до подробного описания процесса.

Проверьте переходы между темами. После раздела «Что входит в установку» естественно перейти к «Как проходит монтаж». Резкий переход к истории компании может прервать ход объяснения, если эта история не помогает выбрать услугу.

Шаг 5. Напишите конкретные названия разделов

Хороший заголовок называет предмет и уточняет, что о нём будет сказано. «Стоимость» допустима, но «От чего зависит стоимость монтажа» точнее описывает раздел с объяснением факторов цены.

Не обещайте заголовком больше, чем содержит текст. Под названием «Сколько стоит ремонт» посетитель ожидает цены или понятный способ расчёта. Если ниже объясняются только причины различий, лучше назвать раздел «Что влияет на стоимость ремонта».

Старайтесь выдерживать один подход в соседних заголовках. Можно использовать вопросы: «Что входит в услугу», «Как проходит работа», «Как подготовить помещение». Можно использовать короткие названия: «Состав услуги», «Порядок работы», «Подготовка помещения». Главное — ясность и соответствие содержанию.

Шаг 6. Проверьте план без основного текста

Временно оставьте перед глазами только заголовки. Прочитайте их подряд и оцените, понятны ли тема страницы, порядок объяснения и место каждого ответа.

Если два названия выглядят одинаково, уточните различие или объедините разделы. Если заголовок понятен только после чтения предыдущего абзаца, добавьте предмет: вместо «Как это сделать» напишите «Как подготовить помещение к монтажу».

Такую проверку удобно провести до переноса текста в редактор. Переставлять пункты плана проще, чем переделывать уже оформленную страницу с таблицами, карточками и другими блоками.

Как заменить общие заголовки понятными

Ниже — условные примеры для страницы услуги. Выбирайте формулировку по фактическому содержанию раздела: один и тот же общий заголовок можно уточнить по-разному.

Общий заголовок	Более конкретный вариант	Что должно находиться в разделе
О нашей работе	Как проходит ремонт кофемашины	Последовательность действий
Преимущества	Что входит в диагностику	Состав проверки
Важная информация	Как подготовить технику к передаче	Действия клиента
Цены	От чего зависит стоимость ремонта	Факторы расчёта
Дополнительно	Что согласовывают перед заменой деталей	Порядок согласования

Вопросительная форма удобна, когда раздел отвечает на конкретный вопрос. Но превращать каждый заголовок в вопрос необязательно. «Доставка и оплата» может быть понятнее, чем длинная формулировка, которая перечисляет сразу несколько действий.

Избегайте названий вроде «Решения для вашего успеха». На странице услуги они не объясняют, о чём следующий блок. Если раздел посвящён вариантам обслуживания, так его и назовите: «Разовое обслуживание и договор на регулярные работы».

Пример последовательной структуры страницы

Допустим, нужно подготовить страницу «Установка кондиционера». Основная тема указана в заголовке страницы, а внутри содержания можно использовать такой план:

Уровень	Заголовок
H2	Что входит в установку кондиционера
H2	Как выбрать место для блоков
H3	Размещение внутреннего блока
H3	Размещение наружного блока
H2	Как подготовить комнату к монтажу
H2	Как проходит установка
H2	От чего зависит стоимость
H3	Особенности помещения и доступ к месту работ
H3	Дополнительные материалы и работы
H2	Что уточнить перед согласованием монтажа

В этом примере H3 раскрывают только свои родительские разделы. Подраздел о наружном блоке относится к выбору места, а дополнительные материалы — к стоимости. Подготовка комнаты выделена отдельно, поскольку описывает самостоятельную задачу клиента.

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

Как оформить заголовки в редакторе сайта

Выделите строку с названием раздела и выберите нужный формат заголовка. Убедитесь, что формат применился только к этой строке, а следующий абзац остался обычным текстом. После копирования из другого документа проверьте это особенно внимательно: вместе с текстом может переноситься ненужное оформление.

Настройте единый вид для каждого уровня. Заголовки H2 должны быть узнаваемыми во всех разделах, а H3 — визуально показывать подчинённость. Для этого можно использовать размер, насыщенность шрифта и отступы. Нет необходимости вручную оформлять каждый заголовок по-разному.

Оставляйте между разделами достаточно пространства, чтобы они не сливались. При этом заголовок должен восприниматься вместе с текстом, который открывает. Если расстояние до следующего абзаца слишком велико, связь между ними становится менее заметной.

Проверьте страницу на телефоне. Длинный заголовок может занять несколько строк и затруднить просмотр. Сокращайте его без потери смысла: «Подготовка комнаты к монтажу» вместо «Что необходимо сделать в комнате перед тем, как специалисты начнут монтажные работы».

Ошибки, которые мешают ориентироваться на странице

Заголовок перед каждым абзацем. Текст дробится на слишком мелкие части. Несколько абзацев, отвечающих на один вопрос, обычно можно оставить под общим названием. Новый заголовок нужен при переходе к новой теме.

Разные уровни для равнозначных разделов. Если «Доставка» оформлена как H2, а самостоятельный раздел «Оплата» — как H3, структура показывает зависимость, которой нет. Сначала проверьте смысловую связь, затем исправьте уровень.

Повтор одной ключевой фразы во всех названиях. Заголовки вроде «Ремонт кофемашин: цены» и «Ремонт кофемашин: порядок ремонта» становятся громоздкими. Когда тема уже ясна, достаточно «Стоимость ремонта» и «Как проходит ремонт».

Название раздела без ответа под ним. Под заголовком «Как оформить возврат» должны быть действия, условия и необходимые сведения. Общая фраза о внимании к клиентам не решает заявленную задачу.

Выделение рекламного лозунга как раздела. Фраза «Выбирайте качество» не объясняет содержание. Замените её названием конкретной темы, если ниже действительно раскрываются материалы, порядок проверки или условия обслуживания.

Как проверить готовую страницу

Откройте предварительный просмотр и выполните короткую проверку:

• Прочитайте только заголовки: они должны складываться в понятный план.
• Найдите ответ на конкретный вопрос, например об оплате или подготовке.
• Проверьте, что каждый H3 раскрывает часть ближайшего раздела H2.
• Сравните названия разделов с текстом под ними.
• Посмотрите, нет ли повторов и пустых разделов.
• Проверьте оформление на компьютере и телефоне.

Для дополнительной проверки можно дать страницу человеку, который не участвовал в её подготовке. Попросите найти конкретное условие. Если он открывает несколько неподходящих разделов, уточните названия или измените порядок блоков.

Вопросы об оформлении заголовков

Сколько заголовков должно быть на странице?

Столько, сколько нужно для самостоятельных тем и их подразделов. Фиксированного количества для любой страницы нет. Короткому описанию может хватить нескольких разделов, а подробной инструкции потребуется больше. Каждый заголовок должен помогать ориентироваться в содержании.

Можно ли оставить раздел H2 без подразделов H3?

Да. H3 нужны только там, где внутри раздела есть отдельные подтемы. Не добавляйте их ради симметрии с соседними блоками. Раздел может состоять из нескольких абзацев, списка или таблицы под одним H2.

Нужно ли добавлять ключевые слова в каждый заголовок?

Нет. Используйте слова, которые точно описывают содержание и понятны посетителю. Основную тему не нужно повторять в каждом разделе. Проверяйте формулировки чтением вслух: они должны звучать естественно и сообщать, какой ответ находится ниже.

Нужен ли заголовок перед списком?

Не всегда. Если список продолжает мысль абзаца и относится к текущему разделу, отдельный заголовок может быть лишним. Добавляйте его, когда список раскрывает самостоятельную подтему, которую посетителю полезно находить отдельно.

Когда стоит добавить оглавление?

Когда страницу трудно просмотреть целиком и посетителю нужно переходить к отдельным разделам. Оглавление должно повторять понятные названия основных блоков. Перед его добавлением проверьте сам план: навигация не исправит расплывчатые заголовки и нелогичный порядок.

Проверить сайт бесплатно