HTMLの基本構造や属性について理解したところで、
次に必要になるのが 「実際によく使うタグを把握すること」 です。
HTMLには多くのタグがありますが、
日常的に使うものは限られています。
・どのタグを使えばいいか分からない
・divばかり使ってしまう
・正しいタグ選びに自信がない
こうした状態を抜け出すために、
この記事では Web開発で頻繁に使われるHTMLタグ を厳選し、
「どんな場面で使うのか」を中心に整理します。
この記事で学べること
・HTMLでよく使う基本タグ一覧
・各タグの役割と使いどころ
・divとspanの考え方
・正しいタグ選びの基準
見出し系タグ
h1 〜 h6
見出しを表すタグです。
役割
・ページやセクションの見出しを表す
・内容の階層構造を作る
使い分けの考え方
・h1：ページ全体のタイトル
・h2：大きな章
・h3：章の中の見出し
見た目の大きさではなく、
意味の階層で選ぶことが重要です。
文章・テキスト系タグ
p（段落）
文章を表す最も基本的なタグです。
使いどころ
・説明文
・本文
・文章のまとまり
改行目的で使うのではなく、
意味のある文章単位で使います。
br（改行）
文章内での改行を表します。
使いどころ
・住所
・詩や改行が意味を持つ文章
多用すると構造が分かりにくくなるため、
基本は p タグを優先します。
リンク・画像系タグ
a（リンク）
別ページや別サイトへ移動するためのタグです。
使いどころ
・ページ遷移
・外部リンク
リンクの文字は、
「ここをクリック」ではなく
内容が分かる文章にするのが望ましいです。
img（画像）
画像を表示するためのタグです。
重要ポイント
・alt属性は必ず指定する
・画像の内容を簡潔に説明する
altは、
SEOやアクセシビリティに大きく影響します。
グループ化・レイアウト用タグ
div（ブロック要素）
意味を持たない汎用的なコンテナです。
使いどころ
・レイアウト調整
・複数要素のグループ化
・CSS指定の単位
「意味がない」からこそ、
使いすぎない意識も重要です。
span（インライン要素）
文章の一部分を囲むためのタグです。
使いどころ
・文章中の一部を装飾
・特定の文字だけCSSを当てたい場合
divが「箱」なら、
spanは「マーカー」のような存在です。
リスト系タグ
ul / ol / li
複数の項目を一覧表示するためのタグです。
役割
・ul：順序なしリスト
・ol：順序ありリスト
・li：項目
ナビゲーションメニューや
手順一覧などで頻繁に使われます。
テーブル系タグ（基本理解）
table / tr / th / td
表形式で情報を整理するためのタグです。
使いどころ
・表データ
・比較表
レイアウト目的で使うのは避け、
データ表現専用として使います。
フォーム系タグ（概要）
フォームに関するタグは、
次章以降で詳しく扱いますが、
ここでは全体像だけ押さえておきます。
代表例
・form
・input
・textarea
・button
フォームは、
PHPやJavaScriptと強く結びつく重要な要素です。
タグ選びで迷ったときの基準
タグ選びで迷ったら、
次の順番で考えてください。
・この要素は何を表しているか
・見出しか、文章か、グループか
・意味のあるタグが存在するか
「とりあえずdiv」は避け、
意味を持つタグを優先することが
良いHTMLを書く第一歩です。
なぜタグ選びが重要なのか
正しいタグ選びは、
次の点に大きく影響します。
・CSSが書きやすくなる
・JavaScriptで操作しやすくなる
・SEO評価が安定する
・コードが読みやすくなる
HTMLは、
後工程すべての土台です。
まとめ
HTMLでよく使うタグは、
役割ごとに整理すると理解しやすくなります。
・見出し系
・文章系
・リンク・画像
・グループ化
・リスト
すべてを暗記する必要はありませんが、
「この場面ではこのタグ」
という判断ができるようになることが目標です。
次は、
HTMLの構造をさらに洗練させる書き方
を学んでいきましょう。
次に読むべき記事
▶ 次の記事
3-5 セマンティックHTMLとは？正しい構造を書く理由
コメント