Можем ли мы иметь несколько тегов h1 и сделать их меньше по размеру, чем другие заголовки?

У меня есть домашняя страница с ползунком после заголовка. Под слайдером находятся другие разделы контента.

Я не уверен, как структурировать свой документ. Где я должен разместить свой h1 и могу ли я иметь несколько h1 теги?

Это хорошая практика для использования h1 теги для заголовков баннеров или заголовки баннеров?

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

<body>
    <div class="slider-wrapper">
        <div class="slide">
            //some text - image in background
        </div>
        <div class="slide">
            //some text - image in background
        </div>
        <div class="slide">
             //some text - image in background
        </div>
    </div>

   <div class="client-wrapper">
        <h2>Our Clients</h2>
        <div>
          Client Logos
        </div>
  </div>
  ....
</body>
Источник

4 ответа

Как правило, можно иметь много h1 тег, но структурно это может быть лучше, если у вас есть только один h1, Вы можете изменить свои заголовки h1"s font-size с CSS, если у вас есть что-то внутри, как header тег. Как это:

HTML:

<header>
  <h1>My awesome page!</h1>
</header>
<h1>Thing I want to talk about today</h1>

CSS:

header h1 {
  font-size: 1.5em;
}
Источник

Где я должен разместить свой <h1>?

<h1> элемент обычно используется для разметки основного заголовка документа, так что... <h1> элемент обычно появляется где-то в верхней части визуально отображаемого документа.

В исходной разметке вы можете технически разместить <h1> где угодно, так как position: fixed или же position: absolute в вашем CSS будет достаточно для отображения элемента где-то в верхней части визуального документа.

Обычно однако <h1> появляется в разметке источника довольно скоро после <body> начинается.

Могу ли я иметь несколько тегов h1.

Что-то из гнезда шершня. Да, вы можете, но...

Это, вероятно, нецелесообразно.

Лучшая отдельная статья, в которой рассказывается, как структура документа и заголовки были предназначены для работы в HTML5 и как все на самом деле работает на практике:

Структура документа HTML5 - опасная фикция Стива Фолкнера

Является ли хорошей практикой использование тегов h1 для заголовков баннеров или заголовков баннеров?

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

  • <figure> использования <figcaption>
  • <table> использования <caption>
Источник

Не требуется, чтобы у вас был только тег 1 h1 ( см. Пример в документе WHATWG здесь), но многие дизайнеры резервируют h1 для заголовка страницы, используя подзаголовки заголовков более низкого уровня. Я бы порекомендовал разместить только один на странице.

h2,h3 и т.д.. по умолчанию будет меньше, чем h1. Хотя вы могли бы использовать несколько тегов h1 с атрибутами класса для нацеливания CSS на разные заголовки, я бы настоятельно не рекомендовал это использовать h2,h3 и т. Д.

Мне не ясно, что именно вы подразумеваете под "заголовками / заголовками баннеров" в этом контексте.

Источник

Это хороший пост. Как специалист по UX/UI, я сталкиваюсь с проблемами, когда разным страницам нужны разные H1-H3. Чтобы руководство по стилю было организовано, у меня есть H1, но помеченный как большой/средний/маленький.

Источник
Другие вопросы по тегам