Семантика HTML5 - H1 или H2 для названий СТАТЬИ в РАЗДЕЛЕ

Насколько я понимаю (основываясь на этой главе «Погружение в HTML5: http://goo.gl/9zliD» ), семантически целесообразно использовать теги H1 в нескольких областях страницы в качестве метода задания наиболее важного заголовка. для этого конкретного контента.

Если я использую эту методологию и у меня есть РАЗДЕЛ, которому я присвоил H1 «Статьи», должен ли я использовать H1 или H2, чтобы определить заголовки для СТАТЬЕЙ в этом РАЗДЕЛЕ? Это немного смущает меня, поскольку заголовки статей являются наиболее важным заголовком для их СТАТЬИ, но также являются «детьми» из названия РАЗДЕЛА.

Пример кода:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

Пилигрим не одинок в этом.

Согласно HTML5 для веб-дизайнеров Джереми Кейта , вы можете использовать несколько <h1>документов в документе, не разрушая сводку документа, если они вложены в отдельные семантические теги секций.

Цитирование непосредственно из электронной книги (которую я купил в iBooks)

Пока что новое содержание секционирования не дает нам намного больше, чем то, что мы могли бы сделать с предыдущими версиями HTML. Вот один из ключевых моментов: в HTML5 каждый фрагмент контента имеет свой собственный отдельный контур. Это означает, что вам не нужно отслеживать, какой уровень заголовка вы должны использовать - вы можете просто начинать с h1 каждый раз:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Пример кода также из книги, стр. 73)

Я склонен согласиться с интерпретацией Марка Пилигрима . Если вы заключаете свою статью в articleэлемент, тогда вы можете начать сначала с h1заголовка для статьи.

В спецификации HTML5 articles должны рассматриваться как независимая, автономная часть страницы. Вы должны быть в состоянии переместить articleэлемент как есть на другую страницу без переформатирования заголовков.

Если заголовки статьи должны были быть продолжением иерархии заголовков документа, то, когда вы перетаскиваете ссылку articleнепосредственно под bodyтегом, вам нужно перейти к ней h1, но если вы уронили ее под вложенными разделами, вам придется изменить ее на h3/ h4// h5и т. д., в зависимости от того, где вы его разместите.

Фактически, каждый раз, когда вы создаете новый sectionили article, вам следует вернуться к нему h1, так как следующее идентично:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

и:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

В качестве примечания: если ваш заголовок - это просто элемент заголовка (например h1) и ничего больше, вам не нужно заключать его в headerэлемент.

Хотя заголовки статей вашей страницы важны, обычно заголовок страницы верхнего уровня определяет содержание страницы. Иногда это название статьи, а иногда, как вы показываете, название списка статей.

<h1>My Very Interesting Articles</h1>

Этот заголовок определяет всю страницу как «интересные статьи». Затем каждая статья перечисляется, но имеет меньший уровень заголовка.

Официальный ответ w3schools на использование тегов заголовков на странице следующий: заголовки H1 следует использовать в качестве основных заголовков, затем заголовки H2, затем наименее важные заголовки H3 и так далее.