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とは？正しい構造を書く理由

▶ 関連記事
3-3 HTML属性とは？class・id・nameの違い

・class
・id
・name

「何となく見たことはあるけど、
何が違うのかよく分からない」
という状態になりやすい部分です。

しかし、
この 属性の理解 は、
CSS・JavaScript・PHPすべてに直結します。

この記事では、
HTML属性とは何かから始めて、
class・id・name の役割と使い分けを
初心者向けに整理して解説します。

この記事で学べること

・HTML属性とは何か
・class の役割
・id の役割
・name の役割
・それぞれの正しい使い分け

HTML属性とは何か

HTML属性とは、
タグに追加情報を与えるためのものです。

タグだけでは表現できない情報を、
属性として指定します。

例としては、

・どこにリンクするか
・どのグループに属するか
・どの名前でデータを送るか

といった情報を属性で指定します。

属性はタグの「補足情報」

HTMLタグが「名詞」だとすると、
属性は「説明文」のようなものです。

・タグ：要素の種類
・属性：その要素の性質や役割

という関係になります。

class属性とは何か

class は、
複数の要素をまとめて扱うための属性です。

主に次の用途で使われます。

・CSSでデザインを指定する
・JavaScriptで要素を取得する

classの特徴

class には、次の特徴があります。

・同じ名前を複数の要素に使える
・デザイン指定に最もよく使われる
・1つの要素に複数指定できる

「この見た目のグループ」
を作るイメージです。

id属性とは何か

id は、
ページ内で唯一の要素を識別するための属性です。

idの特徴

id には、次のルールがあります。

・同じページ内で1回しか使えない
・特定の1要素を指定する
・JavaScriptやアンカーリンクで使われる

「このページでこの1つ」
を指し示すための属性です。

class と id の違いまとめ

ここで、
class と id の違いを整理します。

・class
　複数要素に使える
　主にデザインやグループ指定

・id
　1ページに1つだけ
　特定要素の識別

初心者のうちは、
迷ったら class を使う
くらいの感覚で問題ありません。

name属性とは何か

name は、
フォーム送信時に使われる属性です。

特に、
PHPなどのサーバー側処理と強く関係します。

nameの役割

フォームで入力された値は、
name 属性をキーとして
サーバーに送信されます。

そのため、
name がなければ、
入力された値を受け取ることができません。

class・id・name の使い分けイメージ

役割を簡単に整理すると、次のようになります。

・class
　見た目・グループ分け

・id
　ページ内の目印

・name
　データ送信用の名前

それぞれ目的が違うため、
同じ名前を付ける必要はありません。

初心者がよくやる間違い

ここで、
よくあるミスを押さえておきましょう。

idを何度も使ってしまう

idは、
ページ内で1回だけが原則です。

複数使いたい場合は、
classを使いましょう。

デザイン目的でnameを使う

nameは、
見た目指定には使いません。

CSSやJavaScriptで扱う場合は、
class や id を使います。

何となく全部付けてしまう

必要のない属性を
何となく付けると、
後で管理が大変になります。

「何のために使うのか」
を意識して付けることが大切です。

なぜ属性の理解が重要なのか

この理解があいまいだと、

・CSSが思った通りに効かない
・JavaScriptで要素が取得できない
・PHPでフォームの値が受け取れない

といった問題が起きます。

逆に言えば、
ここを理解できれば
Web開発の基礎が一気に安定します。

まとめ

HTML属性は、
タグに意味と役割を追加する重要な要素です。

・class：グループ・デザイン用
・id：ページ内で唯一の識別子
・name：データ送信用

この使い分けを意識することで、
CSS・JavaScript・PHPの理解が
自然につながっていきます。

次は、
HTMLでよく使うタグを実際に組み合わせる方法
を学んでいきましょう。

次に読むべき記事

▶ 次の記事
3-4 HTMLでよく使うタグ一覧と基本的な使い方

▶ 関連記事
3-2 HTMLの基本構造と必須タグを理解しよう