HTML5 Semantic Structureturing статьи и раздела на веб -сайте с несколькими подкованными уровнями

Question

Что из следующего - если есть - самый правильный способ использования элементов статьи и раздела на веб -сайте с несколькими подколенными уровнями?

Первый пример Создает этот плоский контур, как это.

1. Название компании
   1. Сегментная навигация
2. Название сегмента
   1. Сегментная субвигация
3. наименование товара
   1. Навигация по субстраничности продукта
   2. Продукт Sub Page 1 заголовок
4. Нижний колонтитул

... и выглядит так

<header> <!-- MAIN NAVIGATION -->
    <h1><a>Company Name</a></h1>
    <nav>
        <h1>Segment Navigation</h1>
        <ul>
            <li><a>Segment 1</a></li>
            <li><a>Segment 2</a></li>
            <li><a>Segment 3</a></li>
        </ul>
    </nav>
</header>
<header> <!-- SUB NAVIGATION -->
    <h1><a>Segment Name</a></h1>    
    <nav>
        <h1>Segment Sub Navigation</h1>
        <ul>
            <li><a>Product 1</a></li>
            <li><a>Product 2</a></li>
            <li><a>Product 3</a></li>
        </ul>
    </nav>
</header>
<header> <!-- PRODUCT PAGE NAVIGATION -->
    <h1><a>Product Name</a></h1>    
    <nav>
        <h1>Product Sub Page Navigation</h1>
        <ul>
            <li><a>Product sub page 1</a></li>
            <li><a>Product sub page 2</a></li>
            <li><a>Product sub page 3</a></li>
        </ul>
    </nav>
</header>
<article>
    <h1>Product sub page 1 title</h1>
    <p>Content from Product sub page 1<p>
</article>
<footer>
    <h1>Footer</h1>
    <p>Footer content</p>
</footer>

Второй пример Создает такой контур структуры дерева

1. Название компании
   1. Сегментная навигация
   2. Название сегмента
      1. Сегментная субвигация
      2. наименование товара
         1. Навигация по субстраничности продукта
         2. Продукт Sub Page 1 заголовок
2. Нижний колонтитул

... и выглядит так

<header> <!-- MAIN NAVIGATION -->
    <h1><a>Company Name</a></h1>
    <nav>
        <h1>Segment Navigation</h1>
        <ul>
            <li><a>Segment 1</a></li>
            <li><a>Segment 2</a></li>
            <li><a>Segment 3</a></li>
        </ul>
    </nav>
</header>

<section> <!-- SEGMENT SECTION -->
    <header> <!-- SUB NAVIGATION -->
        <h1><a>Segment Name</a></h1>    
        <nav>
            <h1>Segment Sub Navigation</h1>
            <ul>
                <li><a>Product 1</a></li>
                <li><a>Product 2</a></li>
                <li><a>Product 3</a></li>
            </ul>
        </nav>
    </header>

    <section> <!-- PRODUCT SECTION -->
        <header> <!-- PRODUCT PAGE NAVIGATION -->
            <h1><a>Product Name</a></h1>    
            <nav>
                <h1>Product Sub Page Navigation</h1>
                <ul>
                    <li><a>Product sub page 1</a></li>
                    <li><a>Product sub page 2</a></li>
                    <li><a>Product sub page 3</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <h1>Product sub page 1 title</h1>
            <p>Content from Product sub page 1<p>
        </article>
    </section>
</section>

<footer>
    <h1>Footer</h1>
    <p>Footer content</p>
</footer>

Answer 1

Оба в порядке, но имеют в виду разные вещи. Идите с любым контуром, соответствующим вашему намерению для структуры.