HTML 5とCSSスタイルの理解

Question

私は自分のウェブページのdivを酷使することに慣れています。しかし、私はより良くなり、HTML 5タグを使用しようとしています。

<header></header> 
<nav></nav> 
<section></section> 
<footer></footer> 

その後、私はページのコンテンツの大半があるセクションのスタイルを設定します：

一般的に私のHTML5コードは次のようになります。

section { 
    width:960px; 
    height:960px; 
    background-image:url("images/bg-img"); 
} 

異なるスタイリングでこのコードに別のセクションを追加したいとします。私はそれを意味的に正しいものにするためにこれをやりますか？

私がやっていることは<section id="Content2"></section>ですか？

あなたの考えは何ですか？

Answer 1

あなたはHTML5のために利用可能な要素を確認したい場合：https://www.w3schools.com/html/html5_new_elements.asp

ここでは、特定の要素をターゲットにする方法の例をいくつか示します。 CSSは信じられないほど強力で、すぐに教えるためにw3 schoolsをチェックすることをお勧めします。

クラスとIDのどちらを使用するかを決めるときに、その要素が1つの種類の要素であるか、複数の要素があるかどうかを検討してください。そのような要素がもっとあれば、それをクラスにしてください。それがそのタイプの唯一のものであれば、それにIDを付けることは大丈夫です。いくつかの要素IDを与えるのではなく、クラスだけを使うこと（特定性に関係している）についての議論がありますが、正しい方法はありません。

section.tree { 
 
    width: 50%; 
 
    background: red; 
 
} 
 

 
section.wall { 
 
    width: 50%; 
 
    background: orange; 
 
} 
 

 
section.tree .acorn { 
 
    width: 50%; 
 
    background: yellow; 
 
} 
 

 
section.library>p { 
 
    background: pink; 
 
} 
 

 
.first { 
 
    font-size: 23pt; 
 
}

<section class="tree"> 
 
    This is the tree section 
 
</section> 
 

 
<section class="wall"> 
 
    This is the wall section 
 
</section> 
 

 
<section class="tree"> 
 
    <section class="acorn"> 
 
    This is the acorn section 
 
    </section> 
 
</section> 
 

 
<section class="library"> 
 
    <p>A paragraph</p> 
 
    <p>Another paragraph</p> 
 
    <p>The last paragraph</p> 
 
</section> 
 

 
<section class="tree library"> 
 
    <p class='first'>A paragraph</p> 
 
    <p>Another paragraph</p> 
 
    <p>The last paragraph</p> 
 
</section>