it-roy-ru.com

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

В проекте Bootstrap CSS , стили для тегов заголовков предусмотрены (H1, H2, H3, H4, H5, H6), но есть также ряд имен классов, основанных также на заголовках (.h1,. h2, .h3, .h4, .h5, .h6). Какая выгода от использования имени класса H1 без правильного использования тега H1? Я думаю, что вы всегда хотите убедиться, что ваш HTML отражает вашу визуальную важность.

Будем благодарны за любые мысли, объясняющие вескую причину использования .h1 вместо использования тега h1.

61
Hynes

Ты спрашиваешь:

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

Короткий ответ:

Цель состоит в том, чтобы использовать оба вместе.

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

Первый бит - это элемент/тег. «<h*>» заботится о семантике, доступности и SEO.

Второй бит это класс. '.h*' заботится о визуальной семантике и типографской иерархии. 

Длинный ответ:

Я считаю, что происхождение этих классов происходит от проекта OOCSS:

Объектно-ориентированный CSS

Последняя итерация OOCSS немного изменилась с тех пор, как я в последний раз смотрел на нее, но вот соответствующий файл heading.css из более старого коммита, который содержит классы .h1 - .h6, с которыми я знаком:

6e481bc18foocss/core/heading/heading.css

Из комментариев:

Классы .h1-.h6 должны использоваться для поддержания семантически подходящих уровней заголовков - НЕ для использования без заголовков
...
если требуются дополнительные заголовки, их следует создавать с помощью дополнительных классов, а не с помощью стиля, зависящего от местоположения

Обратите внимание на выделение выше.

Для хорошего объяснения того, почему можно использовать эти классы, смотрите:

  1. stubbornella.org : Не стиль заголовков с использованием разделов HTML5 (Николь, автор этого поста, является создателем OOCSS)
  2. csswizardry.com : Прагматичный, практичный размер шрифта в CSS
  3. Группы 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>

Пожалуйста, прочитайте полные статьи (и ветку), по ссылкам выше, для более подробной информации, связанной с этим вопросом/темой.

57
mhulse

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

32
animuson

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

  • Использование div вместо правильного тега, чтобы получить визуальный заголовок без влияния на SEO
  • Чтобы избежать осложнений из-за несоответствий браузера
  • Совместимость с другими библиотеками и средами, которые решили сделать то же самое по причинам 1 и 2 
  • Гибкость дизайна (как отмечено @scrappedcola в комментариях)
8
Mike H.

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

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

Увидеть:

5
Byran

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

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

1
Becuzz

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

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

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

0
agc

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

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

0
Peter Swords