style - w3c html indent




HTML5のベストプラクティス。 section/header/aside/article要素 (11)

HTML5についての十分な情報がウェブ上にありますが(そして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だけ?

sectionheader始まりますか?

このdiv正しいのですか? またはこれをsectionにする必要がありsectionか?

div左/右の列を分割します。

articleタグの正しい場所?

あなたのh1タグをheaderタグに入れる必要がありますか?

内容は主要記事とは無関係なので、これはsectionであり、 asideからではないと判断しました。

headerないH2

行53. headerないsection

63行目。すべての(関連性のない)ニュース項目のDiv

行64. h2のheader

Hmm、 divまたはsection ? またはこのdivを削除し、 articleタグのみを使用しarticle

フッター:-)


  1. セクションは、ドキュメント内のセクションをラップするためにのみ使用してください(チャプタなどのように)
  2. ヘッダタグ付き:NO。 ヘッダータグはページヘッダーのラッパーを表し、H1、H2などと混同してはいけません。
  3. どのdiv? :D
  4. はい
  5. W3C学校から:

    タグは外部コンテンツを定義します。 外部コンテンツは、外部プロバイダのニュース記事、Webログ(ブログ)のテキスト、フォーラムのテキスト、または外部ソースのその他のコンテンツにすることができます。

  6. いいえ、ヘッダータグの使い方は異なります。 H1、H2等は文書タイトルH1が最も重要である

私が他の人に答えなかったのは、あなたが何を言及しているのかを推測するのが一種難しいからです。 より多くの質問がある場合は、私に知らせてください。


"23行目。このdivは正しいのですか? またはこれをセクションにする必要がありますか? "

いずれの場合も、その目的のためのmainタグはありません。これは、ページごとに1回しか許可されず、メインコンテンツのラッパーとして使用する必要があります(サイドバーまたはサイト全体のヘッダーとは異なります)。

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

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


残念ながら、これまでの回答(最も投票された人を含む)は、「ちょっと」の常識、間違ったプレーンまたは間違いがあります。 重要なキーワードの1つがポップアップ!

私は3つの答えを書いた:

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

ここで説明するhtml要素の役割を理解するには、その一部がドキュメントをセクションすることを知る必要があります。 各HTML文書は、アウトラインまたは目次(TOC)を作成する目的でHTML5アウトライン・アルゴリズムに従ってセクション化することができます。 アウトラインは一般的には見えませんが(最近)、作者は結果のアウトラインに意図が反映されるようにHTMLを使用してください。

これらの要素だけでセクションを作成できます。

  • サブセクションを作成する(明示的に)
    • <section>セクション
    • <article>セクション
    • <nav>セクション
    • <aside>セクション
  • 兄弟セクションまたはサブセクションを作成する
    • <h*> 2の指定されていない型のセクション(すべてではない、以下を参照)
  • 現在の明示的(サブ)セクションをレベルアップする

セクション名は次のとおりです。

  • <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>は本の章と似ています
    • 彼らは通常、兄弟姉妹を持っています(多分別の文書にありますか?)
    • 彼らは共通して、本の章のように
  • 1人の著者、1つの<article> 、少なくとも最低レベル
    • 標準例:単一のブログコメント
    • ブログエントリ自体も良い例です
    • ブログエントリ<article>とそのコメント<article><article>タグでラップすることができます
    • 一連の類似の部分ではなく、「完全な」ものです
  • <section> <article> <section><section>は、本の章と似ています
  • <article><section>シリーズ<section>内の詩のようなものです(シリーズ内)

<header><footer><main>はどのようにしてフィットするのですか?

  • 彼らはセクショニングに影響を与えません
  • <header>および<footer>
    • 彼らはあなたがセクションのゾーンをマークすることができます
    • あなたがそれらを数回持つことができるセクション内であっても
    • このセクションの主要部と区別するために
    • 作者の好みによってのみ制限される
    • <header>
      • このセクションのタイトル/名前をマークすることができます
      • このセクションのロゴを含む場合があります
      • セクションの上部または上部にある必要はありません
    • <footer>
      • このセクションのクレジット/著者をマークすることがあります
      • セクションの上部に来ることができます
      • <header>
  • <main>
    • 一度しか許可されない
    • トップレベルセクションの主要部分(つまり、ドキュメント、 <body> )をマークします。
    • サブセクション自体には主要部分のマークアップはありません
    • ドキュメントの<header><footer>は(そのマークアップはそのサブセクションのヘッダー/フッターをマークする)ことはできませんが、 <main>はドキュメントのいくつかのサブセクションで「隠す」ことさえできます
      • <article>セクション3では許可されていません
    • あなたのケースで意味をなさないならば、ドキュメントのノンヘッダー、フッタ以外の非メインコンテンツから「本物のもの」を区別するのに役立ちます...

1からmindへ:アウトライン、アルゴリズム、暗黙のセクショニング
2 <h1><h2><h3><h4><h5><h6>略語として<h*>
3 <main><aside>または<nav>で許可されていませんが、それは驚くことではありません。 - 効果: <main>は、(入れ子にされた)降下する<section>セクションに隠れるか、最上位に現れる<body>


ここに私が働いている私の例があります


主な間違い:文書全体に「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を使用してください。
あなたの構造はドキュメントを定型化するのではなく、自己説明するドキュメントを構築することです。

