HTML5ベストプラクティス。セクション/ヘッダー/脇にある/記事要素

StackOverflow https://stackoverflow.com/questions/4781077

  •  23-10-2019
  •  | 
  •  

質問

Web（およびStackoverflowでも）にはHTML5に関する十分な情報がありますが、今では「ベストプラクティス」に興味があります。セクション/ヘッダー/記事などのタグは新しく、誰もがこれらのタグをいつ/どこで使用するかについて異なる意見を持っています。では、次のレイアウトとコードについてどう思いますか？

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

7行目。 section ウェブサイト全体の周りに？またはaのみ div?

ライン8。各 section から始めます header?

23行目です。これです div 右？またはこれがaでなければなりません section?

行24.左/右の列を分割します div.

25行目 article 鬼ごっこ？

26行目。あなたを置く必要がありますか h1-intag header-鬼ごっこ？

43行目。コンテンツはメイン記事とは関係がないので、これは section そして、ではありません aside.

44行目。H2なし header

53行目。 section それなし header

63行目。

64行目。 header H2で

65行目。うーん、 div また section？またはこれを削除します div とのみを使用します article-鬼ごっこ

105行目。フッター:-)

役に立ちましたか？

解決

実際、ヘッダー/フッターに関しては、あなたは非常に正しいです。主要なHTML5タグのそれぞれがどのように使用できるか/使用する方法に関するいくつかの基本情報を次に示します（下部にリンクされた完全なソースを読むことをお勧めします）：

セクション - テーマに関連したコンテンツをグループ化するために使用されます。 Div要素のように聞こえますが、そうではありません。 Divには意味的な意味がありません。すべてのDivをセクション要素に置き換える前に、常に「すべてのコンテンツは関連していますか？」

さておき - 接線に関連するコンテンツに使用されます。メインコンテンツの一部のコンテンツが左または右に表示されるからといって、ARDATENTELENTELENTを使用するのに十分な理由ではありません。メインコンテンツの意味を減らすことなく、ARTAS内のコンテンツを削除できるかどうかを自問してください。プルコートは、接線に関連するコンテンツの例です。

ヘッダ - ヘッダー要素と一般的な受け入れられたヘッダー（またはマストヘッド）の使用には重要な違いがあります。通常、ページにはヘッダーまたは「マストヘッド」が1つしかありません。 HTML5では、好きなだけ持っていることができます。スペックは、それを「入門援助またはナビゲーションエイズのグループ」と定義しています。サイトの任意のセクションでヘッダーを使用できます。実際、ほとんどのセクション内でヘッダーを使用する必要があります。スペックは、セクション要素を「通常は見出しのあるコンテンツのテーマのグループ化」と表現しています。

nav - 主要なナビゲーション情報を対象としています。グループ化されたリンクのグループは、NAV要素を使用する十分な理由ではありません。一方、サイト全体のナビゲーションは、NAV要素に属します。

フッター - その位置の説明のように聞こえますが、そうではありません。フッター要素には、その含有要素に関する情報が含まれています。誰がそれを書いたか、著作権、関連するコンテンツへのリンクなど。通常、ドキュメント全体に1つのフッターがありますが、HTML5ではセクション内にフッターを持つことができます。

ソース: http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not- as-olvious-as-sound/

さらに、説明があります article, 、上記のソースにはありません：

論文 - 独立した自己完結型コンテンツを指定する要素に使用します。記事はそれ自体で意味をなすべきです。すべてのDivを記事要素に置き換える前に、常に「Webサイトの残りの部分とは独立して読むことは可能ですか？」

他のヒント

残念ながら、これまでに与えられた回答（最も投票されたものを含む）は、「ただの」常識、単純な間違ったもの、またはせいぜい混乱を招くいずれかです。 なし 重要なキーワードの1 現れる！

私は3つの答えを書きました：

  1. この説明（ここから始めて）。
  2. OPの質問に対する具体的な回答。
  3. 詳細なHTMLを改善しました。

ここで説明するHTML要素の役割を理解するには、それらのいくつかがドキュメントをセクションにすることを知っている必要があります。それぞれのHTMLドキュメントはあります に従ってセクション HTML5アウトラインアルゴリズム コンテンツのテーブル（TOC）を作成する目的で。アウトラインは一般に目に見えません（最近）が、著者は、結果のアウトラインが意図を反映するようにHTMLを使用する必要があります。

