В проекте CSS Bootstrap для стилей заголовка (H1, H2, H3, H4, H5, H6) предусмотрены стили, но также есть серия имена классов на основе заголовков (.h1,.h2,.h3,.h4,.h5,.h6). Какая польза от использования имени класса H1 без надлежащего использования тега H1? Я бы подумал, что вы всегда хотите, чтобы ваш HTML отражал ваше визуальное значение.
Любые мысли, объясняющие хорошую причину использования .h1 вместо использования тега h1, будут оценены.
Вы спрашиваете:
Зачем использовать
.h1вместо фактическогоh1?
Цель состоит в том, чтобы использовать оба вместе.
Полезность классов .h* вступает в игру, когда размер типографии в дизайне не коррелирует с семантически подходящими уровнями курса. Разделив проблему на две части, мы можем чисто решить их для обоих.
Первый бит - это элемент/тег. "<h*>" заботится о семантике, доступности и SEO.
Второй бит - это класс. ".h*" заботится о визуальной семантике и типографской иерархии.
Я считаю, что происхождение этих классов происходит из проекта OOCSS:
Последняя итерация OOCSS немного изменилась с тех пор, как я в последний раз смотрел на нее, но вот соответствующий heading.css файл, из более старого коммита, который имеет классы .h1 - .h6, с которыми я знаком
6e481bc18f oocss/core/heading/heading.css
Из комментариев:
Классы
.h1-.h6должны использоваться для поддержания семантически подходящих уровней заголовков - НЕ для использования без заголовков
...
если нужны дополнительные заголовки, они должны создаваться с помощью дополнительных классов, никогда не используя стиль зависимости от местоположения
Обратите внимание на выделение выше.
Для правильного объяснения того, почему нужно использовать эти классы, см.:
Соответствующие цитаты из приведенных выше ссылок:
... [HTML5] Элементы секции предназначены для того, чтобы помочь браузеру выяснить, на каком уровне находится заголовок, но не обязательно решать, как его стилизовать.
Итак, как мы используем заголовки в мире HTML5?
... Мы не должны использовать элементы секционирования для стилизации. Мы должны позволить им выполнять работу, для которой они предназначены, которая сортирует дерево документов и решает проблемы стилизации другим способом, который лучше соответствует нашим целям: с помощью простых многоразовых имен классов, которые могут применяться к любому из наших заголовков независимо от того, насколько глубоко они могут находиться в разрезе.
Я рекомендую абстрагировать заголовки сайтов на классы, потому что они переносимы, предсказуемы и сухи. Вы можете называть их чем угодно.
Еще один абсолютно звездный самородок мудрости [Николь Салливан] дал нам то, что я называю двунитевой иерархией заголовков. Это практика определения класса каждый раз, когда вы определяете заголовок в CSS.
... При назначении класса вместе с каждым стилем заголовка мы теперь имеем эти стили, прикрепленные к очень гибкому селектору, который можно перемещать в любом месте, а не в очень конкретный и не подвижный.
Здесь пример использования псевдо-html5 (h/t Jamund Ferguson):
<body>
<div class="main">
<h1>Main Heading</h1>
<section>
<h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
</aside>
</body>
Пожалуйста, прочитайте полные статьи (и темы), по ссылкам выше, для получения более подробной информации, относящейся к этому вопросу/теме.
В большинстве таблиц стилей есть набор размеров шрифта, которые соответствуют стилям заголовков с 1 по 6. Иногда, в другом месте страницы, веб-дизайнеры хотят использовать те же самые размеры шрифта для текста, который не должен быть частью фактического элемента заголовка, по семантическим причинам. Вместо предоставления имен для каждого из таких размеров, как .size-12, .size-14, .size-16 и т.д., Проще просто назвать их именами классов, аналогичными вашим заголовкам. Таким образом, вы знаете, что текст будет иметь тот же размер, что и элемент H1, даже если он не является элементом H1. Я сделал это несколько раз сам.
Несколько причин, о которых я могу думать:
Это позволяет разделить визуальную иерархию на семантическую иерархию. например, я хочу рассказать зрителю одну вещь, показывая компьютер (поисковые системы) что-то еще.
<article>
<h1 class="h1">Page Title</h1>
<p>Some content</p>
<section>
<h1 class="h2">Section Heading</h1>
<div class="h6">Sub Heading</div>
<p>Some content</p>
</section>
<section>
<h1 class="h2">Section Heading 2</h1>
<div class="h6">Sub Heading 2</div>
<p>Some content 2</p>
</section>
</article>
См:
Единственное, о чем я могу думать, - это поисковые системы. Многие будут рассматривать фактический тег h1 как заголовок или предмет страницы и использовать его для поиска и т.д. Наличие нескольких тегов h1 может смутить пауков поисковых систем и может испортить поисковые запросы, которые возвратят результаты для вашего сайта (я также слышал, что он может попасть в список "плохих сайтов" с некоторыми пауками, такими как Google).
Наличие стилей позволяет вам иметь один и тот же визуальный вид элемента, не закручивая поисковые системы.
Еще одна причина, по которой я столкнулся недавно... это не относится к Angular, но это служит хорошим примером:
Я хочу создать динамические/декларативные формы в Angular (см. раздел Динамические формы в Angular Cookbook) и разрешить стилизованные текстовые элементы. Максимальная гибкость потребовала бы, чтобы я мог декларативно добавлять произвольные элементы HTML в мои формы, но это открыто для сценариев атак и требует явного подрывного действия компилятора Angular, чтобы даже разрешить его. Вместо этого я позволяю добавлять текстовые элементы в формы, а также класс для управления стилем. Поэтому я могу использовать стиль .h1, но не элемент h1.