HTML 5のベストプラクティス。section/header/aside/article要素

Question

HTML5に関する十分な情報がWeb上（そしてスタックオーバーフロー上）にありますが、今は「ベストプラクティス」に興味があります。 section/headers/articleのようなタグは新しく、誰がこれらのタグをいつ、どこで使用すべきかについて意見が異なります。それで、あなたは以下のレイアウトとコードについてどう思いますか？

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行目sectionname__それともdivname__ですか？

8行目。各sectionname__はheadername__で始まります。

23行目。これはdivname__ですか？それともsectionname__でなければなりませんか。

24行目。左右の列をdivname__で分割します。

25行目articlename__タグの正しい場所は？

26行目。h1-タグをheadername __-タグに入れる必要がありますか？

内容はメインの記事とは関係がないので、これはsectionname__ではなくasidename__と判断しました。

44行目。H2がheadername__なし

53行目。sectionname__なしのheadername__

63行目。すべての（関連のない）ニュース項目を含む部門

64行目。h2のheadername__

65行目。うーん、divname__またはsectionname__？または、このdivname__を削除し、articlename __-タグのみを使用してください。

行105。フッター:-)

Nathan J. Brauer · Accepted Answer

実際には、ヘッダー/フッターに関してはあなたはまったく正しいです。これは主要なHTML5タグのそれぞれがどのように使われることができるかについてのいくつかの基本的な情報です（私は一番下にリンクされた完全なソースを読むことを提案します）：

section - テーマ別に関連するコンテンツをグループ化するために使用されます。 div要素のように聞こえますが、そうではありません。 divには意味的な意味はありません。すべてのdivをsection要素に置き換える前に、常に自分自身に尋ねてください。「すべてのコンテンツは関連していますか。」

aside - 接線方向に関連するコンテンツに使用されます。一部のコンテンツがメインコンテンツの左右に表示されるからといって、aside要素を使用するのに十分な理由ではありません。メインコンテンツの意味を損なうことなく、脇にあるコンテンツを削除できるかどうかを確認してください。プルクォートは接線方向に関連するコンテンツの例です。

header - header要素と一般に認められているheader（またはマストヘッド）の使用法との間には重大な違いがあります。通常、ページには1つのヘッダーまたは「マストヘッド」しかありません。 HTML 5では、好きなだけ持つことができます。この仕様では、これを「入門用またはナビゲーション用のエイドのグループ」と定義しています。あなたはあなたのサイトのどのセクションでもヘッダを使うことができます。実際、あなたはおそらくあなたのセクションの大部分でヘッダーを使うべきです。この仕様では、section要素を「コンテンツのテーマ別グループ化、通常は見出し付き」として説明しています。

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

footer - 位置の説明のように聞こえますが、そうではありません。フッタ要素は、それを含む要素についての情報を含みます：誰がそれを書いたのか、著作権、関連コンテンツへのリンクなど。

出所： http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

さらに、これはarticleに関する説明ですが、上記のソースにはありません。

article - 独立した自己完結型のコンテンツを指定する要素に使用されます。記事はそれ自体で意味があるはずです。すべてのdivをarticle要素に置き換える前に、常に自分自身に尋ねてください。「それを他のWebサイトから独立して読むことは可能ですか。」

Robert Siemer · Answer

残念ながら、これまでに与えられた回答（最も投票されたものを含む）は、「公正な」常識、明白な間違い、またはせいぜい混乱のいずれかです。 重要なキーワードなし¹ ポップアップ！

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

ここで説明したhtml要素の役割を理解するには、それらの一部がドキュメントをセクション分けしていることを知っておく必要があります。アウトラインを作成するために、すべてのhtmlドキュメントを HTML5アウトラインアルゴリズムに従ってセクション化 することができます—⁠または⁠—目次（TOC ）。アウトラインは一般に表示されません（最近）が、作成者は、結果のアウトラインが自分の意図を反映するようにhtmlを使用する必要があります。

exactlyこれらの要素とnothing elseでセクションを作成できます：

（明示的な）サブセクションの作成
- <section>セクション
- <article>セクション
- <nav>セクション
- <aside>セクション
兄弟セクションまたはサブセクションの作成
- <h*>を使用した未指定タイプのセクション^² （すべてこれを行うわけではありません。以下を参照）
現在の明示的な（サブ）セクションをレベルアップする

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

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

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

