Почему жирный текст ещё не заголовок
Жирность выделяет слова, а заголовок задаёт место раздела.
Вы оформляете страницу про экскурсию: «Что взять» набрано жирным, ниже перечислены вещи. Глаз легко узнаёт название раздела. Но программа может считать его обычным абзацем и пропускать при переходе по заголовкам. Проверим разницу на тех же словах.
В статье вы узнаете:
Одинаковые слова, две разные записи
Откройте визуальный редактор HTML. Для опыта возьмите пустой документ. Нажмите «Источник» и вставьте две строки:
<p><strong>Что взять</strong></p>
<p>Возьмите воду и блокнот.</p>
Снова нажмите «Источник», чтобы вернуться к обычному виду текста. Название «Что взять» будет выделено жирным. Теперь вернитесь к исходнику и замените только первую строку:
<h2>Что взять</h2>
<p>Возьмите воду и блокнот.</p>
Слова остались прежними. Изменились короткие метки в угловых скобках: их называют тегами. p обозначает абзац, strong отмечает важный текст внутри него, а h2 обозначает заголовок второго уровня. Закрывающий тег со знаком / показывает, где заканчивается соответствующий фрагмент.
В первом варианте получились два абзаца, один с выделенными словами. Во втором появился заголовок и следующий за ним абзац. Заголовок может оказаться крупнее и получить другие отступы. Но различие не в размере: даже если придать обеим строкам одинаковый вид, их роли останутся разными.
То же самое можно сделать без ввода кода. Кнопка «Полужирный» выделяет текст, а список «Форматирование» позволяет выбрать «Заголовок 2». Если интерфейс редактора на английском, соответствующие подписи будут Source, Bold, Format и Heading 2.
Заголовки помогают перейти сразу к нужному месту
На коротком объявлении ошибка может остаться незаметной: весь текст помещается перед глазами. Теперь добавим маршрут, расписание, правила поездки и контакты организатора. Читателю, который ищет время возвращения, незачем читать всё с начала.
Зрячий человек быстро пробежит страницу глазами и заметит название «Расписание». Человек, использующий программу экранного доступа, может воспользоваться переходами по заголовкам. Такая программа, её также называют скринридером, умеет озвучивать содержимое страницы и сообщать структуру текста. Размеченный заголовок даёт ей ориентир для навигации.
Жирный абзац такого ориентира не создаёт. Это не значит, что слово исчезнет или его нельзя прочитать: оно останется в тексте. Но при переходах именно по заголовкам программа не обязана останавливаться на нём как на начале раздела.
Разметка пригодится и функции, которая собирает оглавление из заголовков, если такая функция есть на сайте или в редакторе. Сам по себе тег h2 не создаёт видимое оглавление. Редактор eCalc тоже не показывает список разделов и не проверяет их порядок: в нашем опыте он помогает увидеть разницу в исходнике.
У strong при этом есть своё назначение. Например, в предложении «Не забудьте согласие родителей» можно выделить важное требование. Оно не становится отдельным разделом только потому, что его нужно заметить.
Цифра в H2 и H3 означает вложенность, а не номер по порядку
Посмотрим на план той же страницы:
<h1>Школьная экскурсия</h1>
<h2>Что взять</h2>
<h2>Расписание</h2>
<h3>До обеда</h3>
<h3>После обеда</h3>
<h2>Контакты</h2>
Главная тема здесь «Школьная экскурсия». Ей подчинены три равноправных раздела: вещи, расписание и контакты. Поэтому все три отмечены как H2. Внутри расписания есть две части, до и после обеда. Они на один уровень глубже, поэтому получают H3.
H3 не означает «третий заголовок в документе». Иначе пришлось бы повышать цифру с каждым новым разделом, хотя темы остаются равноправными. Цифра отвечает на другой вопрос: насколько глубоко этот раздел вложен в общий план.
Переход от H3 «После обеда» обратно к H2 «Контакты» нормален. Мы закончили детали расписания и вернулись к основным разделам. А вот внутри раздела H2 начинать подраздел сразу с H4 обычно не стоит: пропущен промежуточный уровень H3.
Название всей страницы нередко уже оформлено как H1 самим сайтом. В таком случае первый раздел внутри вашего текста обычно начинается с H2. Уровень названия над редактором уточните в инструкции сайта или у того, кто его настраивает. По размеру букв его не определить, поэтому назначать H1 первой строке автоматически не стоит.
Слишком крупный заголовок не нужно превращать в H4
Допустим, раздел «Расписание» выглядит огромным, а «Заголовок 4» в списке редактора даёт аккуратные небольшие буквы. Возникает соблазн выбрать его просто ради размера.
Так вы измените не только внешний вид, но и место раздела в документе. По смыслу расписание останется рядом с вещами и контактами, а по разметке окажется глубоко вложенным подразделом.
Сохраните правильный уровень. Размер, толщину и отступы заголовков настраивают отдельно средствами оформления сайта. Если этих настроек в вашей форме нет, это вопрос к шаблону страницы, а не повод менять H2 на H4.
Обратное тоже верно: настоящий заголовок может быть небольшим и даже нежирным. Браузер оформляет его по заданным стилям. Поэтому определить уровень только на глаз нельзя: посмотрите выбранный формат или тег в исходнике.
Перед переносом проверьте названия разделов, а не всю разметку
После копирования из другого редактора сначала проверьте один основной заголовок и один подраздел. Внешнее сходство ещё не гарантирует, что их роли сохранились. Поставьте курсор в название и посмотрите формат; при сомнении откройте «Источник».
Затем прочитайте только названия разделов. Получается ли из них понятный план? У равноправных тем должен быть одинаковый уровень. Подраздел должен относиться к разделу над ним, а не просто выглядеть мельче.
Если встретился код <h2><strong>Что взять</strong></h2>, удалять заголовок не нужно. Это всё ещё H2, внутри которого дополнительно выделен текст. Само наличие strong не ошибка. Важно, есть ли тег заголовка вокруг названия.
И не делайте заголовками все фразы, которые хочется подчеркнуть. Для названия «Что взять» нужен формат раздела. Для важного слова внутри обычного предложения достаточно выделения. Вернитесь к своему тексту и проверьте именно эту границу.
Есть что добавить?
Напишите своё мнение, комментарий или предложение.