HTML5 семантическое структурирование статьи и раздела на веб-сайте с несколькими подуровнями - PullRequest
Новая
       6

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

0 голосов
/ 29 ноября 2011

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

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

  1. Название компании
    1. Навигация по сегментам
  2. Имя сегмента
    1. Под-навигация по сегментам
  3. Название продукта
    1. Навигация по подстранице продукта
    2. Подстраница продукта под названием 1 title
  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. Подстраница продукта 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>

1 Ответ

2 голосов
/ 30 ноября 2011

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

...