HTML id, class, タグの違い

背景

Pythonの次として、Javascriptの習得を目指しています。

Javascriptを調べていくと、HTMLと関連するところがあり、「そういえばタグって何だっけ？」「idって必ず1個につき一意にしないとダメなんだっけ？」とHTMLに対して思うところがあったので、見直してみました。

まとめ

タグはHTMLの構成単位、idは1個につき1個のタグまで、classは1個につき複数個のタグにつけてOK。

種類	一意か？	複数に使える？	主な用途
id	✅ 必ず一意	❌ 単一要素のみ	特定の要素を操作（JSやCSS）
class	❌ 一意でなくてよい	✅ 何個でも使える	グループでスタイルを当てる
タグ	✅（種類は多い）	✅ HTMLの基本構造	ページの意味や構造を作る

補足

Javascriptでの使い方は下記。

document.getElementById("mainTitle"); // idで取得
document.getElementsByClassName("intro"); // classで取得（複数）
document.getElementsByTagName("p"); // タグで取得（複数）

querySelectorを使うと、id, class, タグの区別を気にせずに同じ書き方（CSSセレクタ）でJSオブジェクトを取得できる。

// idで取得
const title = document.querySelector('#mainTitle');

// classで取得（最初の1つだけ）
const firstIntro = document.querySelector('.intro');

// タグで取得（最初の1つだけ）
const firstParagraph = document.querySelector('p');

感想

HTML → Javascriptの順番で勉強すると、HTMLの段階で「今ってHTML使わないのに何で勉強しているんだろう」「どこが押さえるポイントかわからない」となることが多かったのですが、Javascriptを勉強してからHTMLの復習をすると、上記2点がクリアになって良いですね。