プログラミング初学者(web制作やコーディング)にとって、一番最初につまずいてしまうのが『HTML』ではないでしょうか？
こんなこと言ってる私も実は駆け出しのエンジニアです。なので、駆け出しならではの目線で覚えておくと良いと思う内容を、備忘録として書いておきます！
１.div・section・articleタグって何？
これはよく使用されるタグ名だと思います。
実際にdiv・section・articleは画面上(ブラウザ)で表示した場合、違いは全くありません。
しかし、それぞれのタグには特徴があり明確な違いが存在します。
２.それぞれの違いや特徴は何？
違いとしては
・articleは独立性が高い構成の場合に使用します
・sectionは独立性はなくテーマごとに使用します
・divはひとかたまりの範囲を作る場合に使用します
特徴としては
・articleはそれだけでテキストを読んだ場合に完結した構成を持っている
・sectionは同じ階層でテーマごとのコンテンツを作る時に適している
・divは一番身近で使い勝手が良く、細かな要素のグループ化ができる
文章だと分かりづらいので下図をご覧ください。
イメージとしては
本(小説)でいうところの
・article → 独立
・section → 章・節
・div
→ 項または小節
みたいな感じです
というような違いや特徴があります。
※<article>は<section>や<div>の中にも使用可能です
３.タグを使い分ける利点は何？
①タグの違いを理解することで綺麗なマークアップ(記述)になり、適切な文章構造が作れる
②Googleのクローラーに正しく検知されたり修正や改訂などもしやすくなる
初めのうちから、しっかりとしたマークアップやコーディングを心がけることで、後の作業が格段に良くなる(実体験です)と思うので、この記事を読まれた方は、これからタグの使い方を意識してみて下さい。
かくいう私も、このような情報を知らなかったので一番初めに作成したwebページの構成は全てdivタグで作成していましたw(怖い)
４.HTMLのタグって何があるの？
HTMLのタグについては種類もたくさんあり、『何をする時』に『どんなタグ』を使えば良いか、分からなくなってしまいますよね。
そんな時は👇こちらのサイト👇が参考になると思うので是非ご覧ください！