<body>を含むドキュメント自体
<td>を持つテーブルセル
<blockquote>
<details>、<dialog>、<fieldset>、および<figure>
nothingelse

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は、<article>でラップすることもできます
- それはいくつかの「完全な」ものであり、一連の類似したものの一部ではありません
<section>の<article>sは本の章のようなものです
<article>の<section>は、ボリューム（シリーズ内）の詩のようなものです

<header>、<footer>、および<main>はどのように適合しますか？

彼らはセクショニングにゼロの影響を持っています
<header>および<footer>
- eachおよびeveryセクションのゾーンをマークできます
- セクション内でも数回使用できます
- このセクションの主要部分と区別するために
- 著者の好みによってのみ制限されます
- <header>
  - このセクションのタイトル/名前をマークすることがあります
  - このセクションのロゴを含めることができます
  - セクションの上部または上部にいる必要はありません
- <footer>
  - このセクションのクレジット/著者をマークすることがあります
  - セクションの一番上に来ることができます
  - <header>を超えることもできます
<main>
- 一度だけ許可
- トップレベルセクションの主要部分（つまり、ドキュメント、<body>）をマークします
- サブセクション自体には、メイン部分のマークアップがありません
- <main>はドキュメントの一部のサブセクションで「隠す」こともできますが、ドキュメントの<header>および<footer>はできません（そのマークアップはそのサブセクションのヘッダー/フッターをマークします）
  - <article>セクションでは許可されていません³
- 「本物」とドキュメントの非ヘッダー、非フッター、非メインコンテンツを区別するのに役立ちます。

^{¹ 頭に浮かぶのは、アウトライン、アルゴリズム、暗黙的なセクショニング}
^{² <h*>、<h1>、<h2>、<h3>、<h4>および<h5>の省略形として<h6>を使用します}
^{³ <main>または<aside>では<nav>も許可されていませんが、それは驚くことではありません。 –有効：<main>は、（ネストされた）降順の<section>セクションでのみ非表示にするか、トップレベル、つまり<body>に表示できます}

cilerler · Answer

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>

このリストの別の記事のより多くの情報を見つけることができます。

Justin · Answer

私は HTML5の構造化に関するW3ウィキページを読むことをお勧めします：

<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></article> <article></article> <article></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>

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

<div>はどこにあるのですか？

それで、私たちのページで使うべきこれらのすべての素晴らしい新しい要素で、謙虚な<div>の日数は確かに数えられますか？いいえ。実際、<div>はまだ完全に有効な用途があります。コンテンツの領域をグループ化するのに適した他の要素が他にない場合は、これを使用する必要があります。これは、スタイルまたは視覚的な目的でコンテンツをグループ化するために純粋に要素を使用する場合によくあります。一般的な例としては、<div>を使用してページ上のすべてのコンテンツを折り返してから、CSSを使用してすべてのコンテンツをブラウザウィンドウの中央に配置するか、特定の背景画像をコンテンツ全体に適用することがあります。

Robert Siemer · Answer

[ 「主な回答」の説明 ]

行7.セクションWebサイト全体を囲みますか？または、div？のみ

どちらでもない。スタイリング：<body>を使用します。既に存在します。セクショニング/セマンティクスの場合：私の例のHTMLで詳述されているようにその効果は有用性に反しています。既にラップされたコンテンツへの余分なラッパーは改善されませんが、ノイズが発生します。

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

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

行23.これはdivですか？または、これはsection？でなければなりません

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

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

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

いいえ、なぜですか？

行25。articleタグの正しい場所？

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

行26.h1）タグをheader-tagに入れる必要がありますか？

いいえ。単独の<h*>要素は、おそらく<header>に入る必要はありません（ただし、必要に応じて）、これから行われることの見出しであることはすでに明らかです。 –たとえば、<header>にもキャッチフレーズ（<p>でマーク）が含まれていれば意味があります。

43行目。内容は主要な記事とは関係がないため、これはセクションではなくaside。

<aside>は周囲のコンテンツと「接線方向に関連する」必要があるという誤解です。重要なのは、コンテンツが「接線的関連」のみであるか、まったくない場合は<aside>を使用することです！

それにもかかわらず、<aside>が適切な選択であることを除けば、<article>は<section>よりも優れている可能性があります。「ホットアイテム」と「新しいアイテム」は、本。全体の2つの部分ではなく、何かの代替ソートのように、それらの1つに完全に移動できます。

