HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTMLの基本 /  HTML4.01からXHTML1.0に変換する

★HTMLの基本

| ​​HTML4.01からXHTML1.0に変換する
XHTML1.0はHTML4.01を再定義したバージョンです。 HTMLからXHTMLへの移行版のため、HTMLと比べてそれほど大きな違いがあるわけではありませんが、記述の仕方がやや厳密になっています。 以下に、HTMLからXHTMLに変換する際の注意点を挙げてみます。

XML宣言をする
XHTMLでは、文書の先頭でXML宣言をすることが強く推奨されています。 XML宣言には、XMLのバージョンと文字コードを指定します。 下記の例では、文字コードにShift_JISを指定しています。
文書の先頭でXML宣言をする
<?xml version="1.0" encoding="Shift_JIS"?>

XHTMLの文書型を宣言をする
XHTML1.0では、HTML4.01と同じように3種類の文書型宣言があります。XHTMLの記述に合わせて、いずれかのDTDを宣言します。
XHTML1.0 Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
厳密なDTDで非推奨の要素や属性は使えません。

XHTML1.0 Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict DTDほど厳密ではなく、非推奨の要素や属性なども使えますが、フレームは使えません。

XHTML1.0 Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Transitional DTDにフレームが加わったものです。

<html>要素にXML名前空間と言語コードを指定する
XHTMLでは、<html>要素にXML名前空間と言語コードを指定します。 名前空間 (namespace) とは、同じ名前の変数名などが複数存在するのを避けるために定義するものですが、 この場合はブラウザなどに対して、文書内で利用するタグセットがXHTMLのものであることを示す役割があります。
また、HTMLでは言語コードをlang属性で指定しますが、XHTMLではxml:lang属性で指定します。HTML文書との互換性を考慮してxml:lang属性とlang属性の両方を記述しておくのが一般的です。
XML名前空間と言語コードを指定
<html xmlns="http://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 />という具合に /> で閉じなくてはなりません。 /の前に半角スペースを入れるのは、半角スペースが無いとブラウザが正しく認識できないことがあるためです。
正：XHTMLでの書き方
<p id="sample" align="center">
段落となります。<br />
<img src="image.gif" alt="画像" />
</p>

誤：HTMLでの書き方
<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 />

ファイル内の位置はid属性で示す
HTMLでは、ファイル内の位置を示す場合にname属性を使用しますが、XHTMLではid属性を使用します。 ただし、id属性をサポートしていないブラウザを考慮して、id属性とname属性の両方を記述しておくのが一般的です。
正：id属性とname属性で名前を付ける
<p id="sample" name="sample">段落となります。</p>

誤：name属性で名前を付ける
<p name="sample">段落となります。</p>

スタイルシートやスクリプトは別ファイルにする
HTML文書内で<style>タグや<script>タグを使用する場合、これらのタグをサポートしていない古い環境でソースがそのまま表示されてしまわないように、要素内容を<!--　-->や<!-- //-->で囲むのが一般的です。
HTML文書内でCSSを指定する
<style type="text/css">
<!--
p {color:blue;}
-->
</style>
しかし、XHTMLで上記のように記述すると、スタイルシートやスクリプトがコメントとして無視されてしまいます。 そこで、XHTMLで<style>タグや<script>タグを使用する場合には、あえて<!--　-->や<!-- //-->で囲まないことがあります。現在、<style>タグや<script>タグをサポートしていない環境は少なくなっているので、それで問題が起きることはほとんどないでしょう。
XHTML文書内でCSSを指定する
<style type="text/css">
p {color:blue;}
</style>
こうした問題を根本的に解決するには、スタイルシートやスクリプトの部分を外部ファイル化すると良いでしょう。
CSSやJavaScriptを外部ファイル化する
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="sample.js"></script>
</head>
<body>

</body>
</html>

「&」は、すべて「&amp;」と記述する
XHTMLではソース中に「&」が含まれる場合には、すべて「&amp;」と記述します。
「&」は「&amp;」と記述する
<a href="result.php?key=abc&amp;page=1">abc</a>

言語コードはxml:lang属性で指定する
HTMLでは言語コードをlang属性で指定しますが、XHTMLではxml:lang属性で指定します。HTML文書との互換性を考慮してxml:lang属性とlang属性の両方を記述しておくのが一般的です。
xml:lang属性とlang属性で言語コードを指定する
<p xml:lang="en" lang="en">hello!</p>