【 職業訓練 】 "Webクリエータ科" DAY-10 タグの復習　FirE♯501

HTMLのタグは時代の流れとともに新しいものが追加されています。

正直、ちゃんと理解してなかったタグが
職業訓練で出てきたので復習です！

■ セクショニングタグ

<section>タグの使い方について、整理します。

どの部分をマークアップするのか明確でないことから、正直わかりにくいです。

・考え方

<main>,<aside>,<article>
などのようにわけられないが、
分けておきたい要素をまとめるのが<section>

このように考えておくとどこをマークアップするのか整理しやすくなります。

他のセクショニングタグのどれでもないけど、ひとつのグループである箇所をマークアップする感覚です。

さらに、複数の<article>をまとめるためにつかうこともあります。

グループ化するほうがわかりやすいと思われる
ところを<section>でくくるという使い方もあります。

また、<section>が他のタグに置き換えられないのかを確認することで、他のタグとの役割の確認をすることができます。

・divタグとの違い

<section>タグをわざわざ使わなくても<div>でいいんじゃないかと思うこともあります。

しかし、<div>は、意味のない箱です。

レイアウト上、必要だからひとまとまりにするときに使います。

<section>タグは、意味がないかたまりではありません。
そもそも、セクションとは、文書などの、意味のひとまとまりのことです。

<figure>タグ

簡単解釈で言うと、画像を囲むタグになりますが、
セットで使用する<figcaption>が重要な役割を果たします。

・使い方

<figure>
　<img src="ooo" >

　<figcaption>
　　画像の説明文、画像のキーワード
　</figcaption>

</figure>

このように、<figure>タグの中で
画像の説明として<figcaption>タグを使います。

画像検索などのSEO対策になりますから
意味のある画像には設置しましょう。

飾りの画像などには<figure>を使わいません。
つまり、 <figcaption>を追加する必要があるかどうかで、<figure>を使うかどうか判断します。

【まとめ】

タグについて復習しました。

絶対に使う必要があるタグではない分、
ちゃんと理解していないことがあるなぁと反省です！

独学の穴を埋められる！
これも職業訓練のいいところかもしれません。