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

546

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

ウェブサイトのレイアウト

  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ウェブサイト全体？それともdiv？

ライン8それぞれsectionで開始header？

23行目これでdivいいですか？またはこれはsection？

24行目div。左/右の列を。

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

26行目。h1-tagを-tagに入れる必要はありますheaderか？

43行目。内容は本編とは関係ないのでsection、ではなくaと判断しましたaside。

44行目。H2なし header

ライン53 sectionなしheader

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

64行目header、h2あり

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

105行目。フッター:-)

html header article

— バスファンドルスト
ソース

456bereastreet.com/archive/201103/…–

— Christophe Roussy

486

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

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

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

header – header要素と一般的に認められているheader（またはマストヘッド）の使用法の間には決定的な違いがあります。通常、ページにはヘッダーまたは「マストヘッド」が1つだけあります。HTML5では、必要な数だけ作成できます。仕様では、これを「導入またはナビゲーション支援のグループ」と定義しています。ヘッダーは、サイトの任意のセクションで使用できます。実際、ほとんどのセクションでヘッダーを使用する必要があります。仕様では、section要素を「コンテンツのテーマ別グループ、通常は見出し付き」として説明しています。

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

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

出典：https : //clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

さらに、article上記のソースにはないに関する説明は次のとおりです。

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

— ネイサンJB
ソース

68

この回答がどのようにして多くの票を獲得したかは、私にとってなぞなぞです。<article>要素については語らず、言及された要素を対比することも、グループ化することもありません。答えは「ベストプラクティス」を提供せず、OPの明確な質問のいずれにも答えません！

— Robert Siemer 2014年

2

@RobertSiemer私にとって、あなたのコメントが24の賛成票を獲得し、質問が6の反対票を獲得したのも謎です

— Veger

@RobertSiemer cuzそれは素晴らしく見えます、あなたはどう思いますか？あなたのコメントをチェックして、次の答えでそれを確認するまで、それが悪いことだとは思いもしませんでした。

— Det

238

残念ながら、これまでに出された回答（最も投票されたものを含む）は、「単なる」常識であり、明らかに間違っているか、よくても混乱しています。重要なキーワードは^1つもポップアップしません。

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

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

正確にセクションを作成できますこれらの要素と他には何も：

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

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

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

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

ドキュメント自体 <body>
表のセル <td>
<blockquote>
<details>、 <dialog>、<fieldset>、および<figure>
他には何もない

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は本の章のようなものです
- 彼らには通常兄弟がいます（おそらく別のドキュメントにありますか？）
- 一緒に、彼らは本の章のような共通点を持っています
一人の著者、一人 <article>、少なくとも最低レベル
- 標準的な例：単一のブログコメント
- ブログエントリ自体も良い例です
- ブログエントリ<article>とそのコメント<article>も、<article>
- それはいくつかの「完全な」ものであり、同様のシリーズの一部ではありません
<section>のsは<article>本の章のようなものです
<article>のsは、<section>（シリーズ内の）ボリュームの詩のようなものです

どのように行う<header>、<footer>と<main>に収まりますか？

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

^{¹心のが来る：アウトライン、アルゴリズム、暗黙の区分けに}
^{² Iを使用する<h*>ための省略形として<h1>、<h2>、<h3>、<h4>、<h5>および<h6>}
^{³もない<main>では許可されていない<aside>か<nav>、それは驚きです。–実際に<main>は、（ネストされた）下降<section>セクションでのみ非表示にするか、最上位に表示できます。<body>}

— ロバート・シーマー
ソース

33

答えは詩そのものです。私のお気に入りの部分は次のとおりです。-私が見たsections in an article are like chapters in a book, articles in a section are like poems in a volume中で最高で最も直感的なarticlevs section説明！

— Sergey Lukin、2015

1

これは、いくつかの箇条書きに要約されている定型文なしの広範な知識です。共有してくれてありがとう！時々、SOで最良の答えは、受け入れられたものでも最高の評価でもありません。

3

決まり文句ですが、「これは受け入れるべき答えです！」脚注とすべて！ありがとう！

— ユージーン

Eugeneとft orは正しいです。これに投票する間、不完全で間違った回答に投票できることを覚えておいてください。これは著者にとって不快なことではなく、最良の回答が最初に表示されるようにするためのコストです。選択した回答に対するロバートのコメントに加えて、ウェブの他の場所からのコンテンツを盗用した（不完全な）ため、私も好きではありません。

— IAmNaN 2017年

この非常に詳細な回答と多くのことを明確にしました、ありがとう！

— Alaeddine

112

div要素は、header、nav、section、article、aside、footerという新しい要素に置き換えることができます。

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

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

詳細については、この記事のA List Apartを参照してください。

— 書記官
ソース

25

このボイラープレート構造は、このページのスペースに値するものではありません。1）上記のHTML要素はいずれも、ドキュメント内のどの位置にも関連付けられていません。2）<header>および<footer>がドキュメントレベルの要素であることを誤って意味します。3）<section>が<article> -childとしてのみ意図されていることを誤って意味します。@DanDascalescu

