1

Stack Overflow、もう一度助けを求めてあなたのところに来ます。今回は、自分のサイトのメインコンテンツの見出しに関するHTML5のセマンティクスを理解するのに苦労しています。以下は2つの例ですが、どちらを使用すればよいですか？おそらく私は完全に別の方法で行く必要がありますか？

編集：コード例を混同しました！

例1

このコードを使用すると、次のようなアウトラインが得られます。

  1. カテゴリ：foo
  2. ブログ投稿＃1
  3. ブログ投稿＃2

ブログの投稿はカテゴリの下に投稿されているので、どちらが間違っているように見えますか？

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<div id="content">
    <section id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </section>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</div>

例2

このコードを使用すると、次のようなアウトラインが得られます。

  1. カテゴリ：foo
    1. ブログ投稿＃1
    2. ブログ投稿＃2

これは私には正しいように思えますが、HTML5 Doctor<section>は、メイン/プライマリコンテンツラッパーとして使用すべきではないと述べています。

また、この例を使用する場合、メインコンテンツ（すべての投稿が表示されるインデックスページなど）に自然な見出しがない場合は、と交換<section id="content>しますか？<div id="content">

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>
<section id="content">
    <header id="title">
        <h1>Category: foo</h1>
        <p>Some content</p>
    </header>
    <article>
        <h1>Blog post #1</h1>
        <p>Some content</p>
    </article>
    <article>
        <h1>Blog post #2</h1>
        <p>Some content</p>
    </article>
</section>
4

3 に答える 3

1

これはあなたを助けるかもしれません：http：//visitmix.com/writings/article-vs-section-weve-finally-gone-mad

あなたが望むように見えます

<section id="content">
    <h1>Category: foo</h1>
    <p>Some content</p>
  <article>
    <h1>Blog post #1</h1>
    <p>Some content</p>
  </article>
  <article>
    <h1>Blog post #2</h1>
    <p>Some content</p>
  </article>
</section>
于 2012-05-08T18:14:29.380 に答える
1

昔ながらの方法でh1-h6タグを使用してみてください。

<h1>My awesome website!</h1>

<section> 

    <h2>Category: foo</h2>
    <p>Some content</p>

    <article>
        <h3>Blog post #1</h3>
        <p>Some content</p>
    </article>

   <article>
       <h3>Blog post #2</h3>
       <p>Some content</p>
   </article>
</section>

<section>  
    <h2>Category: bar</h2>
    <p>some content</p>

    <article>
        <h3>Blog post #3</h3>
        <p>Some content</p>
    </article>

    <article>
       <h3>Blog post #4</h3>
       <p>Some content</p>
    </article>
</section>

これは、を含むHTML5Doctor独自の例に似ています。<section><article>

<h2>技術的には、タグと<h3>タグをに置き換えることができ<h1>ます。これも同様に有効です。h1-h6を使用すると、古いユーザーエージェント（特にスクリーンリーダー）との下位互換性を維持できるという利点があります。

于 2012-05-08T21:02:11.533 に答える
0

@Patrick McElhaney が行ったことと同様に、ページをマークアップしSECTIONます。カテゴリごとに 1 つあります。サブコンテンツ要素のグループ化を可能にするために、「コンテンツ」という名前の別のラッパーを追加しました。これは元のレイアウトを反映しています。

<header id="header">
    <h1>My awesome website!</h1>
    <!-- Primary navigation and such -->
</header>

<section id="content">
    <section class="category" id="catFoo">
        <hgroup id="title">
            <h2>Category: Foo</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Foo1</h3>
            <p>Some content</p>
        </article>
        <article>
            <h3>Blog post #Foo2</h3>
            <p>Some content</p>
        </article>
    </section>

    <section class="category" id="catBar">
        <hgroup id="title">
            <h2>Category: Bar</h2>
            <p>Category Description</p>
        </hgroup>
        <article>
            <h3>Blog post #Bar1</h3>
            <p>Some content</p>
        </article>
    </section>
</section>
于 2012-05-08T21:20:43.520 に答える