HTML、ブラウザ、XHTML：自己終了要素が理解できるようになる解説

2024-04-06

XHTMLにおける有効な自己終了要素：詳細解説

自己終了要素は、開始タグの末尾にスラッシュ (/) を追加することで閉じることができます。例えば、<img src="image.jpg" /> のように記述します。これは、<img src="image.jpg"></img> と同じ意味になります。

主要なブラウザでサポートされている有効な自己終了要素は以下の通りです。

<br>：改行を表す要素
<input>：入力フィールドを表す要素
<link>：外部リソースへのリンクを表す要素
<meta>：メタデータを表す要素
<param>：オブジェクトパラメータを表す要素

注意点

すべての要素が自己終了要素として使えるわけではありません。上記リストに記載されていない要素は、通常の方法で閉じなければなりません。
XHTML 1.0 Strictでは、<p> や <div> などのブロックレベル要素を自己終了要素として使用することはできません。
自己終了要素の使用は、必ずしも推奨されているわけではありません。可読性や保守性を考慮して、適切な方法を選択することが重要です。

XHTMLにおける自己終了要素の使用例：サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 自己終了要素の例</title>
</head>
<body>
<p>これは段落です。</p>

<img src="image.jpg" alt="画像の説明" />

<hr />

<input type="text" name="name" />

<link rel="stylesheet" href="style.css" />

<meta charset="UTF-8" />

<param name="value" value="100" />
</body>
</html>

このコードでは、以下の要素が自己終了要素として使用されています。

<br>
<img>
<input>
<link>
<meta>
<param>

上記コードは、主要なブラウザで問題なく表示されます。

補足

この例では、XHTML 1.0 Strict ドキュメントタイプ宣言を使用しています。
<html>, <head>, <body>, </body>, </html> などの要素は、自己終了要素として使用できません。
すべての要素が自己終了要素として使えるわけではありません。

XHTMLにおける自己終了要素の代替方法

終了タグを使用する

最も一般的な方法は、終了タグを使用することです。例えば、<p>これは段落です</p> のように記述します。

XML宣言を使用すると、すべての要素を自動的に閉じるようにすることができます。例えば、以下のコードのように記述します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 終了タグの例</title>
</head>
<body>
<p>これは段落です</p>
</body>
</html>