Подзаголовки на сайте и как их правильно структурировать — блог Drudesk
050 640 98 44
support@drudesk.com

Советы по правильному оформлению подзаголовков

Герои нашей сегодняшней статьи призваны привносить «порядок в хаос». Они делают веб-страницы намного информативнее, а также привлекают поисковые системы, как магнит. Они также помогают людям с недостатками зрения постигать контент сайтов через скрин-ридеры. Таким образом они существенно расширяют аудиторию сайта и повышают его репутацию как такового, который придерживается стандартов веб-доступности. Итак, наши герои — это подзаголовки, которые являются «душой и сердцем» HTML-разметки страниц. Мы выясним, как правильно структурировать подзаголовки.

Как правильно структурировать подзаголовки на сайте

От H1 до H6: иерархическая структура

Элементы подзаголовков от <H1> до <H6> «упаковывают» контент веб-страницы в четкую иерархическую структуру. Самый важный из них — <H1>, то есть заголовок страницы. <H2> — важный, <H3> — менее важный, и так далее, в порядке убывания. Элементы <H2> могут служить подзаголовками к <H1>, элементы <H3> — подзаголовками к <H2> и т.д. 

«Нет» — перепрыгиванию через уровни

Не рекомендовано перепрыгивать с более высокого на более низкий уровень, игнорируя логическую последовательность — например, использовать тег <H5> сразу после <H2>. Если следовать этой рекомендации, структура страницы будет понятнее для скрин-ридеров, что существенно облегчит навигацию между элементами. Ну и, конечно, это — золотое правило SEO.

Подзаголовки — не «для красоты»

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

Работают только настоящие подзаголовки

Скрин-ридеры и другие вспомогательные технологии полагаются именно на реальные подзаголовки для считывания структуры страницы. Таким образом, форматирование, которое заставляет текст лишь ВЫГЛЯДЕТЬ как подзаголовки (шрифт, жирность и т.д.) не способно заменить настоящие подзаголовки в этом вопросе.

Правильное скрывание подзаголовков

Иногда читателям с идеальным зрением очевидно, о чем говорится в определенном разделе, и вы хотите скрыть подзаголовок. Однако, он все равно может выполнять свою функцию и оставаться видимым для скрин-ридеров и поисковых систем. Лучший способ это устроить — использовать CSS: class = "element-invisible". Не стоит использовать display: none, ведь это скроет подзаголовки полностью. Однако, скрывание элементов не очень нравится поисковым системам, так что в этом процессе есть определенные риски.

Информативные названия подзаголовков

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

Напоследок

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

Если вы хотите, чтобы подзаголовки вашего сайта были проверены на правильность, или чтобы новая идеальная структура подзаголовков была создана с нуля, просто свяжитесь с экспертами Drudesk!

Похожие материалы