HTML と XHTML

❮ 前章へ 次章へ ❯

XHTML は、XML として記述した HTML です。


XHTML とは?


なぜ XHTML?

インターネット上のページには、多くの「悪い」HTML が含まれています。

以下の HTML コードは、ほとんどのブラウザで正常に動作します(たとえ HTML ルールに従わない場合でも):

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

今日の市場は、いろいろなブラウザの技術で構成されています。 あるブラウザはコンピュータ上で実行され、またあるブラウザは携帯電話やその他の小型デバイスで実行されます。 多くの場合、小型デバイスにとって「悪い」マークアップを解釈するためのリソースやパワーが不足することがよくあります。

XMLは、文書を正しくマークアップしなければならない(「整形済」でなければならない)、マークアップ言語です。

XML を勉強したい場合は、XMLチュートリアルをご覧ください。

HTML と XML の強みを組み合わせることで、XHTML は開発されました。

XHTML は、XML として再設計された HTML です。


HTMLとの最も重要な違い:

文書構造

XHTML 要素

XHTML 属性

訳注:属性の最小化とは、<input type="radio" name="hyouka" value="good" checked="checked">のchecked="checked" 部分を、"checked" のみを記述し他の部分を省略するような記述法--><input type="radio" name="hyouka" value="good" checked>)

<!DOCTYPE ....> は必須

XHTML 文書は、XHTML DOCTYPE 宣言をしなければなりません。

XHTML Doctypes の完全なリストは、HTML タグリファレンスに含まれています。

<html>、<head>、<title> および <body> 要素も存在しなければならず、 <html> の xmlns 属性は、文書に対する xml 名前空間を指定しなければなりません。

下の例は、必要最小限のタグを持つ 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/1999/xhtml">

<head>
  <title>Title of document</title>
</head>

<body>
  some content
</body>

</html>

XHTML 要素は適切にネストしなければならない

次のように、HTML には幾つかの要素が不適切にネストしている場合があります:

<b><i>This text is bold and italic</b></i>

XHTMLにおいては、次のように、すべての要素を適切に互いにネストする必要があります:

<b><i>This text is bold and italic</i></b>

XHTML要素は常に閉じなければならない

これは誤り:

<p>This is a paragraph
<p>This is another paragraph

これは正しい:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

空の要素も閉じなければならない

これは誤り:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

これは正しい:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 要素は小文字でなければならない

これは誤り:

<BODY>
<P>This is a paragraph</P>
</BODY>

これは正しい:

<body>
<p>This is a paragraph</p>
</body>

XHTML 属性名は小文字でなければならない

これは誤り:

<table WIDTH="100%">

これは正しい:

<table width="100%">

属性値は引用符で括らなければならない

これは誤り:

<table width=100%>

これは正しい:

<table width="100%">

属性の最小化は禁止

れは誤り:

<input type="checkbox" name="vehicle" value="car" checked />

これは正しい:

<input type="checkbox" name="vehicle" value="car" checked="checked" />

れは誤り:

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

これは正しい:

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

HTMLからXHTMLへの変換方法

  1. 全ページの先頭行に、XHTML <!DOCTYPE> を追加します
  2. 全ページの HTML 要素に、xmlns属性を追加します
  3. すべての要素名を小文字に変更します
  4. すべての空要素を閉じます
  5. すべての属性名を小文字に変更します
  6. すべての属性値を引用符で括ります

W3C バリデータで XHTML を検証

下のボックスにあなたの Web ​​アドレスを入れてください:



❮ 前章へ 次章へ ❯