「タグ」「要素」「属性」の違い — 検索する前に知っておく3語

学び始めのころ、この3つをなんとなく同じものとして扱っていました。困るのは検索するときです。「要素を消す」と「属性を消す」ではまったく違う話なので、言葉があいまいだと出てくる記事も的外れになります。1つの例で並べて見てみましょう。

<a href="https://example.com" target="_blank">くわしく見る</a>

タグ … 山かっこで囲まれた印そのもの

上の例でいうと、先頭の <a ...> と、末尾の </a> がタグです。前者を開始タグ、後者を終了タグと呼びます。タグは「ここから」「ここまで」を示す目印であって、それ単体が中身なわけではありません。

要素 … 開始タグから終了タグまでの、ひとかたまり

開始タグ・中身・終了タグを合わせた全体が要素です。上の例は「a要素」がひとつある状態です。ブラウザはこの要素という単位でページを組み立てているので、CSSやJavaScriptで扱う対象も、基本的には要素になります。

属性 … 要素に付ける追加の情報

開始タグの中に書かれている href="..." や target="_blank" が属性です。属性名と値の組で書き、要素の性質を細かく指定します。リンク先、画像のファイル名、CSSを当てるための名札（class）は、どれも属性です。

混同しやすいところ

• 「pタグ」という言い方は日常的にはよく使われますが、正確には「p要素」を指していることが多い
• img や br のように終了タグを持たないものもある。この場合も、その1つで要素ひとつぶん
• class と id はどちらも属性。同じ名札を何度でも使えるのが class、ページに1つだけなのが id

言葉が整理できると、エラーメッセージも読めるようになります。次は、リンクと画像という属性の代表格を実際に書いてみましょう。