HTML入門 | HTML拡張 | HTMLとXHTML
XHTML (Extensible HTML)
XHTMLはHTMLと同等の表現能力を持つマークアップ言語であり、HTMLより厳格な構文を持つ。
より厳格なバージョンであるXHTMLを使う理由
近年のWebコンテンツは、従来のPC中心の環境を離れ、さまざまなプラットフォームでより多く利用されている。
そのため、不正確なHTML構文をサポートするためのリソースが不足する環境が徐々に増えている。
XHTML文書は1つのXML文書として構文的に正確である必要があるため、HTMLとは異なり、標準XMLライブラリを使った自動処理が可能である。
XHTMLでの変更点
文書構造の側面
- XHTML DOCTYPEを必ず明示する必要がある。
<html>タグのxmlns属性を必ず明示する必要がある。<html>,<head>,<title>,<body>タグを必ず使用する必要がある。
文書要素の側面
- すべてのタグは必ず閉じる必要がある。
- すべてのタグは順序どおりに閉じる必要がある。
- すべての要素は必ず小文字で使用する必要がある。
- XHTML文書は必ず1つのroot要素を含む必要がある。
文書属性の側面
- 属性名は必ず小文字で使用する必要がある。
- 属性値は必ず引用符で囲む必要がある。
- 属性値の省略がなくなったため、必ず属性値を明示する必要がある。
HTMLとXHTMLの違い
次の例はHTMLとXHTMLの違いを示している。
XHTMLでは書いてはいけない誤りである。
- 終了タグのない空タグ(empty tag)は、必ず末尾に空白とスラッシュ(
/)を付ける必要がある。
HTML : <br>
XHTML : <br />
- 空ではない要素は必ず終了タグを持つ必要がある。
HTML : <p>最初の文</p><p>2番目の文
XHTML : <p>最初の文</p><p>2番目の文</p>
- タグ要素は必ず開いた順序どおりに閉じる必要がある。
HTML : <em><strong>This is some text.</em></strong>
XHTML : <em><strong>This is some text.</strong></em>
- 画像タグには必ずalt属性を記述する必要がある。
HTML : <img src="devkuma_logo.png" />
XHTML : <img src="devkuma_logo.png" alt="Devkuma" />
- すべてのテキスト(text)は必ずタグで囲む必要がある。
HTML : <body>本文で使用されるテキスト段落</body>
XHTML : <body><p>本文で使用されるテキスト段落</p></body>
- 属性値は必ず引用符で囲む必要がある。
HTML : <td rowspan=3>
XHTML : <td rowspan="3">
- タグや属性は必ず小文字だけを使用する必要がある。
HTML : <BODY><P>タグと属性は</P></BODY>
XHTML : <body><p>必ず小文字だけを使用する必要がある。</p></body>
- 属性値は省略できないため、必ず属性値を明示する必要がある。
HTML : <textarea readonly>読み取り専用です。</textarea>
XHTML : <textarea readonly="readonly">読み取り専用です。</textarea>
上で見たすべてのHTML例はXHTMLの基準には合わないが、HTMLではすべて正常に動作する。
HTML文書をXHTML文書に変換する方法
- 先頭行に次のコードを追加する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/2018/xhtml"> - xmlns属性を追加する。
- すべてのタグ名を小文字に変更する。
- すべての空タグを閉じる。
- すべての属性名を小文字に変更する。
- すべての属性値を引用符で囲む。