セクションvs記事HTML5

201

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

これらはいずれも、ブログの投稿や「ドキュメント」という言葉そのものではないため、どの要素を適用するのかがわかりにくいのです。

乾杯

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

とにかくあなたの答えをありがとう、それはかなり主観的なようです。

html  markup 
— ジェームズ・ヘイ
ソース
5
それは本当に重要ではありません。あなたにとって意味のあるものを使ってください。個人的に私はsections を使用します
— Ilia Choly
@illia choly：私はあなたに同意します、本当の正誤はありません。
— Shirgill Farhan、2015
1
— randominstanceOfLivingThing

回答:

143

で構造化HTML5についてW3のwikiページ、それは言います：

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

そして、私がクリーンアップした画像を表示します：

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

また、<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>
— ジャスティン
ソース
13
さらに、<main>を使用して、ヘッダーとフッターの間の要素をラップできます（画像の青いブロック）。<figure>は、記事またはセクション内の画像をラップします。
— ロジックユニット
2
よくやった。これは受け入れられる答えになるはずです。追加する必要があるlogic-unitに同意しますmain。
— チャックルバット
1
記事のセクションで写真を更新する必要があります。
— K-SOの毒性が高まっています。
記事とセクションの間のこの戦争は混乱のせいで1つになると思います。しかし、Justin Imは、セクションがドキュメントの一部に適用されるため（セクションで示したように）、記事がドキュメント内（およびそのセクション内）の独立した独立したコンテンツである場合、記事に対するセクションの使用を100％オンボードで実行します。意味的には、「セクション」という用語は、とにかく古いdivセクションの代わりとしてより意味があります。よくやった！
— Stokely 2017
1
<section>よりも具体的なものが必要な場合は、<article>内で<header>および<footer>を使用することもできます
— Ric
130

「セクション」のそれぞれを（呼び出すときに）<article>タグで囲み、記事内のエントリを<section>タグで囲みます。

HTML5の仕様では、（節）の言葉：

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

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

注：要素のコンテンツをシンジケートすることが理にかなっている場合、作成者はsection要素の代わりにarticle要素を使用することをお勧めします。

そして記事のために

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

OPで「セクション」と呼んでいるものは、記事の定義に適合していると思います。独立して配布または再利用できることです。

更新：HTML 5.1の最新のエディタードラフトarticleでのいくつかのマイナーテキストの変更（斜体での変更）：

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

また、およそ公共HTMLのメーリングリストでの議論articleでは1月と年2月 2013。

— Steveax
ソース
17
ウェブで検索しているときに、を読んでいる法的文書に出くわしましたArticle 1, Section 2, Clause 3。それが論理を思い出すのに役立つことを願っています。
— commonpike 2013年
3
ある程度はそうではありませんが、状況に応じて切り替えることもできると思います。仕様の説明を読むarticleと、が「ウィジェット」として機能する場合は逆になるはずです。section：「テーマ別グループ」と「ドキュメントのセクション」。article：「自己完結型」および「ウィジェット」。codepen.io/anon/pen/iDEwfの
— daleyjem
2
なぜ彼らは単一のフォーラム投稿が記事を作ると言うのですか？フォーラムの投稿は、残りのスレッドimhoなしでは完了しません。
— masterxilo 2014年
7
これは逆です。W3C sectionは、それがコンテンツのテーマ別のグループ化でarticleあり、スタンドアロンの要素（つまり、テーマにグループ化できる）であることを明確に述べています。新聞のように考えてください。各セクションには多くの記事があります。たとえば、エンターテイメントセクションの映画レビュー記事。
— チャックルバット
3
ここで@Chuckに同意します。私の本では、この答えは完全に逆です。ジャスティンの答えはもっとふさわしいです。しかし、まあ、仕様には解釈の余地がたくさん残っていると思います。これが悪いことか良いことかはわかりません。
— maryisdead
39

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

これが理にかなっているといいのですが。

— MNSR
ソース
5
I'd use <article> for a text block that is totally unrelated to the other blocks on the page.これは2011年に書いたと思いますが、<aside>タグの目的はこれではないでしょうか。
— MyDaftQuestions
19

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

これをサポートするw3cは、article要素を、独立して独立できるコンテンツのセクションとして定義します。ブログの投稿は、コンテンツの貴重で消費可能なアイテムとしてそれ自体で成り立つ可能性があります。ただし、ヘッダーはそうではありません。

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

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

これがSOの同じ質問に対する非常に良い答えです

— マイケル・ジャスパー
ソース
5

セクション

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

論文

  • 独自に意味のある独立したコンテンツがある場合は、これを使用してください。

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

— アナンドシン
ソース
3

セクションは基本的にh1（または他のhタグ）のラッパーであり、これに対応するコンテンツです。article基本的に繰り返さまたは改ページ調整され、ドキュメント内の文書である...あなたの文書の各ブログ記事のような記事であるか、またはドキュメントの各コメントは記事することができます。

— ニック・マニング
ソース
1

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

— アルバート
ソース
0

私の解釈は次のとおりです。YouTubeにはコメントセクションがあり、コメントセクションには複数の記事（この場合はコメント）があります。

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

— userX
ソース
-2

ArticleとSectionはどちらもHTML5のセマンティック要素です。セクションは、ウェブページのブロックレベルの一般的なセクションですが、ウェブページのコンテンツに関連しています。記事もブロックレベルですが、記事はWebページの個々のブログ投稿、コメントを指します。

ArticleとSectionの両方に、見出し要素h2-h6を含める必要があります。

ブログ投稿の場合、記事とセクションには次の構文を使用します。

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>
— アビナッシュ・マルホトラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.