Зачем использовать.h1 вместо фактического h1?

большинство таблиц стилей имеют набор размеров шрифта, которые соответствуют стилям заголовков с 1 по 6. Иногда, в другом месте на странице, веб-дизайнеры хотят использовать те же размеры шрифта на текст, который должен не быть частью фактического элемента заголовка, по семантическим причинам. Вместо того, чтобы предоставлять имена для каждого из этих размеров, таких как .size-12,.size-14,.size-16 и т. д., проще просто назвать их имена, класс, похожими на ваши заголовки. Таким образом, вы знаете, что текст будет тот же размер, что и элемент H1, хотя на самом деле это не элемент H1. Я сам делал это несколько раз.

несколько причин, которые я могу придумать:

• используя div вместо правильного тега, чтобы получить визуальный заголовок без влияния на SEO
• чтобы избежать осложнений от неувязок браузер
• совместимость с другими библиотеками и фреймворками, которые решили сделать то же самое по причинам 1 и 2
• гибкость дизайна (как отмечено @scrappedcola в комментариях)

Это позволяет для разделения визуальной иерархии сформировать семантическую иерархию. например, я хочу сказать зрителю одно, а компьютеру (поисковым системам) - другое.

<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>

посмотреть:

• http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections (в сторону Боттона раздел)
• http://html5doctor.com/html5-seo-search-engine-optimisation/
• http://www.youtube.com/watch?v=GIn5qJKU8VM

единственное, что я могу вспомнить навскидку для поисковых систем. Многие будут смотреть на фактический тег h1 в качестве заголовка или темы страницы и использовать его для поиска и т. д. Наличие нескольких тегов h1 может запутать пауков поисковой системы и может испортить поиск, который вернет результаты для вашего сайта (я также слышал, что это может привести вас в список "плохой сайт" с некоторыми пауками, такими как Google).

наличие стилей позволяет вам иметь тот же визуальный взгляд на элемент без завинчивания поисковая система.

еще одна причина, с которой я столкнулся недавно... это не относится к угловым, но служит хорошим примером:

Я хочу создать динамические / декларативные формы в Angular (см. динамические формы в угловой поваренной книге) и разрешить стилизованные текстовые элементы. Максимальная гибкость потребует разрешения мне декларативно добавлять произвольные элементы HTML в мои формы, но это открыто для атак сценариев и требует явного подрыва компилятора Angular, чтобы даже разрешить его. Вместо, Я разрешаю добавлять текстовые элементы в формы вместе с классом для управления стилем. Так что я могу использовать .стиль h1, но не элемент h1.

Это определенно поможет с точки зрения SEO и Google crawlers лучше понять вашу страницу. Когда он читает h1, он предполагает, что все, что находится там, должно быть фокусом страницы. H2, были бы вторыми компонентами и так далее. Таким образом, Google может понять "объем" того, что ваша страница охватывает с точки зрения контента.

не совсем уверен, но большой переменной, на мой взгляд, будет режим "чтения" страниц. Это позволит устройствам и читателям организовывать контент особенно для устройств, используемых слабовидящими людьми.

также он обеспечивает структуру страницы и чувство порядка.