要素
初級読み方：ようそ｜英語：Element
開始タグ + 内容 + 終了タグ をまとめた単位だよ。例：<p>文章</p> 全体が1つの要素。
やさしい説明
要素（ようそ）とは、「開始タグ＋内容＋終了タグ」をまとめた1つの単位です。HTMLのページは、要素の組み合わせでできています。
レゴブロックに例えると、1つ1つのブロックが「要素」です。ブロックを組み合わせて家や車を作るように、要素を組み合わせてWebページを作ります。
「タグ」と「要素」は似ていますが違います。タグは <p> や </p> のような記号のこと。要素は <p>文章</p> 全体のことです。
要素の中に別の要素を入れることもできます。これを「入れ子（ネスト）」と言います。
具体例・使い方
<!-- これが1つの「p要素」 -->
<p>こんにちは</p>
│ │ │
│ │ └─ 終了タグ
│ └─ 内容（コンテンツ）
└─ 開始タグ
<!-- 要素の入れ子（ネスト） -->
<div>
<h1>タイトル</h1>
<p>説明文です。</p>
</div>よく使う要素の種類
- 見出し要素 —
h1〜h6：ページのタイトルや見出し - 段落要素 —
p：文章のまとまり - リンク要素 —
a：他のページへのリンク - 画像要素 —
img：画像（終了タグなし） - リスト要素 —
ul/ol+li：箇条書き・番号付きリスト - コンテナ要素 —
div/section/header：要素をまとめる入れ物 - フォーム要素 —
form/input/button：入力フォーム
img・input・br のように終了タグが不要な要素を「空要素（からようそ）」と呼びます。中にコンテンツを入れる必要がないため、<img src="..." /> のように1つのタグで完結します。
いつ使う？
HTMLを書くときは常に要素を作っています。見出し要素、段落要素、リンク要素——ページに何かを追加するたびに、新しい要素を1つ作ることになります。
間違いやすいポイント
❌ 「タグ」と「要素」を混同する
<p> はタグ。<p>文章</p> は要素です。会話では混ぜて使われることも多いですが、正確には違うものです。技術ドキュメントを読むときに意識しておくと理解が深まります。
❌ 入れ子のルールを破る
すべての要素が自由に入れ子にできるわけではありません。p 要素の中に div を入れるなど、HTMLの仕様に反した入れ子はブラウザが自動修正しますが、意図しない表示崩れの原因になります。
<!-- ❌ p要素の中にdiv要素は入れられない -->
<p><div>ダメ</div></p>
<!-- ✅ divの中にpを入れるのはOK -->
<div><p>OK</p></div>
<!-- ❌ aタグの中にaタグは入れられない -->
<a href="/"><a href="/about">ダメ</a></a>
<!-- ✅ 正しい入れ子 -->
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">自己紹介</a></li>
</ul>
</nav>よくある疑問
Q: タグと要素の違いは？
A: <p>は「開始タグ」、</p>は「終了タグ」、<p>こんにちは</p>全体が「p要素」です。タグは要素の一部分です。
Q: 要素の中に要素を入れていい？
A: はい、入れ子（ネスト）にできます。例: <div><p>文章</p></div>。ただし正しい入れ子のルールがあります。
Q: 空要素とは？
A: 内容を持たない要素のことです。<img>、<br>、<input>などが空要素です。終了タグは書きません。
関連用語
📖 関連レッスン
レッスンを見る →