XHTML-構文

XHTML構文はHTML構文に非常によく似ており、ほとんどすべての有効なHTML要素はXHTMLでも有効です。ただし、XHTMLドキュメントを作成するときは、HTMLドキュメントをXHTMLに準拠させるために、もう少し注意を払う必要があります。

新しいXHTMLドキュメントを作成したり、既存のHTMLドキュメントをXHTMLドキュメントに変換する際に覚えておくべき重要なポイントを次に示します-

XHTMLドキュメントの最初にDOCTYPE宣言を書きます。
すべてのXHTMLタグと属性を小文字のみで記述します。
すべてのXHTMLタグを適切に閉じます。
すべてのタグを適切にネストします。
すべての属性値を引用します。
属性の最小化を禁止します。
name 属性を id 属性に置き換えます。
scriptタグの language 属性を廃止します。

上記のXHTMLルールの詳細な説明は次のとおりです-

DOCTYPE宣言

すべてのXHTMLドキュメントには、開始時にDOCTYPE宣言が必要です。 DOCTYPE宣言には3つのタイプがあり、XHTML Doctypesの章で詳しく説明されています。 DOCTYPEの使用例は次のとおりです-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

大文字と小文字の区別

XHTMLは大文字と小文字を区別するマークアップ言語です。すべてのXHTMLタグと属性は、小文字でのみ記述する必要があります。

<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutoriall">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutoriall">XHTML Tutorial</a>

この例では、 Href およびアンカータグ A は小文字ではないため、正しくありません。

タグを閉じる

各XHTMLタグには同等の終了タグが必要です。空の要素にも終了タグが必要です。タグを使用する有効な方法と無効な方法を示す例を次に示します-

<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.

<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >

次の構文は、上記のタグをXHTMLで記述する正しい方法を示しています。違いは、ここでは両方のタグを適切に閉じていることです。

<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>

<!-- This is also valid now -->
<img src="/images/xhtml.gif"/>

属性の引用

XHTML属性の値はすべて引用符で囲む必要があります。それ以外の場合、XHTMLドキュメントは無効なドキュメントと見なされます。ここに構文を示す例があります-

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50/>

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50"/>

属性の最小化

XHTMLは属性の最小化を許可しません。つまり、属性とその値を明示的に指定する必要があります。次の例は、違いを示しています-

<!-- This is invalid in XHTML -->
<option selected>

<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">

HTMLの最小化された属性のリストと、XHTMLでそれらを記述する方法を次に示します-

HTML Style	XHTML Style
compact	compact="compact"
checked	checked="checked"
declare	declare="declare"
readonly	readonly="readonly"
disabled	disabled="disabled"
selected	selected="selected"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
multiple	multiple="multiple"
noresize	noresize="noresize"

_id_属性

id属性はname属性を置き換えます。 name = "name"を使用する代わりに、XHTMLはid = "id"を使用することを好みます。次の例は、方法を示しています-

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo"/>

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo"/>

_language_属性

scriptタグの言語属性は非推奨です。次の例は、この違いを示しています-

<!-- This is invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

ネストされたタグ

すべてのXHTMLタグを適切にネストする必要があります。それ以外の場合、ドキュメントは誤ったXHTMLドキュメントと見なされます。次の例は、構文を示しています-

<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>

要素の禁止

次の要素には、他の要素を含めることはできません。この禁止事項は、ネストのすべての深さに適用されます。つまり、すべての降順要素が含まれます。

Element	Prohibition
<a>	Must not contain other <a> elements.
<pre>	Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements.
<button>	Must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements.
<label>	Must not contain other <label> elements.
<form>	Must not contain other <form> elements.

最小限のXHTMLドキュメント

次の例は、XHTML 1.0ドキュメントの最小限のコンテンツを示しています-

<?xml version="1.0" encoding="UTF-8"?>

<!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/TR/xhtml1" xml:lang="en" lang="en">
   <head>
      <title>Every document must have a title</title>
   </head>

   <body>
      ...your content goes here...
   </body>
</html>

Xhtml-syntax