— Robert Siemer

2

もっと@RobertSiemerに同意できませんでした。これは依然としてHTML5要素に関する最も一般的な誤解の1つであり、愛するマークアップ言語のセマンティックハンディキャップになりつつあります。

— カノ

@RobertSiemer日時：2）は、できない<header>と<footer>内だけでなく、ドキュメントレベルの要素である<section|article|nav|aside>セクション？

— Flimm 2017

1

@Flimm、はい、できます。私のポイントは次のとおりでした：答えは間違っていません-それはあまり答えません。

— Robert Siemer 2017

63

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に登録」や「ストアから音楽を購入」など、サイトのすべてのページに保持されるさまざまな便利なリンクが含まれています。「メイン」には、ブログ投稿であるこのページのメインコンテンツが含まれます。サイトの他のページでは、このコンテンツは変更されます。これはかなり一般的な要素ですが、プレーンなoldよりも意味的な意味があり<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>

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

どこに行くの<div>？

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

— ジャスティン
ソース

1

しかし、ネストされたセクションについては、使用する<section class="summary">よりも使用する方が理にかなっています<section id="summary">か？1つのページに複数の記事がある場合、後者の方法では、同じページにIDの重複が発生します。正しい？

— JP Lew

はい、そのインスタンスでは代わりにクラスを使用するでしょう。

— Justin

1

あなたが言及したすべてのタグが「メイン」にラップされ、その後「ボディ」にラップされるべきではありませんか？

— フランシスコアギレラ

1

mainタグは、追加するとよいでしょう。どこに置くかは、ページのユニークなコンテンツとは何かに基づいて決定されます。この例では、ちょうど中心に配置すると思いますsection。続きを読む：w3.org/TR/2012/WD-html-main-element-20121217「ドキュメントのメインコンテンツセクションには、そのドキュメントに固有のコンテンツが含まれ、サイトなどの一連のドキュメントにわたって繰り返されるコンテンツは除外されますナビゲーションリンク、著作権情報、サイトのロゴとバナー、検索フォーム。」

— ジャスティン

MDNのドキュメントと同様に、あいまいなままです

— oldboy

23

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

ライン7。ウェブサイト全体のセクション？それともdivだけですか？

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

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

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

23行目。このdivは正しいですか？またはこれはセクションでなければなりませんか？

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

<section>本の章のように、このセクションの前後に同様のセクションがないため、ここでは正しくありません。（これがの目的です<section>）。

ライン24の分割は、左/右の列をしてDIV。

いいえ。なぜですか。

25行目。記事タグの正しい場所は？

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

26行目。ヘッダー -tagにh1 -tagを挿入する必要がありますか？

いいえ。これから来るものの見出しであることはすでに明らかであるため、単一の<h*>要素はおそらく<header>（必要に応じて可能です）に入れる必要はありません。– たとえば<header>、タグライン（でマークされている<p>）も含まれている場合、それは理にかなっています。

43行目。本文は本編とは関係ないので、これはセクションではなく脇であると判断しました。

が周りのコンテンツに<aside>「接線的に関連している」必要があるというのは誤解です。重要なのは<aside>、コンテンツが「接線のみ」の場合は関連している」か、まったく関連してい。

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

行44。ヘッダーのないH2

素晴らしいです。

53行目。ヘッダーなしのセクション

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

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

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

ライン64 ヘッダとH2

すでに議論されました。

65行目。うーん、div、またはsection？または、このdivを削除して、記事 -tag のみを使用してください

丁度！を取り外します<div>。

105行目。フッター :-)

非常に合理的です。

— ロバート・シーマー
ソース

1つの回答を3つの不完全なものに分割しても、役に立ちません。

— Christian Strempfer 2017

6

@ChristianStrempfer多くの人々がOPの特定の質問に対する特定の回答（この回答）を読むためにここに来るのではなく、目前のトピックについての詳細（私の主な回答）を読むために、それは実際に役に立ちます。– 1つの大きなtldr回答では、メインの回答だけで得た票を獲得することさえできないと思います。- 何を指示してるんですか？

— Robert Siemer 2017

それらを1つの答えにまとめることをお勧めします。コレクションの票は、それらを分割するための良い議論ではありません。特に 3番目の回答は、主な回答を参照しているため、単独で使用することはできません。

— Christian Strempfer 2017

@ChristianStrempferそれは私の味には長すぎるでしょう。–しかし、テーブルの改善に取り組んでいます...

— Robert Siemer

20

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

次の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) The outline of the original is definitively not what was intended.

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

~~<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) The modified HTML reflects the intended outline way better than the original.

— ロバート・シーマー
ソース

優れた詳細な回答をありがとう、それは非常に啓発的です。このトピックについてもっと学びたいので、奇妙に思われるいくつかの選択肢について説明していただければ幸いです。個別コメントとして投稿します。

— 16年

