htmlとcssで使うタグで
<header>とか<footer>があると思うんですけど、これって全部<div>で代替可能なんですか？
表面上は同じ結果なのに使い分ける理由とかあるのでしょうか？
他にも<span>とか色々あるけど使い分けがあんまりわからない
なんか面倒くさいし全部<div>で良く無いのかな？
こんな考えを持った人に向けて書いています
私もそのうちの一人です。
【結論】
ブラウザの表面上はおんなじに見えても、コンピュータが認識するためのタグ、 他人がコードの編集を行うときに便利など色々な要素がありますが、意味のとおりにタグを使うことが大事です。
見た目、的には確かにdivで代替できちゃいますね。
でも全部divならcssのセレクタが大変になりますよね！どうせclassを用意しなきゃですし…
headerにしておけば、ヘッダー部分だよ〜って情報も付与されますし、なんかお得感ありません？
まずはこんな感覚で良いと思いますよ。
ちなみにdivはspanの代替として用いてはならないです。
divはひろーい範囲の要素を指定するもので、spanは例えばpタグの中にある文字への装飾みたいにせまい範囲の装飾をする目的で用います。
な、なるほど…!!
めっちゃ分かりやすい！！ありがとうございます…
確かに後からややこしいですね。
あと<span>は知らなかったので気をつけます！
さらにhtmlとcssの勉強を進めていくと、フレームワークと言うものに出会うと思います。
ここはボタンみたいにしたいなとか、画面全体を縦に3分割したいなとか、そう言うコードを全部まとめて書いて、無料で公開しているサイトもあるので、今のうちに使い分けた方が後々楽ですよ！
ご丁寧にありがとうございます…!!
みんなと同じことをしていた方が後々楽ってことなんですかね？
変に独自性発揮せずに使い分けていきます…！
divとspan以外のタグは何かしらの意味を持つので、用途に合わせて使い分けるのが良いです！
何も知らない方がHTMLを見た時にも、ルールに従っておくと構造が伝わりやすくなります
ご丁寧にありがとうございます！
な、なるほど！他の方が見た場合というパターンがあるのですね！
自分視点しかなかったので目から鱗でした、、、
ほんとにありがとうございます！
下記サイトのようにHTMLのタグをまとめているサイトもいくつかありますので検索して見ましょう。
もう一つこれを聞けば納得してくれると思います。
HTMLタグを分ける理由は、機械に（例えばGoogleの検索エンジンに）ここはこういうブロックですよ～と伝えるためです
例えばh1は大見出しなので、検索エンジンもそこが重要と分かりますね。
検索エンジンに適切に読み取られる為にも、タグはちゃんと意味通りに付けるのが◎ですね。
ご丁寧にありがとうございます！
機械に読み取ってもらうためという考え方全く知らなかったのですごく勉強になりました！
表面上はおんなじに見えても、ちゃんと意味どおりにタグを使うのが大事なんですね…!!
コメント