でセクションを作成できます まさに これらの要素と 他に何もありません:

  • （明示的な）サブセクションの作成
    • <section> セクション
    • <article> セクション
    • <nav> セクション
    • <aside> セクション
  • 兄弟セクションまたはサブセクションの作成
    • 不特定のタイプのセクション <h*>2 （すべてがこれを行うわけではありません、以下を参照）
  • 現在の明示的な（sub）セクションを近くにレベルアップする

セクションに名前を付けることができます：

  • <h*> 作成されたセクション名前自体
  • <section|article|nav|aside> セクションには最初の名前が付けられます <h*> ある場合
    • これらは <h*> セクション自体を作成しないのは唯一のものです

セクションにはもう1つあります。次のコンテキスト（つまり、要素）が「アウトライン境界」を作成します。彼らに含まれるセクションは何でも彼らにとってはプライベートです：

  • ドキュメント自体 <body>
  • テーブルセル <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, 、 と <figure>
  • なし そうしないと

title

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









これは2つの質問を提起します。

違いは何ですか <article> と <section>?

  • どちらもできます：
    • お互いにネストされます
    • 別のコンテキストまたはネストレベルで別の概念を取る
  • <section>sは本の章のようなものです
    • 彼らは通常兄弟を持っています（多分別の文書にありますか？）
    • 一緒に彼らは本の章のように共通の何かを持っています
  • 1人の著者、1人 <article>, 、少なくとも最低レベルで
    • 標準例：単一のブログコメント
    • ブログエントリ自体も良い例です
    • ブログエントリ <article> そしてそのコメント <article>sはanで包むこともできます <article>
    • それはいくつかの「完全な」ものであり、一連の類似の一部ではありません
  • <section>s <article> 本の章のようなものです
  • <article>s <section> ボリュームの詩のようなものです（シリーズ内）

どうしますか <header>, <footer> と <main> 適合する？

  • 彼らは持っている ゼロの影響 セクションで
  • <header> と <footer>
    • 彼らはあなたがのゾーンをマークすることを可能にします それぞれ セクション
    • セクション内でも、数回持つことができます
    • メイン部分と区別します このセクションで
    • 著者の好みによってのみ制限されています
    • <header>
      • このセクションのタイトル/名前をマークする場合があります
      • このセクションのロゴが含まれる場合があります
      • セクションの上部または上部にいる必要はありません
    • <footer>
      • このセクションのクレジット/著者をマークする場合があります
      • セクションの上部に来ることができます
      • 上にあることもあります <header>
  • <main>
    • 一度だけ許可されています
    • トップレベルのセクションの主要部分をマークします（つまり、ドキュメント、 <body> あれは）
    • サブセクション自体には、主要な部分にマークアップがありません
    • <main> ドキュメントのいくつかのサブセクションで「非表示」することもできますが、ドキュメントは <header> と <footer> できません（そのマークアップは、そのサブセクションのヘッダー/フッターをマークします）
      • しかし、それは許可されていません <article> セクション3
    • あなたの場合に理にかなっている場合、「本物」をドキュメントの非ヘッダー、非フッター、非メインコンテンツと区別するのに役立ちます...

1 思い浮かぶ：概要、アルゴリズム、暗黙のセクション
2 私が使う <h*> 速記として <h1>, <h2>, <h3>, <h4>, <h5> と <h6>
3 どちらもそうではありません <main> 許可されます <aside> また <nav>, 、しかし、それは驚くことではありません。 - 事実上： <main> （ネストされた）下降のみを隠すことができます <section> セクションまたは上位レベルで表示されます <body>

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

そのドキュメントのマークアップは、次のようになります。

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

より多くの情報を見つけることができます リストのこの記事は離れています.

読むことをお勧めします html5の構造に関するW3 wikiページ:

<header> サイトのヘッダーコンテンツを含めるために使用されます。 <footer>サイトのフッターコンテンツが含まれています。 <nav> ナビゲーションメニュー、またはページのその他のナビゲーション機能が含まれています。