これを残りの文書に適用します。 がんばろう ;)


実際には、ヘッダー/フッターについてはかなり正しいです。 主要HTML5タグの使用方法に関する基本的な情報があります(一番下にリンクされている全文を読むことをお勧めします):

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

aside - 接線関連のコンテンツに使用されます。 主なコンテンツの左または右に表示されるコンテンツがあるため、脇の要素を使用する理由が十分ではありません。 メインコンテンツの意味を損なうことなく、脇の下のコンテンツを削除できるかどうか自問してください。 プルコントスは接線関連のコンテンツの例です。

ヘッダー - ヘッダー要素とヘッダー(またはマストヘッド)の一般的に容認された使用法との間には重大な違いがあります。 ページには通常、ヘッダーまたは「マストヘッド」が1つしかありません。 HTML5では、必要な数だけHTML5を作成することができます。 この仕様は、それを「入門用またはナビゲーション用の支援のグループ」と定義しています。 サイトの任意のセクションにヘッダーを使用できます。 実際には、ほとんどのセクションでヘッダを使うべきでしょう。 この仕様では、セクション要素を「コンテンツのテーマ別グループ化、通常見出し付き」と表現しています。

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

フッター - ポジションの説明のように聞こえるが、ポジションの説明はない。 フッター要素には、誰がそれを書いたか、著作権、関連コンテンツへのリンクなど、その要素を含む要素に関する情報が含まれています。通常、文書全体に1つのフッターがありますが、HTML5ではセクション内にフッターもあります。

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

さらに、 article説明は、上記のソースにはありません。

article - 独立した独立したコンテンツを指定する要素に使用されます。 記事はそれ自身で理にかなっているはずです。 すべてのdivを記事要素に置き換える前に、常に自分自身に質問してください。「それは他のウェブサイトとは独立して読むことができますか?」


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

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

<article>スタンドアロンのコンテンツが含まれています
ニュースアイテムなどのRSSアイテムとしてシンジケートされているかどうかを判断します。

<section>異なる記事を別々にグループ化する
単一の記事の異なるセクションを定義することができます。

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

ここには私がここで掃除したイメージが含まれています:

コードでは、次のようになります。

<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>要素と<footer>要素の目的は、ヘッダーとフッターの内容をそれぞれラップすることです。 特定の例では、 <header>要素にロゴイメージが含まれており、 <footer>要素には著作権表示が含まれていますが、望むのであれば、より精巧なコンテンツを追加できます。 また、各ページに複数のヘッダーとフッターを含めることができます。また、ここで説明したヘッダーとフッターのトップレベルヘッダーも含めることができます。各<article>内に<header><footer>その場合、彼らはその特定の記事にちょうど適用されるでしょう。 上記の例に加えて:

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

<nav>

<nav>要素は、現在のサイトの別のページ、または現在のページの別の領域に移動するナビゲーションリンクやその他の構造(たとえば、検索フォーム)をマークアップするための要素です。 スポンサーリンクなどの他のリンクはカウントされません。 もちろん、見出しやその他の構造要素を<nav>中に含めることはできますが、それは必須ではありません。

<aside>

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

それはどこから<div>を離れるのでしょうか?

だからこそ、このような新しい要素が私たちのページで使用されると、謙虚な<div>時代は確実に数えられますか? NO。 実際、 <div>まだ完全に有効な使い方をしています。 コンテンツ領域をグループ化するのに適した他の要素がない場合に使用する必要があります。これは、単純に要素を使用してスタイリング/ビジュアルの目的でコンテンツをグループ化するときによく使用されます。 一般的な例は、 <div>を使用してページのすべてのコンテンツをラップし、次にCSSを使用してブラウザウィンドウにすべてのコンテンツを配置するか、特定の背景イメージをコンテンツ全体に適用することです。


私はあなたがニュース項目の要約(ライン67,80,93)にタグを使用すべきだとは思わない。 あなたはセクションを使うこともできますし、囲むdivを持つこともできます。

記事はそれ自身の上に立つことができ、まだ意味をなさないか、または完全であることができる必要があります。 その不完全なものまたは単に抽出物として、それは記事ではありません、そのより多くのセクション。

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


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

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

しかし、それでは、@Fezに感謝します。

私の元の応答は:

w3仕様がどのように構成されているか:

4.3.4セクション

4.3.4.1 body要素

4.3.4.2セクション要素

4.3.4.3 nav要素

4.3.4.4 article要素

....

sectionarticleよりもレベルが高いことを私に示唆している。 この回答 sectionように、主題関連のコンテンツをグループ化します。 記事内のコンテンツは私の意見ではテーマに関係しているため、少なくとも私にとっては、 article比べて上位の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

記事タグにitem_1、item_2などのIDを持たないのはなぜですか? このような:

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

ラッパーdivを追加する必要はないようです。 ID値には意味がありませんので、最初の記事は常に item_1、現在のページのコンテキスト内のitem_1だけであると言っているわけではありません。 IDは、コンテキストとは独立した意味を持つ必要はありません。

また、26行目の質問については、<header>タグが必要であるとは思っていません。メイン左のdivにあるので、省略することもできます。 記事のメインリストにある場合は、一貫性のために<header>タグを含めることができます。


<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





article