web-dev-qa-db-ja.com

HTML5セマンティクス-セクションの記事タイトルのH1またはH2

ページの複数の領域でH1タグを使用することは意味的に適切であると考えることができるということは、（Dive into HTML5： http://goo.gl/9zliD の私の章に基づいて）私の理解です特定のコンテンツの最も重要なタイトルを設定する方法。

この方法論を使用していて、「記事」の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>
html5semantic-web
10
Matt

巡礼者はこれを争っているだけではありません。

Jeremy Keithの HTML5 for Web Designers によると、ドキュメントのセマンティックセクショナルタグ内にネストされている限り、ドキュメントの概要を損なわずにドキュメントで複数の<h1>sを使用できます。

EBook（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ページの本からのサンプルコード）

7
Yahel

私は Mark Pilgrim の解釈に同意する傾向があります。記事を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要素で囲む必要はありません。

2
Lèse majesté

ページの記事タイトルは重要ですが、通常、ページのトップレベルの見出しはページのコンテンツを定義します。時にはそれは記事の名前であり、時にはあなたが示すように記事のリストのタイトルです。

<h1>My Very Interesting Articles</h1>

この見出しは、ページ全体を「興味深い記事」と定義しています。次に、各記事がリストされますが、見出しレベルは低くなります。

0
Richard Testani