Можно ли использовать заголовки после H6 в HTML и CSS?

Заголовки всегда были от H1 до H6, но как насчет H7, H8...H137 и т. д. К моему удивлению, они все работают!. Вы можете стилизовать любой номер заголовка любым удобным для вас способом. Я пробовал их в нескольких современных браузерах и не имел никаких проблем. Вы спросите, зачем мне их использовать... Ну, вместо того, чтобы набирать что-то вроде <span class="h7">Hello World</span>, я мог просто набрать <h7>Hello world</h7> и получить тот же результат. Об этом где-нибудь написано? Это неправильно? Существуют ли браузеры новее IE8, которые его не поддерживают?


html css html-heading
person CheeseFlavored    schedule 06.08.2016    source источник
comment
Шести уровней заголовков должно быть достаточно для всех. Если у вас есть подлинный вариант использования большего количества уровней, вы должны сообщить о проблеме на странице github.com/w3c/. html/вопросы   -  person Alohci    schedule 07.08.2016

Ответы (5)


arrow_upward
2
arrow_downward

Нет. Только первые 6 являются стандартными.

Элементы h1, h2, h3, h4, h5 и h6

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

Что касается их соответствующих структур документа (их структуры заголовков и разделов), эти два фрагмента семантически эквивалентны:

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
  <h2>Canvas coordinates</h2>
  <h3>Canvas coordinates diagram</h3>
  <h2>Paths</h2>
</body>

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
  <section>
    <h1>Canvas coordinates</h1>
    <section>
      <h1>Canvas coordinates diagram</h1>
    </section>
  </section>
  <section>
    <h1>Paths</h1>
  </section>
</body>
person Oriol    schedule 06.08.2016
comment
семантически эквивалентен Да, может быть. Но инструменты доступности не будут относиться к ним одинаково, и по этой причине последние черновики HTML 5 не рекомендуют эту практику, поэтому мы также должны препятствовать этому. - person Alohci; 07.08.2016

arrow_upward
1
arrow_downward

Основная цель заголовков — их семантика, поскольку они указывают на короткие и важные части веб-сайта, которые пользователи программ чтения с экрана используют для получения быстрого обзора содержимого веб-сайта и навигации по нему. Последнее особенно важно для пользователей программ чтения с экрана.

Поскольку h1-h6 указывают на разную важность, и в качестве основного правила вы должны стараться использовать как можно меньше уровней (h1-h3, h4 максимум), нет смысла использовать h7-hxxx.

h7-hxxx не являются допустимыми элементами заголовков html, и только потому, что браузеры пытаются интерпретировать их как div без семантики, не нарушая их, это не означает, что они "работают". НЕТ, так как у них нет семантики

TLDR: определенно НЕ используйте их.

edit: вы упомянули, что IE9+ не "ломается". В основном это происходит из-за html5, который заставляет браузеры интерпретировать неизвестные элементы как бессмысленные и лишенные семантики элементы (например, обычные div).

person MattDiMu    schedule 06.08.2016

arrow_upward
1
arrow_downward

Возможно, это не соответствует стандартам, но вы можете определить свои собственные элементы. Это связано не с х7-х200, а с любым словом. Вы можете использовать, например. blabla или houhouhou. Код здесь:

<style type="text/css">
    houhouhou   {color: green}
    blabla { color: blue}
</style>

<houhouhou>Hello</houhouhou>
<blabla>World</blabla>

Код для тестирования здесь.

Но, как и другие, я также рекомендую использовать классические классы CSS с div или span в этом духе:

<style type="text/css">
    .houhouhou   {color: green}
    .blabla { color: blue}
</style>

<div class="houhouhou">Hello</div>
<div class="blabla">World</div>
person von Oak    schedule 06.08.2016

arrow_upward
0
arrow_downward

Спецификации HTML определяют теги заголовков между H1 и H6 (включительно). Все, что выходит за рамки этого, потенциально может работать в браузерах, как и предполагалось, но, поскольку это не является частью спецификаций html, браузер может интерпретировать, как они хотят (возможно, по-разному), поэтому я бы не стал полностью на это полагаться. Это применимо ко всему, что не является частью спецификаций html. Тем не менее, теги H довольно просты для понимания, поэтому я считаю, что браузер должен интерпретировать эти теги выше H6 правильно и аналогичным образом.

person lucas    schedule 06.08.2016
comment
Я считаю, что браузер должен интерпретировать эти теги выше H6 правильно и аналогичным образом. Они не будут. Они будут обрабатываться по-разному, стилизоваться по-разному и, что наиболее важно, будут по-разному представлены в API специальных возможностей. - person Alohci; 07.08.2016
comment
Я сказал похожее, не то же самое - person lucas; 07.08.2016

arrow_upward
0
arrow_downward

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

person Miguel Mota    schedule 06.08.2016