<article> 作成するスタンドアロンのコンテンツが含まれています
たとえば、ニュース項目など、RSSアイテムとしてシンジケートされているかどうかを感知します。

<section> 異なる記事を異なるものにグループ化するために使用されます
目的または主題、または単一の記事のさまざまなセクションを定義する。

<aside> 周囲のメインコンテンツに関連するコンテンツのブロックを定義しますが、流れの中心ではありません。

それらは含まれます 画像 ここで掃除したこと：

html5

コードでは、これはそうです：

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

HTML5要素のいくつかをさらに詳しく説明しましょう。

<section>

<section> 要素は、機能性の異なる異なる領域または主題領域を含むか、記事やストーリーを異なるセクションに分割するためです。したがって、この場合、「sidebar1」には、「RSSに購読する」や「ストアからの音楽を購入する」など、サイトのすべてのページに持続するさまざまな便利なリンクが含まれています。 「Main」には、ブログ投稿であるこのページのメインコンテンツが含まれています。サイトの他のページでは、このコンテンツが変更されます。それはかなり一般的な要素ですが、それでも平野よりもはるかに意味的な意味を持っています <div>.

<article>

<article> に関係している <section>, 、しかし、明らかに異なります。一方 <section> コンテンツまたは機能の異なるセクションをグループ化するためのものです。 <article> 個々のブログ投稿、ビデオ、画像、ニュース項目など、関連する個々のスタンドアロンのコンテンツを含むためです。このように考えてみてください - コンテンツのアイテムが多数ある場合、それぞれが自分で読むのに適していて、RSSフィードの個別のアイテムとしてシンジケートするのは理にかなっています。 <article> それらをマークするのに適しています。私たちの例では、 <section id="main"> ブログエントリが含まれています。各ブログエントリは、RSSフィード内のアイテムとしてシンジケートするのに適しており、文脈から外れて読むと意味があります。 <article>彼らにぴったりです：

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

単純なハァッ？ただし、記事内にセクションをネストすることもできます。たとえば、これらのブログ投稿のそれぞれに明確なセクションの一貫した構造がある場合、記事の中にセクションを入力することもできます。それは次のように見えるかもしれません：

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> と <footer>

すでに上で述べたように、 <header> と <footer> 要素は、それぞれヘッダーとフッターのコンテンツをラップすることです。私たちの特定の例では <header> 要素にはロゴイメージが含まれています <footer> 要素には著作権通知が含まれていますが、必要に応じてもっと手の込んだコンテンツを追加できます。また、各ページに複数のヘッダーとフッターを使用できることに注意してください。 <header> と <footer> それぞれ内にネストされた要素 <article>, 、その場合、それらはその特定の記事に適用するだけです。上記の例に追加：

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

<nav> 要素は、ナビゲーションリンクまたは他のコンストラクト（検索フォームなど）をマークするためのもので、現在のサイトのさまざまなページ、または現在のページの異なる領域に移動します。スポンサーリンクなどの他のリンクはカウントしません。もちろん、その中に見出しやその他の構造化要素を含めることができます <nav>, 、しかし、それは強制的ではありません。

<aside>

あなたは私たちが使用したことに気づいたかもしれません <aside> 2番目のサイドバーをマークアップする要素：最新のギグと連絡先の詳細を含むもの。これは完全に適切です <aside> メインフローに関連する情報をマークするためのためのものですが、直接適合しないでください。そして、この場合の主なコンテンツはすべてバンドについてです！その他の良い選択 <aside> ブログ投稿の著者、バンド伝記、またはアルバムを購入するためのリンクを備えたバンドディスコグラフィーに関する情報になります。

それはどこに去りますか <div>?

だから、私たちのページで使用するこれらすべての素晴らしい新しい要素、謙虚な日々 <div> 確かに番号が付けられていますか？番号。実際、 <div>まだ完全に有効な使用があります。コンテンツの領域をグループ化するために利用できる他の適切な要素がない場合に使用する必要があります。これは、スタイリング/視覚的な目的でコンテンツをグループ化するために純粋に要素を使用している場合にしばしばあります。一般的な例は、aを使用することです <div> ページ上のすべてのコンテンツをラップし、CSSを使用してブラウザウィンドウのすべてのコンテンツを中心にするか、特定の背景画像をコンテンツ全体に適用します。

