私は私の最近のプロジェクトのセマンティック一つにしたいが、私はちょうど</p> <p>を作成した自分のコードの1についてはよく分からない朝

Question

ハローみんな良い私のコードをセマンティックにしたいまた、私はそのセクションの絵を持っています

私は絵にハイライト部のタグを使用したい

（写真を参照してください）

ここセクションタグを使用することが有効ですか？この部分の

私のコード：

<section class="customer-receipts"> 
    <div class="image-part"> 
     <figure> 
      <img src="h56.jpg"> 
     </figure> 
    </div> 
    <div class="text-part"> 
     <h2>send customers digital receipts</h2> 
     <section class="paper-sec"> 
      <h3>no paper receipts</h3> 
      <p>Eliminate the need to store signed paper receipts</p> 
     </section> 
     <section class="paper-sec"> 
      <h3>searchable transactions</h3> 
      <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
     </section> 
     <section class="paper-sec"> 
      <h3>bra free</h3> 
      <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
     </section> 
     <section class="paper-sec"> 
      <h3>green technology</h3> 
      <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
     </section> 
    </div> 
</section> 

Answer 1

読むあなたがウェブページの特定の部分の詳細を表示したい場合は、このSection tag

節を使用することができます。タイトル、イメージ、またはその他の詳細を記述することで、コードを簡単に維持することができます。

たとえば、ウェブサイトのホームページは、イントロ、アプリ、今後のアプリの3つのセクションに分けられます。

Answer 2

<section>要素を汎用コンテナとして使用しないでください。これは、特にセクションがスタイリング目的のためだけの場合には、<div>が対象です。経験則によれば、の概要にセクションが論理的に現れるはずです。

メインラッパーには<article>を使用してください。

<article class="customer-receipts"> 
 
    <section class="image-part"> 
 
    <figure> 
 
     <img src="h56.jpg"> 
 
    </figure> 
 
    </section> 
 
    <section class="text-part"> 
 
    <h2>send customers digital receipts</h2> 
 
    <div class="paper-sec"> 
 
     <h3>no paper receipts</h3> 
 
     <p>Eliminate the need to store signed paper receipts</p> 
 
    </div> 
 
    <div class="paper-sec"> 
 
     <h3>searchable transactions</h3> 
 
     <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
 
    </div> 
 
    <div class="paper-sec"> 
 
     <h3>bra free</h3> 
 
     <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
 
    </div> 
 
    <div class="paper-sec"> 
 
     <h3>green technology</h3> 
 
     <p>Every transaction you run in saved in the system for the lifetime of your business</p> 
 
    </div> 
 
    </section> 
 
</article>