web-dev-qa-db-ja.com

セクションvs記事HTML5

ビデオ、ニュースフィードなどのさまざまな「セクション」で構成されるページがあります。これらをHTML5で表現する方法が少し混乱しています。現在、私はそれらをHTML5 <section>sとして持っていますが、さらに詳しく見ると、より正しいタグは<article>であるように見えます。誰かが私のためにこれにいくらか光を当てることができますか?

これらはどれも、Wordの真の意味でのブログ投稿または「ドキュメント」ではないため、どの要素を適用するかを見るのは少し難しいです。

乾杯

編集:私はarticleタグを使用することを選択しました。これは、「セクション」と思われる無関係な要素のコンテナタグのようです。しかし、実際のタグ名の記事はかなり誤解を招くように思われ、HTML5はWeb applicationsをより考慮して開発されたと言っていますが、多くのタグはブログ中心/ドキュメントベースであることがわかります。

とにかくあなたの答えに感謝します、それはかなり主観的であるようです。

169
James Hay

<article>タグと記事のエントリの<section>タグで、各「セクション」を(呼び出すときに)ラップする必要があるように思えます。

HTML5仕様 は(セクション)と言います:

Section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでのセクションは、コンテンツのテーマ別グループであり、通常は見出しがあります。 [...]

セクションの例は、章、タブ付きダイアログボックスのさまざまなタブ付きページ、または論文の番号付きセクションです。 Webサイトのホームページは、紹介、ニュース項目、および連絡先情報のセクションに分割できます。

:著者は、要素のコンテンツをシンジケートすることが理にかなっている場合、section要素の代わりにarticle要素を使用することが推奨されます。

記事の場合

Article要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として、独立して配布可能または再利用可能です。シンジケーションで。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはコンテンツの他の独立したアイテムです。

OPで「セクション」と呼ぶものは、独立して配布可能または再利用可能であることがわかるので、記事の定義に当てはまると思います。

更新:HTML 5.1の 最新エディタードラフトでのarticleのマイナーテキストの変更 (斜体の変更):

Article要素は、ドキュメント、ページ、アプリケーション、またはサイトの完全な、または自己完結型の構成を表し、原則として、独立して配布可能または再利用可能です。シンジケーションで。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはコンテンツの他の独立したアイテムです。

また、2013年の 1月 および 2月articleに関するパブリックHTMLメーリングリストに関する議論。

115
steveax

HTML5の構造化に関するW3 wikiページ では、次のように述べています。

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

そして、 画像 を表示し、クリーンアップしました:

enter image description here

また、<article>タグの使用方法についても説明します(上記の同じW3リンクから)。

<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>
115
Justin

ページ上の他のブロックとはまったく関係のないテキストブロックに<article>を使用します。一方、<section>は、互いに関連しているドキュメントを分離する仕切りになります。

今、あなたがあなたのビデオ、ニュースフィードなどに何を持っているのか分かりませんが、ここに例があります(本当の正誤はありません、私はこれらのタグをどのように使用するかのガイドラインです):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

ご覧のとおり、セクションは相互に関連していますが、それらがグループ化されているブロック内にある限り、関連しています。セクションは記事内にある必要があります。ドキュメントの本文に含めることができますが、ドキュメント全体が1つの記事である場合は、本文のセクションを使用します。

例えば.

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

これが理にかなっていることを願っています。

39
jzm

私は、使用される単語の標準的な意味に固執するのが好きです:articleは、まあ、記事に適用されます。ブログの投稿、ドキュメント、ニュース記事をarticlesとして定義します。一方、セクションはレイアウト/ UXアイテムを参照します。サイドバー、ヘッダー、フッターはセクションになります。ただし、これはすべて私自身の個人的な解釈です。ご指摘のとおり、これらの要素の仕様は十分に定義されていません。

これをサポートする w3c は、article要素をコンテンツのセクションとして独自に独立して定義できるように定義します。ブログ投稿は、価値のある消耗品のコンテンツとして単独で使用できます。ただし、ヘッダーはそうではありません。

ここ は、2つの新しい要素を区別しようとする人の狂気についての興味深い記事です。この記事の基本的なポイントは、私も正しいと思いますが、あなたが最もよく感じる要素が実際に含まれているものを実際に表しているものを試して使用することです。

さらに問題なのは、記事とセクションが非常に似ていることです。それらを隔てるのは「自己完結」という言葉だけです。厳格で速いルールがあれば、どの要素を使用するかを決めるのは簡単です。代わりに、それは解釈の問題です。セクション内に複数の記事を持つことができ、セクション内に複数のセクションを持つことができ、セクション内にセクションを入れ子にすることができます。どの要素が特定の状況で最も意味的に適切であるかを決定するのはあなた次第です。

ここ は、SOに関する同じ質問に対する非常に良い答えです

17
Michael Jasper

セクション

  • これを使用して、レイアウトのセクションを定義します。 midleftrightなどです。
  • これには、他の要素との接続という意味があります。簡単に言えば、それは依存です。

記事

  • これは、単独で意味のある独立したコンテンツがある場合に使用します。

  • 記事には独自の完全な意味があります。

5
Anand Singh

セクションは、基本的にh1(または他のhタグ)とこれに対応するコンテンツのラッパーです。 articleは基本的に、ドキュメント内の繰り返しまたはページ付けされたドキュメントです。たとえば、ドキュメントの各ブログ投稿を記事にしたり、ドキュメントの各コメントを記事にしたりできます。

3
Nick Manning

新聞のように考えてください。セクションA-世界のニュース、セクションB-ローカルニュース、セクションC-スポーツ、セクションD-金融など。各セクションには複数の記事があります。 HTML 5でも同様です:セクションは、1つ以上の記事(ストーリーまたはコンテンツピース)を含む可能性のあるページの大部分です。 enter image description here

2
Aamir Kalimi

また、シンジケートされたコンテンツについては、「要素のコンテンツをシンジケートすることが理にかなっている場合、セクション要素の代わりにarticle要素を使用することが推奨されます。」

1
albert

DIV

囲まれている要素が互いに意味的に関連しておらず、一般的な見出しがない場合、divがあなたの男です。

セクション

Section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。このコンテキストでのセクションは、コンテンツのテーマ別グループであり、通常は見出しがあります。

記事

Article要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として、独立して配布可能または再利用可能です。シンジケーションで。

1
Raja Alam

以下のフローチャートは、さまざまなセマンティックHTML5要素の1つを選択するときに役立ちます。 enter image description here

1

私の解釈では、YouTubeにはコメントセクションがあり、コメントセクション内には複数の記事(この場合はコメント)があります。

したがって、セクションは記事を保持するdivコンテナのようなものです。

0
userX