programming WORK-special

【HTML】タグの上手な使い方 div・section・articleの特徴と違いとは?

投稿日:2020年10月12日 更新日:

プログラミング初学者(web制作やコーディング)にとって、一番最初につまずいてしまうのが『HTML』ではないでしょうか?
こんなこと言ってる私も実は駆け出しのエンジニアです。なので、駆け出しならではの目線で覚えておくと良いと思う内容を、備忘録として書いておきます!

1.div・section・articleタグって何?

これはよく使用されるタグ名だと思います。
実際にdiv・section・articleは画面上(ブラウザ)で表示した場合、違いは全くありません。
しかし、それぞれのタグには特徴があり明確な違いが存在します。

2.それぞれの違いや特徴は何?

違いとしては
 ・articleは独立性が高い構成の場合に使用します
 ・sectionは独立性はなくテーマごとに使用します
 ・divはひとかたまりの範囲を作る場合に使用します

特徴としては
 ・articleはそれだけでテキストを読んだ場合に完結した構成を持っている
 ・sectionは同じ階層でテーマごとのコンテンツを作る時に適している
 ・divは一番身近で使い勝手が良く、細かな要素のグループ化ができる

文章だと分かりづらいので下図をご覧ください。



イメージとしては
本(小説)でいうところの

・article → 独立
・section → 章・節
・div
 → 項または小節

みたいな感じです

というような違いや特徴があります。
※<article>は<section>や<div>の中にも使用可能です

3.タグを使い分ける利点は何?

①タグの違いを理解することで綺麗なマークアップ(記述)になり、適切な文章構造が作れる
②Googleのクローラーに正しく検知されたり修正や改訂などもしやすくなる

初めのうちから、しっかりとしたマークアップやコーディングを心がけることで、後の作業が格段に良くなる(実体験です)と思うので、この記事を読まれた方は、これからタグの使い方を意識してみて下さい。

かくいう私も、このような情報を知らなかったので一番初めに作成したwebページの構成は全てdivタグで作成していましたw(怖い)

4.HTMLのタグって何があるの?

HTMLのタグについては種類もたくさんあり、『何をする時』『どんなタグ』を使えば良いか、分からなくなってしまいますよね。
そんな時は👇こちらのサイト👇が参考になると思うので是非ご覧ください!

http://www.htmq.com/

-programming, WORK-special

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スキルハックス(Skill Hacks)をオススメする理由と評判

こんにちは!こんばんは!shotaです。こちらではスキルハックス (Skill Hacks)について、私なりの考えと意見を書いてみました。一人でも多くの人にその良さが伝われば嬉しいです。 1-1.スキ …

自己紹介プロフィール詳細記事【後編】

まだ自己紹介プロフィール詳細記事【前編】をお読みでない方、もっと詳しく管理人を知りたい方はこちらをクリック👇 自己紹介プロフィール詳細記事【前編】 1.25歳〜31歳 そうして20代で …

JavaScriptの基本『変数』って何?|変数の書き方・ルールを説明

駆け出しエンジニアのshotaです。みなさんJavaScriptって難しくないですか??そもそも、プログラミング初学者ならあるあるかと思いますが、プログラミングで使用されている用語が難しいと感じること …

人生攻略ロードマップ著者 迫祐樹の年商10億にする手腕を解説!

今回は現在絶賛発売中のビジネス書、amazon・楽天で売切れ続出している本の中身について書いていきたいと思います!タイトル名からして既にチート感ありますね。それでは最後までお付き合い下さい。 1.【お …

FREEDOM
管理人のshotaです!
【人生は一度きり】この言葉をきっかけに2020年4月〜プログラミング学習を始め、同年10月〜フリーランスとして活動開始。
まだまだ未熟ながらも格上の方との『縁』もあり、WEB制作の仕事を継続しています。分かりやすく自分を表現すると、女→男のトランスジェンダーです。
プログラミング(WEB制作)とジェンダーについて、少しでも誰かの力になれるように発信を続けていきます!