Ответ 1
Вы спрашиваете:
Зачем использовать
.h1вместо фактическогоh1?
Краткий ответ:
Цель состоит в том, чтобы использовать оба вместе.
Полезность классов .h* вступает в игру, когда размер типографии в дизайне не коррелирует с семантически подходящими уровнями курса. Разделив проблему на две части, мы можем чисто решить их для обоих.
Первый бит - это элемент/тег. "<h*>" заботится о семантике, доступности и SEO.
Второй бит - это класс. ".h*" заботится о визуальной семантике и типографской иерархии.
Длинный ответ:
Я считаю, что происхождение этих классов происходит из проекта OOCSS:
Последняя итерация OOCSS немного изменилась с тех пор, как я в последний раз смотрел на нее, но вот соответствующий heading.css файл, из более старого коммита, который имеет классы .h1 - .h6, с которыми я знаком
6e481bc18f oocss/core/heading/heading.css
Из комментариев:
Классы
.h1-.h6должны использоваться для поддержания семантически подходящих уровней заголовков - НЕ для использования без заголовков
...
если нужны дополнительные заголовки, они должны создаваться с помощью дополнительных классов, никогда не используя стиль зависимости от местоположения
Обратите внимание на выделение выше.
Для правильного объяснения того, почему нужно использовать эти классы, см.:
- stubbornella.org: Dont Style Headings с использованием разделов HTML5 (Николь, автор этого поста, является создателем OOCSS)
- csswizardry.com: Прагматичный, практический размер шрифта в CSS
- Группы Google > Объектно-ориентированный CSS > Вопрос заголовков: Базовая концепция/использование? (Вопрос, который я задал в сентябре '12)
Соответствующие цитаты из приведенных выше ссылок:
1. stubbornella.org
... [HTML5] Элементы секции предназначены для того, чтобы помочь браузеру выяснить, на каком уровне находится заголовок, но не обязательно решать, как его стилизовать.
Итак, как мы используем заголовки в мире HTML5?
... Мы не должны использовать элементы секционирования для стилизации. Мы должны позволить им выполнять работу, для которой они предназначены, которая сортирует дерево документов и решает проблемы стилизации другим способом, который лучше соответствует нашим целям: с помощью простых многоразовых имен классов, которые могут применяться к любому из наших заголовков независимо от того, насколько глубоко они могут находиться в разрезе.
Я рекомендую абстрагировать заголовки сайтов на классы, потому что они переносимы, предсказуемы и сухи. Вы можете называть их чем угодно.
2. csswizardry.com
Еще один абсолютно звездный самородок мудрости [Николь Салливан] дал нам то, что я называю двунитевой иерархией заголовков. Это практика определения класса каждый раз, когда вы определяете заголовок в CSS.
... При назначении класса вместе с каждым стилем заголовка мы теперь имеем эти стили, прикрепленные к очень гибкому селектору, который можно перемещать в любом месте, а не в очень конкретный и не подвижный.
3. groups.google.com
Здесь пример использования псевдо-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>
Пожалуйста, прочитайте полные статьи (и темы), по ссылкам выше, для получения более подробной информации, относящейся к этому вопросу/теме.