HTML、ブラウザ、XHTML:自己終了要素が理解できるようになる解説
XHTMLにおける有効な自己終了要素:詳細解説
自己終了要素は、開始タグの末尾にスラッシュ (/
) を追加することで閉じることができます。例えば、<img src="image.jpg" />
のように記述します。これは、<img src="image.jpg"></img>
と同じ意味になります。
主要なブラウザでサポートされている有効な自己終了要素は以下の通りです。
<param>
:オブジェクトパラメータを表す要素<meta>
:メタデータを表す要素<link>
:外部リソースへのリンクを表す要素<input>
:入力フィールドを表す要素<img>
:画像を表す要素<hr>
:水平線を表す要素<br>
:改行を表す要素
注意点
- 自己終了要素の使用は、必ずしも推奨されているわけではありません。可読性や保守性を考慮して、適切な方法を選択することが重要です。
- XHTML 1.0 Strictでは、
<p>
や<div>
などのブロックレベル要素を自己終了要素として使用することはできません。 - すべての要素が自己終了要素として使えるわけではありません。上記リストに記載されていない要素は、通常の方法で閉じなければなりません。
<!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>
このコードでは、以下の要素が自己終了要素として使用されています。
<param>
<meta>
<link>
<input>
<hr>
<img>
上記コードは、主要なブラウザで問題なく表示されます。
- すべての要素が自己終了要素として使えるわけではありません。
<html>
,<head>
,<body>
,</body>
,</html>
などの要素は、自己終了要素として使用できません。- この例では、XHTML 1.0 Strict ドキュメントタイプ宣言を使用しています。
XHTMLにおける自己終了要素の代替方法
終了タグを使用する
最も一般的な方法は、終了タグを使用することです。例えば、<p>これは段落です</p>
のように記述します。
XML宣言を使用する
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>
このコードでは、<?xml version="1.0" encoding="UTF-8"?>
というXML宣言が記述されています。この宣言により、すべての要素が自動的に閉じられます。
省略記号を使用する
一部の要素は、省略記号を使用して閉じることもできます。例えば、<br>
要素は <br/>
と省略して記述することができます。
空の要素を使用する
一部の要素は、空の要素として記述することができます。空の要素は、開始タグと終了タグを持つものの、子要素を持たない要素です。例えば、<hr>
要素は <hr />
または <hr>
と記述することができます。
どの方法を選択するべきか
どの方法を選択するかは、状況によって異なります。一般的には、可読性と保守性を考慮して、最も適切な方法を選択することが重要です。
html browser xhtml