<article>または<section>タグの混同。どちらを使いますか？

Question

<article>と<section>タグに関するページのページを読んでいるにもかかわらず、私は自分のサイトにそれらをどのように適用するのか本当に理解していません。

私はページの最後に関連製品を含む製品ページを持っています。その後、私はいくつかの他のブログを読んで、多分私は<article>タグで<section>タグを置き換える必要があることを私に発生した、

<section> 
    <header><h1>Product title</h1><header> 
    <img src="image.jpg"/> 
    <p>Description</p> 
    <p>Price</p> 
    <p><a href="...">Order</a></p> 
</section> 

<section> 
    <header><h1>Related products</h1></header> 
    <article> 
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price 
    </article> 
    <article> 
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price 
    </article> 
    <article> 
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price 
    </article> 
</section> 

しかし：まず、私はこのような何かをやって考えました。

これは正しい理由は何ですか？ありがとう。

Answer 1

項

部要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。ここでは、セクションはコンテンツの主題グループです。各セクションのテーマは、通常、セクション要素の子として見出し（h1〜h6要素）を含めることによって識別される必要があります。

条記事要素は、文書、ページ、アプリケーション、またはサイト内の完全な、または自己完結型、構図を表し、それは、原則として、配布または再利用可能な独立している

、例えばシンジケーションでこれは、フォーラムの投稿、雑誌や新聞の記事、ブログの投稿、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、または他の独立したコンテンツのアイテムです。

記事要素がネストされている場合、内側の記事要素は、原則として外側の記事の内容に関連する記事を表します。例えば、ユーザが提出したコメントを受け入れるサイト上のブログエントリは、コメントを、ブログエントリの記事要素内に入れ子になった記事要素として表すことができる。

ストレートその例でW3 http://www.w3.org/html/wg/drafts/html/master/sections.html

---

から、それらはarticle内section内にネストarticleを有します。私はあなたが間違いなく正しくそれを使用していると言うでしょう。 HTML5規格で

<article> 
<header></header> 
<section> 
    <h1></h1> 
    <article></article> 
    <article></article> 
</section> 
</article> 

Answer 2

、<"article">要素は、関連する要素の完全な、自己完結型のブロックを定義します。

<"section">要素は、関連要素のブロックとして定義されます。

要素をネストする方法を定義するために定義を使用できますか？いいえ、できません！

<"article">要素を含む<"section">要素と<"sections">要素を含む<"article">要素を含むHTMLページがインターネット上にあります。

要素には<section>要素、<article>要素には<"article">要素を含むページがあります。右から

：http://www.w3schools.com/html/html5_semantic_elements.asp

Answer 3

<article>は、それがすべてのコンテンツが剥ぎ取られ、周囲いても、意味を成さなければならないコンテンツの独立した作品です。 <section>は、divタグと非常によく似ており、主にコンテンツ構造に使用される汎用コンテナのほうが多いです。だから、右のコードは次のようにする必要があります：あなたはあなたの必要性のための右のHTML5セマンティック要素を選んで混乱した場合

はまた、HTML 5医者さんは偉大 Flowchartを得た

<article> 
    <header><h1>Product title</h1><header> 
    <img src="image.jpg"/> 
    <p>Description</p> 
    <p>Price</p> 
    <p><a href="...">Order</a></p> 
</article> 

<article> 
    <header><h1>Related products</h1></header> 
    <section> 
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price 
    </section> 
    <section> 
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price 
    </section> 
    <section> 
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price 
    </section> 
</article> 

。あなたはそれを試して、それが役立つかどうかを見ることができます。