HTML&CSSにおける<div>について

Question

現在、HTML&CSSを初心者です。<h1>,<p>,<div>関係性がよくわかりません。

<h1>が見出しで、<p>が段落で、<div>が塊を表しているということは理解しているのですが、<div>で表現できることをわざわざ<p>などを用いて表現する理由がよくわかりません。 知恵袋などにあった答えではあまり納得できていません。

お互いの関係性をよく知りたいです。

初歩的な質問ではありますが、よろしくお願いいたします。

Answer 1

つまり、<h1>見出し</h1>としなくても<div class="header">見出し</div>とかでいいんじゃないかという疑問ですね。

どちらのマークアップを使っても確かに見た目は同じようにできるかもしれません。しかし、divと他のタグには大きな違いがあります。divがテキストの「塊」を作るだけであるのに対し、h1やpはそれが文章の中でどういう役割を果たしているかを明確に表しています。<h1>見出し</h1>はhtmlの規格として「見出し」であることが明確なのに対して、後者は、作者が勝手にそういう意味を込めているにすぎません。

人間にもロボットにも間違いなく見出しを見出しとして解釈してもらうには、<h1></h1>を使うのが合理的です。高度な情報処理を実現しようとすれば、これは大事な視点です。ぜひ「見た目」で満足せず、意味付けまで考えたコーディングができるようになってほしいと思います。

詳しくは"セマンティクス HTML"などでググってみてください。

参考：
https://www.granfairs.com/blog/staff/web-accessibility-02

Comments

[Nicks11]

記載していただいたサイト内の動画から、正確なマークアップが必要であることがよくわかりました。私のような初心者の開発者の方は見るべき動画であると思いました。大変参考になりました！ありがとうございます！！