Споры вокруг нового тега <h>

17 февраля в репозитории, в котором ведётся разработка и обсуждение черновика спецификации HTML, был открыт issue c заголовком “Add <h> element”. Если вкратце: предлагают в следующей спецификации добавить заголовочный тег <h> к уже имеющимся у нас 6-ти заголовочным тегам. С какой целью такое предложение было вынесено на обсуждение и чего не хватало — давайте это и обсудим.

За 5 дней эта issue на GitHub набрала 155 комментариев. И это не просто “+” или “-“. Это куча аргументов как за, так и против. Я не буду вносить субъективизм в свои слова или давать какую-либо оценку — просто изложу суть.

Для чего традиционно использовали заголовки на странице? — Чтобы применять их в контенте, прямо имеющем отношение к содержанию страницы. С помощью заголовков разных уровней мы могли структурировать контент: определять главный заголовок, определять подзаголовки, определять подподзаголовки и т.д.

Исходя из того, что всемирная паутина изначально создавалась по принципу “одна страница — одна сущность”, логично предположить, что у этой сущности могло быть только одно название, а следовательно на странице мог быть только один заголовок первого уровня (<h1>). А для всех подзаголовков на следующих уровнях вложенности нам приходилось явно указывать уровень заголовка (<h2>, <h3>, <h4>, <h5>, <h6>).

Вот пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div class="article">
<h1>Моя статья</h1>
<div class="part">
<h2>Часть первая</h2>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</div>
<div class="part">
<h2>Часть вторая</h2>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</div>
</div>
</body>

С приходом HTML5 вёрстка приобрела большую семантику. У нас появились теги <article>, <section> и пр., несущие в себе смысловую нагрузку. Посмотрим как этот же пример выглядит с применением всего инструментария HTML5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<article>
<h1>Моя статья</h1>
<section>
<h2>Часть первая</h2>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</section>
<section>
<h2>Часть вторая</h2>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</section>
</article>
</body>

На данном этапе разметка стала более читабельной и логичной — семантичной. Но нам всё ещё приходится думать над тем, заголовок какого уровня мы хотим употребить. Уберём все цифры у тегов <h*>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<article>
<h>Моя статья</h>
<section>
<h>Часть первая</h>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</section>
<section>
<h>Часть вторая</h>
<p>Какой-то текст.</p>
<p>И ещё текст.</p>
</section>
</article>
</body>

Что мы потеряли от такого изменения? Фактически ничего, ведь мы можем восстановить уровень заголовка из контекста. Какой заголовок является самым главным? — Тот что имеет наименьшую вложенность. Исходя из вложенности можно легко восстановить уровень всех заголовков. Кроме того, мы получаем возможность перенести элементы без редактирования уровня заголовка, так как куда бы не перенесли элемент, уровень будет восстановлен из контекста. Кроме того, данный тег снимает ограничение на количество уровней заголовков, коих всегда было максимум 6.

Вроде бы одни плюсы, но в issue имеются и аргументы против, а также замечания. Очень хорошо их собрал и описал Джейк Арчибальд в своей статье “Do we need a new heading element? We don’t know”. В статье и issue есть следующие мнения:

  1. Вычисление уровня заголовка из контекста бьёт по производительности браузеров.
  2. Нужно сохранить обратную совместимость.
  3. Проще адаптировать то, что уже есть, чем создавать что-то новое. (Речь про имеющиеся заголовочные элементы)
  4. Предлагают использовать не <h>, а <heading> или <header>.
  5. Отмечается, что не всегда можно вычислить уровень по вложенности. Например, когда теги <h> идут подряд, но по смыслу имеют разный уровень. (https://github.com/w3c/html/issues/774#issuecomment-278270732)
  6. Ожидается, что всё станет сложнее с CSS-селекторами: https://github.com/w3c/html/issues/774#issuecomment-278278458

Был бы рад услышать Ваши комментарии, аргументы за и против и предложения.

Поделиться Комментарии