0

次のうち、複数のサブレベルを持つWebサイトで記事とセクションの要素を使用する最も正しい方法はどれですか？

最初の例では、このようなフラットなアウトラインを作成します。

  1. 会社名
    1. セグメントナビゲーション
  2. セグメント名
    1. セグメントサブナビゲーション
  3. 商品名
    1. 製品サブページナビゲーション
    2. 製品サブページ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>

2番目の例では、次のようなツリー構造のアウトラインを作成します

  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>
4

1 に答える 1

2

どちらも問題ありませんが、意味が異なります。構造の意図に一致するアウトラインを使用してください。

于 2011-11-30T01:00:44.253 に答える