h1 в структуре страницы

Question

(я не уверен, что это правильное место, чтобы задать этот вопрос, если не предложите соответствующий форум)

У меня есть очень простая структура на странице:

<nav> 
<h2>Menu</h2> 
<ul> 
    <li>first</li> 
    <li>second</li> 
</ul> 
</nav> 

<h1>This is the h1</h1> 
<p>This is a paragraph</p> 

<h2>This is the h2</h2> 
<p>This is a paragraph</p> 

Я использую расширение Chrome «HTML5 Outliner», чтобы проверить правильность структуры страницы. К моему удивлению, это то, что он дает мне:

1- Untitled BODY 
    1- Menu 
2- This is the h1 
    1- This is the h2 

Я думаю, что проблема заключается в том, что в приведенном выше коде, я поставил СЧ перед h1. Если бы я поставил h1 первый, «HTML5 Outliner» дает мне структуру страницы, что я действительно хочу:

1- This is the h1 
    1- Menu 
    2- This is the h2 

В дизайне моей страницы (как и во многих других), то имеет смысл поставить СЧ сначала, а затем h1.

Мои вопросы:
1- Является ли структура, которую я здесь даю правильно?
2- Проблема с этим расширением, которая не работает хорошо? если да, может ли кто-нибудь порекомендовать мне еще один хороший способ проверить структуру-схему страниц моего сайта?

Answer 1

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

Помните, что автоматическая проверка кода/валидатор не может определить, хорош или плохой код. Этот плагин может просто что-то рекомендовать, но структура заголовка строго не определена. Вы можете использовать порядок, в котором вы нуждаетесь, вы можете пропустить и заголовок уровней и т. Д.

Answer 2

Что вы можете сделать, это структура ваш HTML соответственно:

• Заголовок
• Main (Примечание: может быть только один main элемент на странице)
• Footer

---

<header> 
    <nav> 
     <h2>Menu</h2> 
     <ul> 
      <li>first</li> 
      <li>second</li> 
     </ul> 
    </nav> 
</header> 

<main> 
    <h1>This is the h1</h1> 
    <p>This is a paragraph</p> 

    <h2>This is the h2</h2> 
    <p>This is a paragraph</p> 
</main> 

<footer> 
    <!-- Optional footer stuff --> 
</footer>