自分用のちょっとしたメモです
HTML や JSX を書いていると、「このタグは閉じなくてもよかったっけ？」と迷うことが多いので、自分用に整理しました。基本を押さえておけば確認にも使えるはずです。
対象読者
- HTML 初心者
- React 初心者
- CSS 初心者
- フロントエンドに入門したばかりの方
解説
HTML 仕様では、子要素を持てない「空要素（void element）」 と、子要素を持てる通常の要素 に分かれています。
React/JSX では全てのタグを <タグ名 /> という自己終了に統一して書けますが、本質的な違いは HTML の仕様に基づいています。
空要素（閉じタグが不要なもの）
空要素は中身を入れられないので、閉じタグが書けません。HTML では <tag> のまま完結し、JSX では <tag /> と書くのが慣習です。
<!-- HTML（自己終了記号は付けない） -->
<img src="cat.jpg" alt="猫の写真">
<input type="text" name="keyword">
<br>
<hr>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
// JSX（React/Next.js）
const Form = () => (
<form>
<input type="email" name="email" />
<br />
<img src="/cat.jpg" alt="猫" width={320} height={240} />
<meta charSet="utf-8" />
</form>
)
代表的な空要素一覧（暗記しづらい場合は何も入れられなさそうな要素と覚えると早いです）：
| 空要素 | 用途の一例 |
|---|---|
img |
画像を表示 |
input |
フォーム入力 |
br |
改行 |
hr |
区切り線 |
meta |
メタ情報 |
link |
CSS など外部リソースの読み込み |
source, track
|
メディア要素の追加情報 |
area, base, col, embed, param, wbr
|
特殊ケースですが覚えておくと安心 |
子要素を持てる要素（閉じタグが必要なもの）
通常の要素は子要素やテキストを入れられるので、必ず閉じタグが必要です。
<!-- 正しい例 -->
<div>
<p>こんにちは</p>
<button>送信</button>
</div>
<!-- NG 例（閉じタグを省略すると不正な構造になる） -->
<div>
<p>こんにちは
<div>次のセクション</div>
JSX では <div></div> と <div /> の両方が書けますが、子要素を入れる場合は明示的に囲みます。
const Card = () => (
<section>
<h2>カードタイトル</h2>
<p>説明文です。</p>
</section>
)
// JSX で <div /> と書くと中身を追加できないので注意
const EmptyWrapper = () => <div /> // 子要素を追加するなら {children} を展開する
判断を迷ったときのチェックリスト
- 要素の中にテキストや他の要素を入れたい → 閉じタグがいる（
<div>…</div>） - そもそも中身を入れられない要素 → 閉じタグは書けない（
<img />） - React/Next.js ではすべて自己終了形にできる → ただし HTML の仕様は頭に入れておく
ポイント：公式リファレンスをざっと確認
MDN Docs の HTML elements reference で各要素のカテゴリを調べられます。属性や注意点もまとまっているので迷ったときに便利です。