XHTML1.0はHTML4.01を再定義したバージョンです。
HTMLからXHTMLへの移行版のため、HTMLと比べてそれほど大きな違いがあるわけではありませんが、記述の仕方がやや厳密になっています。
以下に、HTMLからXHTMLに変換する際の注意点を挙げてみます。
XHTMLでは、文書の先頭でXML宣言をすることが強く推奨されています。
XML宣言には、XMLのバージョンと文字コードを指定します。
下記の例では、文字コードにShift_JISを指定しています。
<?xml version=”1.0” encoding=”Shift_JIS“?>
XHTML1.0では、HTML4.01と同じように3種類の文書型宣言があります。XHTMLの記述に合わせて、いずれかのDTDを宣言します。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
厳密なDTDで非推奨の要素や属性は使えません。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Strict DTDほど厳密ではなく、非推奨の要素や属性なども使えますが、フレームは使えません。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
Transitional DTDにフレームが加わったものです。
XHTMLでは、<html>要素にXML名前空間と言語コードを指定します。
名前空間 (namespace) とは、同じ名前の変数名などが複数存在するのを避けるために定義するものですが、
この場合はブラウザなどに対して、文書内で利用するタグセットがXHTMLのものであることを示す役割があります。
また、HTMLでは言語コードをlang属性で指定しますが、XHTMLではxml:lang属性で指定します。HTML文書との互換性を考慮してxml:lang属性とlang属性の両方を記述しておくのが一般的です。
<html xmlns=”https://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja“>
XHTMLでタグを入れ子にする場合には、より内側の終了タグから正しい順序で閉じて、要素をきちんとしたツリー構造にしなくてはなりません。このような正しい記述のしかたは、整形式（well-formed）と呼ばれます。
このルールはHTMLでも同じですが、
XHTMLではより厳密に整形式で記述することが求められます。
<p id=”sample” align=”center“><strong>段落</strong>となります。</p>
<strong><p id=”sample” align=”center“>段落</strong>となります。</p>
HTMLでは大文字と小文字が区別されませんが、XHTMLでは区別されます。
XHTMLでは要素名と属性名は小文字で定義されているので、これらを記述する際には、すべて小文字で記述します。
<p id=”sample” align=”center“><strong>段落</strong>となります。</p>
<P id=”sample” align=”center“><STRONG>段落</STRONG>となります。</P>
HTMLでは</p>や</li>など、終了タグを省略しても良い場合がありますが、
XHTMLではこれらの要素でも終了タグを省略することができません。
<p id=”sample” align=”center“><strong>段落</strong>となります。</p>
<p id=”sample” align=”center“><strong>段落</strong>となります。
HTMLでは、<img>や<br>のように、要素内容を持たない空要素と呼ばれるものがあります。
XHTMLではこれらのタグについても<img />や<br />という具合に /> で閉じなくてはなりません。
/の前に半角スペースを入れるのは、半角スペースが無いとブラウザが正しく認識できないことがあるためです。
<p id=”sample” align=”center“>
段落となります。<br />
<img src=”image.gif” alt=”画像” />
</p>
<p id=”sample” align=”center“>
段落となります。<br>
<img src=”image.gif” alt=”画像“>
</p>
HTMLでは、属性の値を指定する際、引用符を省略できる場合がありますが、
XHTMLでは、そのような場合にも省略せずに引用符で囲わなくてはなりません。
<table width=”500“>～</table>
<table width=500>～</table>
HTMLでは、属性の名前と値が同じ場合に属性名を省略することができますが、XHTMLでは、属性名を省略することはできません。
<input type=”radio” checked=”checked” />
<input type=”radio” checked />
HTMLでは、ファイル内の位置を示す場合にname属性を使用しますが、XHTMLではid属性を使用します。
ただし、id属性をサポートしていないブラウザを考慮して、id属性とname属性の両方を記述しておくのが一般的です。
<p id=”sample” name=”sample“>段落となります。</p>
<p name=”sample“>段落となります。</p>
HTML文書内で<style>タグや<script>タグを使用する場合、これらのタグをサポートしていない古い環境でソースがそのまま表示されてしまわないように、要素内容を<!– –>や<!– //–>で囲むのが一般的です。
<style type=”text/css“>
<!–
p {color:blue;}
–>
</style>
しかし、XHTMLで上記のように記述すると、スタイルシートやスクリプトがコメントとして無視されてしまいます。
そこで、XHTMLで<style>タグや<script>タグを使用する場合には、あえて<!– –>や<!– //–>で囲まないことがあります。現在、<style>タグや<script>タグをサポートしていない環境は少なくなっているので、それで問題が起きることはほとんどないでしょう。
<style type=”text/css“>
p {color:blue;}
</style>
こうした問題を根本的に解決するには、スタイルシートやスクリプトの部分を外部ファイル化すると良いでしょう。
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
<script type=”text/javascript” src=”sample.js“></script>
</head>
<body>
</body>
</html>
XHTMLではソース中に「&」が含まれる場合には、すべて「&」と記述します。
<a href=”result.php?key=abc&page=1“>abc</a>
HTMLでは言語コードをlang属性で指定しますが、XHTMLではxml:lang属性で指定します。HTML文書との互換性を考慮してxml:lang属性とlang属性の両方を記述しておくのが一般的です。
<p xml:lang=”en” lang=”en“>hello!</p>
| <前へ | 記事一覧へ | 次へ> |