行44.H2）なしheader

素晴らしいです。

行53.section）なしheader

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

行63.Div（すべての（関連しない）ニュース項目を含む）

<article>または<aside>の方が良いかもしれません。

行64。headerwithh2

すでに議論した。

行65。うーん、divまたはsection？または、このdivを削除し、article-tagのみを使用します

まさに！ <div>を削除します。

行105.Footer：-）

非常に合理的です。

Robert Siemer · Answer

によると私の「主な」答えの中の説明問題の文書はアウトラインに従ってマークアップされるべきです。

次の2つの表で私は示しています：

元のHTMLとその概要
意図されたアウトラインとそれをしているHTML

original html (shortened) _{<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>} original html relevant for outline _{<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>} resulting outline 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>

possible intended outline 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 modified 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>``} resulting outline 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には意図したアウトラインよりずっと良い方法オリジナル。

Covi · Answer

主な過ち：あなたは文書全体に「divitis」があります。
なぜこれ？

<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階層を使用します。body> section> header> h1、body> section> header> h2

さらに、... 63行目：なぜヘッダーがh2をラップするのですか？ヘッダ内にこれ以上要素を含めない場合は、ただ1つのh2を使用してください。
覚えておいてください、あなたの構造は文書を様式化することではなく、自己説明的な文書を作成することです。

これを残りの文書にも適用してください。がんばろう ;）

Matt Browne · Answer

Articleタグにitem_1、item_2などのIDが付いていないのはなぜですか。このような：

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

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

また、26行目の質問に関しては、<header>タグは必須ではないと思われますが、 "main-left" divにあるため、省略することもできます。記事のメインリストにある場合は、一貫性を保つために<header>タグを含めることをお勧めします。

MeanEYE · Answer

Sectionはドキュメント内のセクションをラップするためだけに使用されるべきです（章などのように）
header tag付き：いいえ。ヘッダータグはページヘッダーのラッパーを表し、H1、H2などと混同しないでください。
どのdiv？：D
はい
W3Cスクールより：

タグは外部コンテンツを定義します。外部コンテンツは、外部プロバイダからのニュース記事、ウェブログ（ブログ）からのテキスト、フォーラムからのテキスト、または外部ソースからのその他のコンテンツです。
いいえ、ヘッダータグの用途は異なります。 H1、H2などは、最も重要な文書タイトルH1を表します。

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

Ivan · Answer

これが私の仕事の例です。

enter image description here

Юрий Светлов · Answer

<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

pandita · Answer

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

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

しかし…… ここは@Fezのおかげでそれについてのいい記事です。

私の最初の返答は、

W3の仕様は次のように構成されています。

4.3.4セクション

4.3.4.1 body要素

4.3.4.2 section要素

4.3.4.3 nav要素

4.3.4.4 article要素

…….

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

feeela · Answer

これは正しいですか。またはこれはセクションでなければなりませんか。

どちらにも - その目的のためのmainタグはありません。これはページごとに一度だけ許され、メインコンテンツのラッパーとして使われるべきです（サイドバーやサイト全体のヘッダとは対照的に）。

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

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

conordarcy · Answer

私はあなたがニュース記事の要約（67、80、93行目）のタグを使うべきだとは思わない。あなたはsectionを使うことも、それを囲むdivを持つこともできます。

記事はそれ自身で立つことができ、それでも意味をなさない、または完成している必要があります。その不完全または単なる抜粋として、それは記事になることはできません、それ以上のセクションです。

「もっと読む」をクリックすると、次のページが表示されます。

Flicks Gorger · Answer

私はこの質問をより正確に明確にしたい、私が間違っているなら私を訂正しなさい

1.Wallは "section"タグの下にあります。これはページとは別のものであることを示します。

2.すべての投稿は "article"タグの下に来ます。

3. "section"タグの下にある単一の投稿があります。

3.これには "heading"タグを使用できる "X user post this"という見出しがあります。

4.投稿の中に、3つのセクションがあります1つは画像/テキスト、コメント共有ボタン、コメントボックスです。

5.コメント欄には記事タグを使用できます。

alejnavab · Answer

Nathan's answer によると、これは完全に理にかなっています（赤とオレンジの部分では、おそらくdivの および/または headerとfooterを使用できます）。