ページ

2019年2月18日月曜日

【メモ】コンテンツセッショニングタグの使い分け

ドットインストールでプログラミング学習を進めていますが,その際HTMLタグのコンテンツセッショニングのタグの使い分け方をメモでまとめています。
その際,次のようにまとめました。

タグの使い分け(目安)


<header>・・・導入的なコンテンツ
<footer>・・・著作者の情報,連絡先など
<nav>・・・主要なナビゲーション
<ariticle>・・・ブログの記事をイメージ
<aside>・・・広告など
<section>・・・その他,意味のあるまとまり


これ以外に<div>というタグを使うことがありますが,<div>は一体どういう意味かをMDNで調べてみました。

フローコンテンツの汎用コンテナーです。(MDNより引用)

汎用コンテナー。
これだけだと広く用いられているくらいしか分からないため,もう少し見ました。
こう書いていました。

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。(MDNより引用)

何も表さない・・・か。
では,冒頭に述べたタグとの使い分けはどうすればいいのか。
<section>タグとの違いはどうなのかしら?
これまた同じページにバッチリ出ていました。

<div> 要素は、他に適切な意味的要素(<article> や <nav> など)がない場合に限り使用してください。(MDNより引用)

なるほど。そういうことですね。
ここまで来てようやく理解。
<section>タグも「意味があるまとまり」として使いますからね。

ということは,<div>って実は使用機会が少ない?

このような結論に至りかけ,ググってみると確かにそうであることを確認しました。

では,意味のある要素とはどのようなものだろうか?

この辺りはまだまだ勉強して,どういうときに使うべきなのかを考えていこうと思います。
他の人のソースコードを見て勉強したら解決するでしょう。

0 件のコメント:

コメントを投稿