【スキルハックス】HTMLのまとまりを作るタグを学ぶ

HTMLでまとまりを作るタグに、大きいまとまりを作るタグと小さいまとまりを作るタグがあります。小さい規模であれば、まとまりが必要ないかもしれませんが、大きな規模になっていくとまとまりがある方が分かりやすくなります。

赤枠で囲んだところで、カレーという文字を赤にしたい場合には、目印を付ける必要があります。（※本当に赤にするにはCSSが必要になります。今回は分かりやすくするために赤にする表記にします）

カレーを赤にしたい場合には<p id=”red”></p>でカレーを囲います。

ちなみにカレーとラーメンを赤にしたい場合にはidは使えません。idは重複することができません。

重複する場合にはclassを使うようにします。

複雑になってくると先ほどのidを使って、divタグで”food”というグループとしてまとめて分かりやすくします。divタグはまとまりを作るためのタグになります。

まとまりを付けるためのタグはdivタグとspanタグがあります。divタグは大きなまとまり、spanタグは小さなまとまりになります。divタグはハンバーグ・カレー・ラーメンまでをガバッとまとめています。spanタグはおはよう・こんにちは・こんばんはをそれぞれ小さくまとめています。

そのためdivタグは改行されています。ハンバーグ、カレー、ラーメンをそれぞれ大きなまとまりとしています。

spanタグは小さいまとまりなので、改行されずていません。

今まで学んできた、リンクは改行されていないので小さいまとまり、見出しは改行されているので大きなまとまりになります。