1. 脇のヘッダー> div [id = logo]は私には関係ないようです。現在、それはヘッダーですが、意味的にはヘッダーではありません。言語divはおそらくナビゲーションの一種であり、ロゴはおそらくサイト全体へのヘッダーのようなものですが、ページへのヘッダーではありません。

— 16年

2. <記事id = main>は、実際には説明用にすぎません。内部には何も含まれていません。（<記事ID = main-right>についても同じことが言えますが、そこでは（ "news and hot"として）はるかに防御可能です。）最悪の場合、divまたはmainを使用することをお勧めします。

— 16年

3. <記事id = news-items>は、私が脇に置く典型的なケースとして私には思えます。それはメインの記事とは何の関係もありません、それは単なるニュースフィードです。また、ニュースには個別の「小さな」記事が含まれていることに同意します。

— 16年

1

あなたの提案を編集することを検討してください。あなたの「理論的な」答えは非常によく書かれていますが、ほとんどの初心者はコード例を見るだけであり、理論的な部分に沿っていないため、彼らは本当に混乱するかもしれません。

— 16年

17

主な間違い：ドキュメント全体に「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をラップする理由？ヘッダー内にこれ以上要素を含めない場合は、単一のh2を使用してください。
覚えておいてください、あなたの構造は文書を様式化することではなく、自己説明的な文書を構築することです。

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

— コビ
ソース

4

@superUntitled <hgroup> はHTML5の一部ではなくなりました

— bradley.ayers 2013

role = "banner"はヘッダー全体ではなく、h1自体にある必要がありますか？このように、HTMLのグロブではなく、スクリーンリーダーがアナウンスする単一のテキストを指します。

— 謎

11

ロゴと言語にh1とh2を使用しても意味がありません。右側の小さな小さな言語ボタンは、このページで2番目に重要なコンテンツ/情報になるはずです。そして、h1の内側にロゴを配置すると、検索ボットはすべてのページのメインコンテンツが同じであることがわかります（かなり退屈だと思います）。h1とh2の使用については、@ MeanEYEの回答も参照してください。それ以外に、IDは非セマンティックです。セマンティクスが必要な場合は、RDFaを使用してください。あなたの方法は、CSSセレクタがちょうど遅くなります：developers.google.com/speed/docs/best-practices/...

— F Lekschas

10

記事タグ自体にitem_1、item_2などのIDがないのはなぜですか？このような：

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

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

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

— マットブラウン
ソース

2

私は元の例に従って、不要なラッパーdivなしで同じことを実行する方法を示していました。IDはさまざまな理由で存在する可能性があります... 1つには、それらを指すアンカーリンクが存在する可能性があります。

— Matt Browne、

5

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

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

他の質問には答えませんでした。あなたが何を言っているのか推測するのが難しいからです。他にご不明な点がありましたらお知らせください。

— MeanEYE
ソース

1

ご回答ありがとうございます！ポイント3; 行番号が正しくありませんでした。ポイント3ではなく、line_23である必要があります。私の投稿の行の変更も参照してください。

— Bas van Dorst、2011年

はい、サイトで同じことをしています。通常、DIVはサイト構造を作成するために使用されます。HTML5にヘッダー、フッター、および類似のタグを導入するのは、物事を少し読みやすくするためだけです。それらはDIVと同じように動作します。

— MeanEYE、2011年

3

ソースを確認してください。w3c学校のサイトは、article必ずしも外部ソースからのものであることを指定していません。w3schools.com/html5/tag_article.asp

— chharvey 2011

ええと、私は記事が外部ソースから使用されることであるとさえ思っていませんでした。これは古い返事をやめて、私はそれが何であったのかほとんど思い出せません。:)

— MeanEYE 2012年

＃1に同意します。これらのSECTION要素はASIDEとしてより意味があると思います。

— アンディ

3

これが私が働く私の例です

ここに画像の説明を入力してください

— イワン
ソース

2

<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

— ЮрийСветлов
ソース

1

ニュースサマリー（67、80、93行目）ではタグを使用するべきではないと思います。あなたはセクションを使用するか、またはそれを囲むdivを持つことができます。

記事はそれ自体で立つことができ、意味があり、完全である必要があります。その不完全または単なる抜粋であるため、記事にすることはできません。

「もっと読む」をクリックすると、次のページで

— 共謀
ソース

1

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

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

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

私の元の応答は：

w3仕様の構成方法：

4.3.4セクション

4.3.4.1 body要素

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

またはニュースWebサイトの場合：

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

— パンディタ
ソース

1

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

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

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

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

— フィーラ
ソース

0

私はこの質問をより正確に明確にしたいのですが、私が間違っている場合は訂正してくださいFacebook Wallの例を見てみましょう

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

2.すべての投稿は「記事」タグの下に来る。

3.次に、「section」タグの下にある単一の投稿があります。

3.「X user post this」という見出しがあるので、「heading」タグを使用できます。

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

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

— フリックゴージャー
ソース

0

ネイサンの回答によれば、これは完全に理にかなっています（赤とオレンジの部分については、多分divのandおよび/または header andをfooterそれぞれ使用できます）。

— アレハンドロ・ナヴァ
ソース