XHTML と HTML の違い

XHTML を使用する理由 XHTML 構文

厳密な HTML を書き始めることで、XHTML に備えることができます。

XHTML の準備方法

XHTML は HTML 4.01 標準とそれほど変わりません。

したがって、コードを 4.01 にアップグレードすることが良いスタートとなります。

また、HTML コードはすぐに小文字で記述する必要があり、 </p> のようなタグを無視するという悪い習慣を決して身につけないでください。

コーディングを楽しんでください。

主な違い:

  • XHTML 要素は適切にネストされている必要があります。
  • XHTML 要素は閉じている必要があります。
  • タグ名は小文字である必要があります。
  • XHTML ドキュメントにはルート要素が必要です。

要素は適切にネストされている必要があります

HTML では、次のように特定の要素が相互に誤ってネストされる場合があります。

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

XHTML では、すべての要素が次のように相互に適切にネストされている必要があります。

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

ヒント: ネストされたリストで犯しやすい間違いは、次のように、内側のリストが li 要素内になければならないことを忘れることです。

これは間違っています:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

これは正しいです:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注: 正しいコード例では、</ul> の後に </li> タグを挿入しました。

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 要素は小文字である必要があります

XHTML 仕様では、タグ名と属性では大文字と小文字が区別されると定義されています。

これは間違っています:

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

これは正しいです:

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

XHTML ドキュメントにはルート要素が必要です

すべての XHTML 要素は、<html> ルート要素内にネストする必要があります。 他のすべての要素は子要素を持つことができます。 子要素は、親要素内でペアにしてネストする必要があります。 基本的なドキュメント構造は次のとおりです。

<html>
<head> ... </head>
<body> ... </body>
</html>
XHTML を使用する理由 XHTML 構文