HTMLで画像を表示する際にわざわざ一つずつクラス付けする理由

Question

本日からプログラミングを始めた初心者です。

progateで独学で学んでいて現在HTMLの基礎的な書き方を学んでいます。

本当に初歩的な質問で申し訳ないのですが、画像を表示する際になぜわざわざ画像一つずつにクラス付けをするのでしょうか？
そう思って、自分で画像を表示するクラスを一つでまとめてみたのですがそうするとfloatで左寄せしたところうまく表示されませんでした。

自分なりに調べてみたのですが理解力が乏しくわからなかったので初歩的だと思いますが質問させていただきました。
プログラミングをやっているとクラス付けは最初にここに付けとくべきとわかってくるものなのでしょうか？
それともみなさんも後からクラスを付け加えますか？
また質問本文とは別ですが、padding marginの使いわけについても簡単でいいので教えていただきたいです。
違いはわかるのですがこのときはpadding このときはmarginという使い分けが全くわかりません。すべてpaddingで調整すればいいのでは？と思ってしまいます。。

下記は最初の質問本文のコードです。

正しいコード

<div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> </div>

自分で試したコード

<div class="contents"> <h3 class="section-title">学べるレッスン</h3> 　<div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div>

Comments

[m.ts10806]

コードはマークダウンのcodeにてご提示ください

[m.ts10806]

あと、コードを書く意図は設計や書く人によるので「必ずこうする」という世界共通ルールは存在しません。要件次第です。
Progateの模範解答への疑問ならProgateに問い合わせるしかないです。

[m.ts10806]

＞padding marginの使いわけについても簡単でいいので教えていただきたいです。

全く要件違うので別質問にしてください

[seraxun]

このサイトを利用するのも初めてでご迷惑おかけしました。
回答ありがとうございます。

Answer 1

画像を表示する際になぜわざわざ画像一つずつにクラス付けをするのでしょうか？

提示されたHTMLを見ても、画像にはクラスが設定されていません。contents-itemクラスが設定されているのは、「画像と段落」をグループ化するdiv要素です。

質問者がCSSを提示していないので、「うまく表示されませんでした」がどのような表示になったのかはわかりませんが、「ひとつの画像と段落の組み合わせ」をグループ化した構造と、「複数の画像と段落の組み合わせ」をグループ化した構造では、そりゃ表示は変わるでしょう。

padding marginの使いわけについても簡単でいいので教えて

どちらも隙間の設定ですが、marginはborderの外側、paddingはborderの内側なので、borderを使う場合には明確な違いがあります。
また、背景色を設定するときに、padding(やborderの裏)にはその要素の背景色が付き、marginには付かない(親要素の背景色が付く)という違いもあります。

補足: img要素にはalt属性の指定が必須なので、ちゃんと付けましょう。