8

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

<section>しかし、その後、他のブログをいくつか読んで、タグをタグに置き換える必要があるのではないかと思いました<article>。

どちらが正しいのですか?なぜですか? ありがとう。

4

3 に答える 3

3

<article>周囲のコンテンツがすべて取り除かれていても意味のある独立したコンテンツです。<section>div タグによく似た一般的なコンテナーであり、主にコンテンツの構造化に使用されます。したがって、正しいコードは次のようになります。

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

また、必要に応じて適切な HTML5 セマンティック要素を選択するのに混乱した場合は、HTML 5 医師が優れたフローチャートを用意しています。試してみて、役立つかどうかを確認できます。

于 2016-06-15T19:21:25.417 に答える
0

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

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

定義を使用して、要素をネストする方法を決定できますか? いいえ、できません！

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

<"section">要素を含む<section>要素、および<article>要素を含む要素を含むページもあります<"article">。

右から: http://www.w3schools.com/html/html5_semantic_elements.asp

于 2015-08-12T05:51:08.087 に答える