XHTML-構文
XHTML構文はHTML構文と非常によく似ており、ほとんどすべての有効なHTML要素がXHTMLでも有効です。ただし、XHTMLドキュメントを作成するときは、HTMLドキュメントをXHTMLに準拠させるために少し注意を払う必要があります。
新しいXHTMLドキュメントを作成するとき、または既存のHTMLドキュメントをXHTMLドキュメントに変換するときに覚えておくべき重要なポイントは次のとおりです。
XHTMLドキュメントの先頭にDOCTYPE宣言を記述します。
すべてのXHTMLタグと属性は小文字のみで記述してください。
すべてのXHTMLタグを適切に閉じます。
すべてのタグを適切にネストします。
すべての属性値を引用します。
属性の最小化を禁止します。
を交換してください name を持つ属性 id 属性。
非推奨 language スクリプトタグの属性。
上記のXHTMLルールの詳細な説明は次のとおりです-
DOCTYPE宣言
すべてのXHTMLドキュメントには、最初にDOCTYPE宣言が必要です。DOCTYPE宣言には3つのタイプがあり、XHTMLDoctypesの章で詳細に説明されています。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_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">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スタイル | XHTMLスタイル |
---|---|
コンパクト | コンパクト= "コンパクト" |
チェック済み | checked = "checked" |
宣言する | 宣言= "宣言" |
読み取り専用 | readonly = "readonly" |
無効 | disabled = "disabled" |
選択済み | selected = "selected" |
延期 | defer = "defer" |
ismap | ismap = "ismap" |
nohref | nohref = "nohref" |
ノーシェード | noshade = "noshade" |
nowrap | nowrap = "nowrap" |
複数 | multiple = "multiple" |
noresize | noresize = "noresize" |
id属性
id属性はname属性を置き換えます。XHTMLは、name = "name"を使用する代わりに、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" />
言語の属性
スクリプトタグの言語属性は非推奨になりました。次の例は、この違いを示しています-
<!-- 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>
要素の禁止
次の要素には、他の要素を含めることはできません。この禁止事項は、ネストのすべての深さに適用されます。つまり、すべての降順要素が含まれます。
素子 | 禁止 |
---|---|
<a> | 他の<a>要素を含めることはできません。 |
<pre> | <img>、<object>、<big>、<small>、<sub>、または<sup>要素を含めることはできません。 |
<ボタン> | <input>、<select>、<textarea>、<label>、<button>、<form>、<fieldset>、<iframe>、または<isindex>要素を含めることはできません。 |
<ラベル> | 他の<label>要素を含めることはできません。 |
<フォーム> | 他の<form>要素を含めることはできません。 |
最小限のXHTMLドキュメント
次の例は、XHTML1.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>