HTMLの基本は「意味のある塊（かたまり）」
まず、3人の関係性を「お片付けボックス」に例えてみましょう。
- 要素 (Element): これが一番大きな概念で、「中身の入った、名前付きの箱」全体を指します。例えば、「これは段落です」という文章（中身）が
<p> という箱に入っている、その全体が「p要素（段落要素）」です。HTMLは、この「要素」という塊をたくさん積み重ねて作られています。
- タグ (Tag): 箱の「ここからここまでが段落ですよ」と示す目印です。
<p> のような「開始タグ」と、/ が付いた </p> のような「終了タグ」がペアになり、文章をサンドイッチのように挟みます。
- 属性 (Attribute): 箱にペタッと貼る「追加情報シール」です。例えば、リンク先を指定したり、「この箱は"introduction"というグループですよ」と名前を付けたりします。必ず開始タグの中に書くのがルールです。
この関係、つまり「タグでコンテンツを挟んで『要素』を作り、属性で追加情報を与える」という基本さえ押さえれば、どんなHTMLコードも怖くありません。
コードで見る！要素の解剖学
では、実際のコードを見て、今の「お片付けボックス」のイメージを当てはめてみましょう。
<p class="introduction">これは私の最初の段落です。</p>
この一行を分解すると、こうなります。
- 要素 (Element): 📦 この一行のすべて。全体で1つの「p要素（段落要素）」です。
- タグ (Tag): 🥪
<p>（開始タグ）と </p>（終了タグ）のペア。
- コンテンツ (Contents): 📄 タグに挟まれた「これは私の最初の段落です。」という文章。
- 属性 (Attribute): 🏷️ 開始タグの中にある
class="introduction" というシール。「class」が属性名で、「introduction」がその属性値です。
例外も知っておこう：「空要素」
基本はサンドイッチ形式ですが、中にはコンテンツを挟まない、自己完結型の要素も存在します。
代表的なのが、画像を表示する <img> タグや、改行する <br> タグです。これらは何かを「挟む」必要がないため、終了タグが存在しません。こうした特殊な要素を「空要素（くうようそ）」と呼びます。
属性のすごい力
属性は、要素に新たな命を吹き込む重要な役割を持っています。
例えば、ただの <a> という要素に href という属性（リンク先を指定するシール）を貼ると、その要素はクリックできるハイパーリンクに大変身します。
<a href="https://example.com">ここをクリック</a>
また、class 属性でグループ名を付けておけば、後からCSS（デザインを担当する言語）で「classが"introduction"の要素だけ文字を赤くして！」といった命令が可能になります。
このように、属性は要素の振る舞いを変えたり、目印を付けたりする、非常にパワフルな機能なのです。
▼基本用語のまとめ
| 用語 |
役割 |
書き方 |
具体例 |
| タグ |
要素の開始と終了を示す目印 |
<タグ名> or </タグ名> |
<p>, <h1> |
| 要素 |
コンテンツに意味を与える構造全体 |
<タグ名>コンテンツ</タグ名> |
<p>これは段落。</p> |
| 属性 |
要素に追加情報や設定を与えるシール |
<タグ名 属性名="値"> |
<a href="..."> |
この3つの関係さえ掴めれば、HTML学習の8割は完了したようなものです。次の章から、具体的な要素を一つずつ見ていきましょう！
