Всегда ли заголовки html должны отсчитываться от 1?

Question

Я говорю о правильной семантической разметке.

Обычно я знаю, что нет причин не начинать с h1 и идти оттуда вниз.

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

В то же время это не является строго семантическим, не так ли?

Есть ли здесь лучшая практика?(В первую очередь меня интересует, что лучше всего подходит для программы чтения с экрана)

Answer 1

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

На самом деле, спецификация HTML5 даже содержит пример, в котором все заголовки <h1> отличаются друг от друга с помощьюновый тег <section>.Это выглядело бы сумасшедшим несколько лет назад.

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

Answer 2

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

Лично я бы начинал боковую панель максимум с h3, некоторые даже начинали с h5. Вес заголовка в вашем документе должен определять соответствующий уровень. Например, довольно неважный заголовок «Навигация» не должен быть h1.

Для Google и других поисковых систем, если и «Навигация», и «Мой удивительный заголовок» имеют значение h1 s, они одинаково важны, что семантически не так.

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

Answer 3

Вы можете использовать list, а затем использовать классы для форматирования их в CSS, даже если это не будет слишком семантическим:

<ul>
  <li class="level1">Level 1</li>
  <li class="level2">Level 2</li>
</ul>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; }
</style> 

Теги абзаца могут быть более семантическими:

<p class="level1">Level 1</p>
<p class="level2">Level 2</p>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; } 
</style> 

Answer 4

Я думаю, что использование CSS-потомков было бы рекомендуемым способом. Не беспокойтесь о написании "слишком много" CSS. Чем более четко вы определите свой макет с помощью CSS, тем более гибким он будет. Я бы использовал идентификатор боковой панели в качестве основного селектора.

<style>
  h1 {
    font-size: 2em;
  }

  #sidebar h1 {
    font-size: 1.1em;
  }
</style>

И определить это в коде так:

<div id="sidebar">
  <h1><!-- sidebar H1--></h1>
</div>
<h1>Page Title</h1>

Кроме того, я рекомендую использовать h1 только один раз в целях доступности, используя его только для заголовка основного контента. Аналогично, используйте h2 - h6 только для подзаголовков контента. (См. WAI-ARIA role s для разметки для меню).

Answer 5

Depents. Я думаю, что некоторые поисковые системы считают, что h1 важнее h2, h3 и т. Д. Но для кодирования это не имеет значения.