HTMLを学び始めると、
タグと一緒に次のような言葉が出てきます。
・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の基本構造と必須タグを理解しよう
コメント