<h1>–<h6>: HTML-элементы заголовков секций
Примечание: Атрибут align устаревший; не используйте его.
Примечания к использованию
- Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа
- Не используйте низкие уровни чтобы снизить размер шрифта: используйте CSSfont-size вместо.
- Избегайте пропуск уровней заголовков: всегда начинайте с <h1> , потом используйте <h2> , и так далее.
- Вам следует рассмотреть избегание использования <h1> более раза на страницу. Смотрите Defining sections в <h1>–<h6>: The HTML Section Heading elements.
Примеры
Все заголовки
Следующий код показывает все уровни заголовков в действии
Вот результат этого кода:
Пример страницы
Следующий код показывает несколько заголовков с некоторым содержанием под ними .
Проблемы доступности
Навигация
Обычный метод навигации для пользователей программ чтения с экрана — это переход от заголовка к заголовку для быстрого определения содержимого страницы. Из-за этого важно не пропускать один или несколько уровней заголовка. Это может создать путаницу, так как человеку, который движется по этому пути, может быть интересно узнать, где находится отсутствующий заголовок.
Не делай
Делай
Расположение
Заголовки могут быть вложены в подразделы, чтобы отразить организацию содержимого страницы. Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
- h1 Жуки
- h2 Этимология
- h2 Распределение и разнообразие
- h2 Эволюция
- h3 Поздний палеозой
- h3 Юрский период
- h3 Меловойский период
- h3 Кайнозойский период
- h3 Голова
- h4 Рот
- h4 Передгрудь
- h4 Пиероторакс
Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
Содержание раздела маркировки
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.
Содержимое секционирования можно пометить, используя комбинацию aria-labelledby и id атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
Пример
В этом примере технология чтения с экрана объявила бы, что есть два <nav> разделы, один называется «Основная навигация», а другой — «Нижний колонтитул». Если ярлыки не были предоставлены, человеку, использующему программное обеспечение для чтения с экрана, возможно, придётся расследовать каждый nav содержание элемента, чтобы определить их назначение.
Как правильно писать HTML заголовки для сайта
Правильно расставленные HTML заголовки <h1> , <h2> , <h3> и т.д. — это важный пункт оптимизации страниц для поисковой системы. У вебмастеров есть разные мнение относительно правильности использования HTML заголовков. В этой статье я изложу свою точку зрения как правильно заполнять HTML заголовки для страниц сайта. На мой взгляд такой подход является оптимальным.
План статьи:
Учимся понимать иерархию HTML заголовков
Чтобы визуализировать для себя суть структуры заголовков, представим, что у нас есть книга. Она разделена на 2 раздела, каждый раздел имеет по 3 главы.
Получается такая структура:
Книга
— Раздел 1
— — Глава 1
— — Глава 2
— — Глава 3
— Раздел 2
— — Глава 4
— — Глава 5
— — Глава 6Представление такой структуры в виде иерархии HTML заголовков будет выглядеть следующим образом:
Как вы видите, глава имеет меньший охват, чем раздел, соответственно имеет меньший по значимости уровень заголовка. Однако, «Раздел 1» и «Раздел 2» — это две последовательные структуры (Раздел 2 не является подразделом Раздела 1) — соответственно они имеют одинаковый уровень HTML заголовка.
Обратите внимание, что разделов и глав в книге может быть сколько угодно, но ни один из них не будет по значимости равен или выше названию книги. Равносильной книге может быть только другая книга, а соответственно уровня главного заголовка веб-страницы может быть только заголовок другой веб-страницы (который находится в другом HTML документе).
На одной HTML странице должен быть один заголовок <h1> и далее по необходимости один или несколько заголовков уровня ниже.
Правильная структура HTML заголовков страницы
Структура заголовков должна отражать смысл контента в них. Подзаголовки <h3> должны конкретизировать суть обозначенную в HTML заголовке <h2> , а два заголовка одного уровня — продолжать друг друга либо раскрывать другую грань содержимого страницы.
И помните: указание заголовка <h2> после <h3> укажет что предыдущий раздел <h2> закончен и начат новый, а не подчеркнет значимость подраздела.
В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок <h1> , меньше него <h2> , наименьший <h6> . Таким образом, названия разделов имеют больший вес, чем названия подразделов.
Сколько уровней заголовков использовать
Основное, на что нужно ориентироваться — заголовки должны отражать структуру содержимого.
На сколько частей разбивать материал и на сколько подразделов его дробить — решать вам, и во многом это зависит от специфики вашей ниши.
Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков <h1> , <h2> , <h3> вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.
Не следует пытаться намеренно увеличить количество подзаголовков в статье. Слишком большое количество выделенных элементов может негативно сказаться на позициях вашего сайта в поисковых системах.
В любом случае, рекомендую посмотреть как расставляют заголовки авторитетные сайты в вашей нише. Возможно, вы подчеркнете для себя несколько полезных пунктов.
Заголовки дополнительных блоков сайта
Практически все блоги имеют блок ссылок на похожие статьи, блок опроса, подписки; интернет-магазины — блок фильтров, похожих товаров, популярных, ранее просмотренных, хитов продаж. Все это не является основным контентом страницы, но структура у этих блоков также есть. Так что, стоит озаглавливать такие блоки заголовком <h2> , <h3> или каким-то другим?
Я бы не рекомендовал. Для поисковых систем важна та уникальная информация, которую несет ваша страница, либо не уникальная, но преподнесенная удобнее всего среди конкурентов.
Структурируйте заголовками основной контент страницы, для всех дополнительных элементов достаточно выделения названия блоков стилями CSS.
Заголовки на сайте интернет-магазина
Со статейными страницами все просто — есть основная статья, у нее есть структура. Но как писать HTML заголовки на сайте интернет-магазина?
Стоит выделить 2 типа страниц: страница каталога и страница товара.
Страница каталога
Что действительно стоит сделать — так это вынести в заголовок <h1> название подборки: «Холодильники SAMSUNG», «Горные велосипеды Ardis», «Все для отдыха», «Женские платья и сарафаны» — это все может быть заголовком <h1> .
Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.
В некоторых магазинах есть общие страницы, показывающие названия категорий и несколько товаров этих категорий. Тогда вы можете сделать названия категорий заголовками. HTML допускает использование заголовков — ссылок.
Смысла в добавлении заголовков на каждый товар из каталога скорее нет. Однако, если вы используете текст — описание страницы каталога и оно достаточно длинное, чтобы разделить его на подзаголовки — сделайте это.
Страница товара
Думаю, ни кого не возникнет сомнений, что заголовок <h1> должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.
У магазина одежды, мало шансов попасть в топ по запросу «Белая футболка», но куда больше по запросу «Белая футболка Trussardi». Если вы продаете телефоны, вместо указания в названии «iPhone 8» и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них <h1> : «iPhone 8 256Gb Белый», «Apple iPhone 8 64Gb Space Gray» и так далее.
Перейдем к подзаголовкам. Большинство страниц товаров имеют похожую структуру и одинаковые элементы: фото, описание, характеристики, отзывы. Сами же блоки могут быть показаны на странице все сразу, либо страница имеет вкладки, по клику на названия которых открывается нужный блок.
И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно <h2> ). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.
Также, достойным решением является конкретизация таких заголовков. В пример приведу один популярный магазин электроники.
Обратите внимание, вкладка имеет короткое название «Характеристики», при нажатии открывается блок с заголовком <h2> : «Технические характеристики Apple iPhone X 256GB Silver».
Пожалуй, на этом все. Я надеюсь эта статья была для вас полезной. Ниже оставляю несколько рекомендаций, на которые следует ориентироваться при составлении заголовков.
Выводы. Рекомендации по использованию заголовков HTML
1) На странице должен быть только один заголовок уровня <h1> .
2) Строго сохраняем иерархию: <h2> внутри <h1> , <h3> внутри <h2> и т.д. Никаких <h4> сразу после <h2> и т.п.
3) Заголовки должны передавать смысл содержимого.
4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.
Как правильно написать SEO заголовки h1, h2, h3. Проверка тегов на странице
Заголовки необходимы, чтобы коротко описать основную тематику текста на странице, грамотно его структурировать, выделить разделы, показать их иерархию. С их помощью пользователю будет намного проще ориентироваться в контенте и находить нужный ему материал.
Иерархия заголовков на странице
В языке HTML, на котором создаются web-стрницы, существует 6 уровней заголовков — от тега h1 до h6. Каждый из них в иерархической цепочке подчинен предыдущему. Самый главный заголовок — тег h1, в него вложен подзаголовок h2, соответственно, h3 уже разграничивает текст внутри h2 и т. д.
Пример иерархии с правильной вложенностью тегов:
Как мы видим, в такой иерархии прослеживается логическая последовательность, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег Н3 перед Н2 или использовать тег Н6, если на странице нет Н4 и Н5. Как правило, для оформления текста на сайте достаточно тегов Н1 — Н3. Остальные используют в редких случаях.
Пример визуального отображения заголовков в тексте:
Как заголовки в тексте влияют на продвижение сайтов?
Правильно оформленные заголовки помогают пользователю ориентироваться на странице. Текст с удобной структурой и интересными подзаголовками привлекает посетителей и побуждает их дольше оставаться на странице интернет-магазина. Это положительно отражается на поведенческих характеристиках сайта и способствует росту его позиций в результатах поисковой выдачи.
Яндекс и Google рекомендуют использовать заголовки и подзаголовки для удобства пользователей.
Они помогают и поисковым роботам быстрее разобраться со структурой документа, определить характер и качество контента. Содержимое заголовков учитывается поисковыми системами для определения релевантности страницы поисковому запросу.
Слова, размещенные в тег Н1, получают больший вес, чем остальной текст на странице.
Заголовок (тег) h1
Тег h1 — самый главный заголовок на странице. Он считается названием документа и должен отображать суть размещенного контента. Это поможет пользователям и поисковым роботам точно определить назначение страницы.
Неправильное употребление данного заголовка может просто негативно сказаться на ранжировании станицы, именно поэтому его написанию и оптимизации следует уделить особое внимание.
Правила, которые нужно соблюдать при написании Н1
Правильно написанный заголовок уровня Н1:
располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;
отражает содержание текста;
присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;
не совпадает с Тitle (тайтл) или другими тегами;
уникален для каждой страницы;
длина тега имеет значение: не слишком длинный (количество 60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет "вес" каждого из них по формуле БМ25;
содержит в себе ключевое слово — это значимый фактор ранжирования для поисковых систем;
не должен быть переоптимизированным;
в конце не ставится точка (при этом может стоять восклицательный или знак вопроса).
Как прописывать ключевые слова в Н1?
Заголовок на главной странице должен содержать в себе релевантные запросы. Это значимый фактор ранжирования для поисковых систем. На страницах с описанием конкретных товаров пишите заголовки с низкочастотными ключевыми словами.
Ключевое слово должно находиться как можно ближе к началу заголовка.
Избегайте переспама в Н1. Не стоит употреблять слишком много ключевых слов и включать фразы в прямом вхождении, если они звучат неестественно. Используйте разные словоформы и разбавленные вхождения.
Не обязательно всегда начинать заголовок со слов «купить» или «цена» — это может стать негативным сигналом для поисковых систем.
Употребление заголовков Н1 и Тitle
Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.
Использование одинаковые ключевых слов в МЕТА-теге Тitle и заголовке H1 создает угрозу наложения санкций со стороны поисковых систем. Поскольку Тitle и тег h1 имеют большое значение для ранжирования сайта в результатах поиска, то написание одних и тех же ключевых слов в данных элементах может быть расценено как попытка искусственного увеличения их веса. Также не рекомендуется использовать дубль тега h1 в Description.
Страницы с совпадающими тегами Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».
Сколько раз можно прописать заголовок (тег) Н1 на странице?
Только один! Правилами языка HTML 5 допускается использование нескольких заголовков Н1.
Тег h1 для Google
Согласно нашим исследованиям, Google не считает наличие нескольких заголовков Н1 критической ошибкой. Специалист компании Мэтт Каттс также говорил о возможности размещения на странице нескольких тегов H1 в тех случаях, когда этого требует логическая структура контента. Однако автор рекомендовал не злоупотреблять этим тэгом и не применять его без необходимости. Например, не стоит выделять тэгами заголовка значительные фрагменты текста. Это, как и слишком частое использование заголовков, не соответствующее структуре статьи, может привести к понижению страницы в результатах поисковой выдачи.
Тег h1 для Яндекс
Важно понимать: для Яндекса присутствие нескольких тегов h1 на странице является отрицательным сигналом ранжирования в интернете.
Информацию по наличию на странице нескольких заголовков h1 можно получить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».
Как составить «цепляющий» заголовок?
Создание привлекательных заголовков — сложная работа. Чтобы заголовок привлекал внимание пользователей он должен:
сразу показать читателю полезность данного контента — например, предложить решение проблемы, получение какой-либо выгоды и т. п.:
«Как писать заголовки в SMM»;
добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию:
«Создаем самый надежный пароль и запоминаем его»;
быть понятным и предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия:
«100+ заголовков, привлекающих внимание»;
обозначать некоторую целевую аудиторию, то есть указывать, для кого предназначен контент страницы:
«Как придумать заголовок к статье? Шпаргалка копирайтера»;
включать побудительные глаголы — они помогут создать нужное вам отношение пользователя к содержимому страницы:
«Получайте новости о конкурсах и грантах быстрее всех!»;
бросать читателю вызов, предлагать ему проверить свои знания:
«А вы знаете, как правильно читать книги?».
Помните, что создание заголовка должно соответствовать контенту страницы вообще. Если вы обманете ожидания читателя, вызванные заголовком, то потеряете доверие к следующим своим текстам и трафик.
Правила оформления заголовков Н2 — Н6
Подзаголовки уровней Н2 — Н6 прописываются внутри текста страницы, чтобы выделить его разделы. Они также учитываются поисковыми системами при анализе контента страницы и должны соответствовать определенным правилам.
располагаться в строгом соответствии с уровнем иерархии;
раскрывать тематику раздела;
начинаться с новой строки;
отличаться по стилю от основного текста и заголовков других уровней;
Заголовки не должны:
включать ниакие другие теги, например, для дополнительного выделения жирным шрифтом;
использоваться для выделения фраз и предложений, не являющихся заголовками по смыслу;
избыточно наполняться ключевыми словами;
находиться в элементах меню и содержать активные ссылки.
Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».
Способы: как сделать заголовок Н1 — Н6 в CMS ?
Обычно в шаблонах систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную добавить в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего ресурса.
Пример в WordPress:
Важность уровней заголовков для вспомогательных технологий
Спецификация HTML описывает шесть видов заголовков: <h1> , <h2> , <h3> , <h4> , <h5> и <h6> . Число в названии элемента отражает его приоритет. При этом <h1> самый общий, а <h6> наиболее специфичный.
Это важно знать! WebAIM провела в 2017 году опрос пользователей скринридеров, и он показал, что навигация по заголовкам — это самый важный способ навигации для людей, которые пользуются вспомогательными технологиями для поиска информации. Именно поэтому так важно правильно организовать заголовки на вашем сайте.
Познание
Прежде чем мы подробно рассмотрим как работают вспомогательные технологии, надо понять причины, по которым СМИ используют главы, разделы, подразделы и параграфы. Дробление контента на отдельные части облегчает его понимание, усвоение, запоминание и работу со ссылками.
Несмотря на то, что интернет не печатное издание, он заимствует у типографики все хорошие практики. Заголовки в HTML аналогичны соглашениям в типографике. Это одна из тех вещей, которую каждый считает чем-то очевидным, но она на самом деле помогают огромному количеству людей. Когнитивные нарушения широко распространены и перевешивают другие виды нарушений. Группировка контента на логические части помогает всем: от людей с патологическим состоянием организма, например, деменцией, до людей с временными ограничениями, такими как бессонница или осваивающими новые навыки.
Навигация с помощью заголовков
Некоторые виды вспомогательных технологий (не только скринридеры) позволяют людям перескакивать от одного заголовка к другому. Это похоже на опыт людей, которые не пользуются вспомогательными технологиями, а прокручивают страницы, чтобы понять общий смысл, и останавливаются, когда находят нужную информацию.
Создание списков заголовков
Какие-то вспомогательные технологии могут обрабатывать заголовки и представлять их в виде упорядоченного списка. Такой список помогает быстро понять общий смысл страницы.
Если вы не соблюдаете логическую последовательность, скажем, переходите от заголовка первого уровня сразу к третьему и пропускаете заголовок второго уровня, это может сбить с толку и вызвать раздражение у человека, которому они необходимы для навигации. Этот пробел в логической последовательности создаст трудности для пользователей и вынудит их использовать другие способы навигации, которые отнимут больше времени и сил на то, чтобы понять общую структуру страницы (если она есть) и определить, есть ли тут нужная информация в принципе.
Заголовки первого уровня
Ещё одна важная вещь, которую мы можем сделать, это убедиться, что на странице только один заголовок первого уровня. Такой заголовок должен описывать основную идею содержания страницы. Например, у страницы об истории французской выпечки может быть такой заголовок первого уровня:
Алгоритм структуры документа (несуществующий)
К сожалению, существует заблуждение о том, что можно использовать заголовки первого уровня для каждого элемента секционного контента на странице, а браузер дальше сам во всём разберётся с помощью алгоритма построения структуры документа (Document Outline Algorithm). Этот алгоритм спекулятивная фантастика. В момент написания этой статьи алгоритм не поддерживается ни одним браузером. По этой причине мы должны придерживаться подхода «Priority of Constituencies», описанного в спецификации, и использовать другие заголовки.
Другие заголовки
Заголовки от второго до шестого уровней должны последовательно размещаться за первым и описывать основные моменты содержимого страницы.
Например, вот структура этой статьи:
Посмотрев на этот список, вы быстро поняли про что статья. Неплохо, да?
Ещё нужно отметить, что заголовки, подобно иерархическим форматам вроде JSON, могут содержать внутри другие заголовки, при условии, что они логически связаны. Внутри заголовка второго уровня вы можете использовать несколько заголовков третьего уровня. Каждый из этих подзаголовков может, в свою очередь, иметь внутри подзаголовки четвёртого уровня.
Когда вы завершили тему, то можете закрыть вложенные заголовки. Это единственный случай, когда допустимо использовать «пропущенные» уровни: вы закончили описывать конкретную проблему и вернулись к более общей теме.
Этот пример показывает как правильно использовать заголовок пятого уровня («Шеф-повар принца Конде») перед заголовком третьего уровня («18 век»), пока родительские заголовки располагаются последовательно друг за другом. Если бы заголовок третьего уровня шёл перед заголовком пятого, то это было бы уже неправильно.
Избыточная описательность
Если мы используем слишком много заголовков, то перегружаем пользователей вспомогательных технологий информацией. Вы можете подумать, что я противоречу себе, ведь я только что говорил о том, как важны заголовки для навигации.
Подумайте об этом так: так же как и слишком большое количество элементов навигации на странице рассеивает внимание пользователей, так и большое количество заголовков создаёт фоновый шум, который запутывает их и отвлекает от идеи, которую вы пытаетесь донести.
Нет чётких правил о количестве заголовков, которое считается избыточным. Это напрямую зависит от того, какой это контент и в каком объёме нужно раскрыть его содержание. Например, для рецепта достаточно указать название блюда, его ингредиенты и дать инструкцию по приготовлению. Для научной статьи нужна большая детализация.
Другие сервисы
Хорошая структура заголовков нужна не только людям, которые пользуются вспомогательными технологиями. Так как заголовки имеют семантическое значение, другие сервисы могут взаимодействовать с описанием элементов, интерпретировать его и представлять в удобном виде для пользователей. Например, вот что делает поисковая система Bing со странницами с хорошей структурой:
Как и скринридеры, сервисы вроде Google Docs и Dropbox Paper могут автоматически создавать перечни заголовков, чтобы помочь вам быстрое понять содержание документа и перемещаться по нему. Многие текстовые редакторы тоже умеют быстро формировать из заголовков динамически обновляемые оглавления, что делать вручную очень утомительно и трудоёмко. И, благодаря совместимости HTML, мы даже можем воссоздать такую навигацию с помощью расширения для браузера!
Стилизация
Все слишком часто забывают, что CSS-классы могут применяться к заголовкам, как к любому другому элементу HTML внутри <body> .
Семантика
Причина, по которой я это упомянул, заключается в том, что элементы заголовков часто используются из-за того, как они выглядят («О, мне нравится цвет и шрифт <h3> , использую-ка я его!»), а не из-за того, какой приоритет содержимого они описывают (Бриошь — это вид сдобы). Это распространённая ошибка.
В идеальном академическом мире мы соблюдаем материальную честность (material honesty) заголовков, определяя их размер и стиль в соответствии с тем, какой уровень иерархии они описывают.
Однако мы живём в реальном мире. Современные сайты и веб-приложения — это сложные вещи. Их разрабатывают люди с разным уровнем опыта, интересами, знаниями и возможностями при проектировании и написании кода.
Целесообразность
В реальном мире может потребоваться стилизовать заголовок четвёртого уровня как заголовок второго уровня или оформить его как совершенно другой элемент. В этом случае лучше сохранить логическую структуру страницы и изменить только внешний вид заголовка:
Это компромисс и признание того, что реальный мир сложный. Этот подход позволяет сохранить важную составляющую: интуитивную и эффективную навигацию для вспомогательных технологий.
Служебные стили
Такие методологии как Utility-First CSS помогают более гибко настраивать внешний вид заголовков:
В примере я объявляю несколько классов, которые будут изменять внешний вид заголовков до тех пор, пока я не получу желаемый результат. Вы можете столкнуться с этой методологией на крупных сайтах и в приложениях, где низкая специфичность классов помогает сохранить согласованность кода (консистентность).
Сброс
Чтобы закрепить правильный порядок и вложенность заголовков, можно сбросить их стили. Это поможет избежать использования дополнительного класса, который приводит заголовки к одному виду.
Этот небольшой пример оборонительного дизайна (defensive design) заставляет задуматься над тем, как структура документа формируется в зависимости от его внешнего вида. Эти стили объявляются после импорта CSS-сброса, так как могут переопределить стили из файла со сбросом.
Именование
Одна из сложнейших проблем информатики — это именование сущностей. Она признаёт, что вы ничего не знаете. Я не берусь утверждать, что знаю лучший способ именования классов заголовков для вашего сайта или приложения. Однако, если вы используете подход, который не основан на служебных стилях, я не рекомендую называть их .h1 , .h2 , .h3 и так далее.
Проблема этого подхода в том, что люди, которые не знакомы с кодовой базой, могут принять такое именование классов за инструкцию, требующую соответствия названия класса уровню заголовка. Это усилит проблему преимущества внешнего вида элемента над его содержанием.
Я также встречал случаи, когда такой подход допускал вообще не использовать для некоторых заголовков семантические теги («А, я могу сделать этот <div> похожим на <h5> !»). Не надо так!
Подводя итоги: воспользуйтесь моментом
Опрос пользователей скринридеров, который WebAIM провела в 2017 году, также показал, что пропуск или неподходящие заголовки одна из 10 наиболее распространённых проблем, с которыми сталкиваются пользователи вспомогательных технологий.
И это одна из самых распространённых проблем с доступностью, которую легко решить. Потратьте немного времени и посмотрите на свой сайт или приложение ещё раз. Структура заголовков точно описывает страницу? Соблюдается ли логический порядок? Очень просто поменять пару цифр местами!
Стоит обратить внимание и на то, что заголовки, подобно иерархическим форматам данных, таким как JSON, могут быть вложены в другие, если они логически связаны. Внутри заголовка второго уровня вы можете использовать заголовки третьего. Каждый из этих подзаголовков может, в свою очередь, иметь вложенные подзаголовки четвёртого уровня.