[私の「主な答え」の説明]

7行目。 セクション ウェブサイト全体の周りに？またはaのみ div?

ない。スタイリングには：を使用します <body>, 、それはすでにそこにあります。セクション/セマンティクスの場合： 私の例HTMLで詳述されています その効果は有用性に反しています。すでにラップされたコンテンツへの追加のラッパーは改善ではなく、ノイズです。


行8。各セクションはヘッダーから始まりますか？

いいえ、通常、「ヘッダー」として要約されるコンテンツを置く場所が著者の選択です。そして、そのヘッダーコンテンツが余分なマーキングなしではっきりと認識できる場合、それは完全にとどまることができます <header>. 。これも著者の選択です。


23行目です。これです div 右？またはこれがaでなければなりません セクション?

<div> おそらく間違っています。それは意図に依存します：それはスタイリングのためだけであり、それは正しいかもしれません。それがセマンティックの目的であるならば、それは間違っています：それは <article> 代わりは 私の他の答えに示されているように. <article> また、スタイリングとセクションの両方を組み合わせた場合にも正しいです。

<section> 本の章のように、この前後に同様のセクションがないため、ここで間違っているように見えます。 （これが目的です <section>).


行24.左/右の列を分割します div.

いいえ、なぜですか？


25行目 論文 鬼ごっこ？

はい、理にかなっています。


26行目。あなたを置く必要がありますか H1-intag ヘッダ-鬼ごっこ？

独りぼっちじゃない <h*> 要素はおそらくaに行く必要はありません <header> （しかし、あなたが望むなら、そうすることができます）それは、それがこれからのことの見出しであることはすでに明らかです。 - それが理にかなっているでしょう <header> また、キャッチフレーズを網羅しています（マークされています <p>）、 例えば。


43行目。コンテンツはメイン記事とは関係がないので、これは セクション そして、ではありません さておき.

それは誤解です <aside> 「接線方向に」でなければなりません 関連している"周りのコンテンツに。ポイントは次のとおりです <aside> コンテンツのみが「接線 関連性があるかどうか！

それにもかかわらず、それとは別に <aside> まともな選択であること、 <article> まだより良いかもしれません <section> 「ホットアイテム」と「新しいアイテム」は、本の2つの章のように読まれるべきではありません。あなたはそれらのいずれかを完璧に行うことができますが、他の人は、全体の2つの部分のようなものではなく、何かの代替のソートのようなものではありません。


44行目。 H2 それなし ヘッダ

素晴らしいです。


53行目。 セクション それなし ヘッダ

まあ、noはあります <header>, 、 しかし <h2>- ヘッディングは、このセクションのどの部分がヘッダーであるかをかなり明確にします。


63行目。 div すべての（関係のない）ニュース項目があります

<article> また <aside> より良いかもしれません。


64行目。 ヘッダ と H2

すでに議論されています。


65行目。うーん、 div また セクション？またはこれを削除します div とのみを使用します 論文-鬼ごっこ

丁度！を削除します <div>.


105行目。 フッター :-)

非常に合理的です。

によると 私の「メイン」の答えの説明 問題の文書は、概要に従ってマークアップする必要があります。

次の2つの表では、次のように表示されます。

  • 元のHTMLとそのアウトライン
  • 意図された可能性のあるアウトラインとそれを行うHTML

オリジナルのHTML（短縮）
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

アウトラインに関連する元のHTML
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































結果のアウトライン
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


オリジナルのアウトラインはです
意図されたものではないことは間違いなく。

































































次の表は、改善されたバージョンの私の提案を示しています。次のマークアップを使用します。

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

可能な意図されたアウトライン
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































変更されたHTML
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

結果のアウトライン
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


修正されたHTMLはそれを反映しています
意図したアウトライン方法よりも優れています
オリジナル。
































































主な間違い：あなたは文書全体に「分裂」を持っています。
なぜこれですか？

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

それ以外の：

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

このヘッダーを様式化するには、CSS階層を使用します：ボディ>セクション>ヘッダー> H1、ボディ>セクション>ヘッダー> H2

