HTMLのmainタグとdivタグの違い
「サイトの構成は以下のようにするとソースコードの可読性が上がるよ〜😆
と聴いたけど〜
他のプログラミングのサイトを拝見すると
「mainタグ」を使わず
「divタグ」を使っているサイトが多いな~
mainタグを使用しなくても大丈夫???なのか🤔?・・・
mainタグは1回しか使用できないけどdivは多用できるイメージしかなく、
どのようなときにmainタグやdivタグを使うのか?
いい見分け方?捉え方はあるのかしら?
HTMLにおいて、main タグと div タグは、異なる目的と意味を持ち,どちらを使用するかは状況によって異なる。
![ぽってりフラワー](https://stat100.ameba.jp/blog/ucs/img/char/char3/478.png)
![ぽってりフラワー](https://stat100.ameba.jp/blog/ucs/img/char/char3/478.png)
main タグは、そのコンテンツが文書の主要なコンテンツであることを示すために使用される
通常、ページ内で1回のみ使用されることが推奨される
main タグは、SEO(検索エンジン最適化)やアクセシビリティの向上に役立ちます。
例えば、
スクリーンリーダーがページの主要なコンテンツを識別する際に利用されることがある
↓
つまり😆
スクリーンリーダー(コンピューターの画面読み上げのソフト)がページの上方のナビゲーションメニュー(※例えば「・会社情報」をクリックするとそのページへ移動する。)を読みとばして、
本文(main タブ)を読み上げていくことができるということ?
YES
その通り😄
![OK](https://stat100.ameba.jp/blog/ucs/img/char/char3/119.png)
mainタグを使用することにより、
スクリーンリーダーはそのタグで囲まれた範囲を「主要なコンテンツ」と認識し、ユーザーにとって重要な情報として読み上げることがある
これにより、ナビゲーションメニューなどの冗長な情報をスキップして、本文の内容に直接アクセスすることが可能になる
![乙女のトキメキ](https://stat100.ameba.jp/blog/ucs/img/char/char3/473.png)
![乙女のトキメキ](https://stat100.ameba.jp/blog/ucs/img/char/char3/473.png)
div タグは汎用のコンテナ要素であり、特定の意味を持たず、スタイリングやレイアウトのために使用される。
div タグはページ内で複数回使用することができ、フレキシビリティが高いため、要素のグループ化やスタイリングのために頻繁に使用される。
具体的な使い分けとしては、
以下のようなケースが考えられる
![ピンクハート](https://stat100.ameba.jp/blog/ucs/img/char/char3/083.png)
![グリーンハート](https://stat100.ameba.jp/blog/ucs/img/char/char3/510.png)
![ブルーハート](https://stat100.ameba.jp/blog/ucs/img/char/char3/512.png)
![星](https://stat100.ameba.jp/blog/ucs/img/char/char3/089.png)
![星](https://stat100.ameba.jp/blog/ucs/img/char/char3/089.png)
また、SEOやアクセシビリティに特に配慮する場合には、main タグの使用が推奨されることもある。
●ページの主要なコンテンツが明確に定義されている場合には、そのコンテンツを main タグで囲むことが適している。
複数の要素をグループ化したり、スタイリングを適用したりする必要がある場合には、div タグを使用することが一般的であること
●重要なのは、main タグと div タグの使い方は柔軟であり、それぞれの文脈に合わせて適切に使用することが推奨
→mainタグとdivタグを文脈に合わせて使用するということは。mainタグの中にdivタグを使うこともあると認識であってる?
mainタグ内でdivタグを用いることは良くある。
divタグは要素のまとまり毎に使用することができとても汎用性が高いので使用頻度は比較的高め✨
✨参考にさせていただいいるサイトです✨
ありがとうございます![爆笑](https://stat100.ameba.jp/blog/ucs/img/char/char3/001.png)
![爆笑](https://stat100.ameba.jp/blog/ucs/img/char/char3/001.png)