さらに、... 63行目：なぜヘッダーはH2をラップしますか??ヘッダー内にこれ以上の要素が含まれていない場合は、単一のH2を使用してください。
あなたの構造はドキュメントを様式化することではなく、自発的なドキュメントを構築することであることに留意してください。

これを残りのドキュメントに適用します。幸運を ;）

Item_1、Item_2などを記事にタグ付けしてみませんか？このような：

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

ラッパーDivを追加する必要はないようです。 ID値にはHTMLでセマンティックな意味がないので、これを行うことは完全に有効だと思います - あなたは最初の記事がそうであると言っているわけではありません いつも item_1、現在のページのコンテキスト内のitem_1だけ。 IDは、コンテキストに依存しない意味を持つ必要はありません。

また、26行目のあなたの質問に関しては、私はu003Cheader>タグはそこに必要であり、「メイン左」のdivでそれ自体があるので、あなたはそれを省略できると思います。それが記事のメインリストにあった場合、あなたはu003Cheader>一貫性のためだけにタグを付けます。

  1. セクションは、ドキュメント内にセクションをラップするためにのみ使用する必要があります（章など）
  2. と ヘッダ タグ：いいえ。ヘッダータグは、ページヘッダーのラッパーを表し、H1、H2などと混同しないでください。
  3. どのdiv？ ：d
  4. はい
  5. W3C学校から：

    タグは外部コンテンツを定義します。外部コンテンツは、外部プロバイダーからのニュースアーティクル、Webログ（ブログ）からのテキスト、フォーラムのテキスト、または外部ソースからのその他のコンテンツである可能性があります。

  6. いいえ、ヘッダータグには異なる用途があります。 H1、H2など。ドキュメントタイトルH1が最も重要であることを表します

あなたが言及していたことを推測するのはちょっと難しいので、私は他のものに答えませんでした。さらに質問がある場合は、お知らせください。

これが私が働いている私の例です

enter image description here

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/tr/2014/rec-html5-20141028/sections.html#the-nav-element

ニュース項目の概要（67、80、93行目）でタグを使用する必要があるとは思いません。セクションを使用するか、囲いDivを使用することもできます。

記事は、それ自体で立って、それでも理にかなっているか、完全になることができる必要があります。その不完全または単なる抽出物として、それは記事になることはできません、それはよりセクションです。

「続きを読む」をクリックすると、後続のページは

編集：残念ながら、私は自分自身を修正する必要があります。

以下を参照してください https://stackoverflow.com/a/1793566/2488942 例を含むW3仕様へのリンクの場合（以前に見たものとは異なります）。

しかしその後....ここ @fezのおかげで、それについての素晴らしい記事です。

私の元の応答は次のとおりです。

W3仕様の構造化方法：

4.3.4セクション

4.3.4.1ボディ要素

4.3.4.2セクション要素

4.3.4.3 NAV要素

4.3.4.4記事要素

....

私にそれを提案します section より高いレベルです article. 。で述べたように この答え section グループに関連するコンテンツグループ。記事内のコンテンツは私の意見では、とにかくテーマ的に関連しているので、少なくとも私にとっては、それはそれを示唆しています section より高いレベルのグループと比較して article.

私はそれがこのように使用されることを意図していると思います：

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

またはニュースウェブサイトの場合：

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014

„行23.これは正しいですか？またはこれはセクションでなければなりませんか？」

どちらも - あります main その目的のためのタグは、ページごとに1回しか許可されておらず、メインコンテンツのラッパーとして使用する必要があります（サイドバーまたはサイト全体のヘッダーとは対照的です）。

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

この質問をもっと明確にしたいのですが、私が間違っている場合は修正してください。

1.Wallは「セクション」タグの下にあります。これは、ページとは別のものであることを示します。

2.すべての投稿には「記事」タグの下にあります。

3.次に、「セクション」タグに付属する単一の投稿があります。

3.「xユーザー投稿」という見出しに「見出し」タグを使用できます。

4.その後、内部には、3つのセクション1があります。画像/テキスト、株式コメントボタン、コメントボックスがあります。

5.コメントボックスの場合、記事タグを使用できます。

によると ネイサンの答え, 、これは完全に理にかなっています（赤とオレンジ色の部品の場合、多分あなたは使用できます div's および/または header と footer それぞれ）：

enter image description here

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top