HOME > CSS+XHTML+SEO > XHTMLの基本ルール

XHTML文書の書き方ルール

XHTMLの書式はHTMLに比べ厳密に決められています。ここではXHTML1.0 transitionalのルールについて触れていきたいと思います。まず、その基本的な約束事をまとめてみました。

  1. 冒頭にXML、DOCTYPE宣言文を書く

    詳しくは下記のXML宣言およびDOCTYPE宣言を参照

  2. 文書はすべて整形式で記述

    開始タグと終了タグがきちんとした場所に正しく配置されていて、要素が正しいツリーを形成する整形式であることが一番の基本です。

  3. 終了タグを省略しない

    <ol>
    <li>りんご</li>
    <li>みかん</li>
    </ol>
    HTMLでは<li>などのリストタグの終了タグを省略できましたが、XHTMLでは終了タグも記述します。

  4. 空要素タグを />で閉じる

     <br /> <hr /> <img src=・・・ />

  5. 属性値を全て引用符で囲む

    <img src="img/XX.gif" width="X" height="Y" alt="ロゴ" />

  6. タグ(要素名、属性)はすべて小文字で記述

    <A href="XXX">YYYY</a> ×
    <a href="XXX">YYYY</a> 
    大文字と小文字を併用せず、小文字で統一して記述。

  7. 属性の省略はしない

    <input type=radio name=job checked /> ×
    <input type=radio name=job checked="checked" />

  8. ファイル内の位置にリンクする場合はid属性を付記

    リンク元  <a href="index.html#xhtml">
    リンク先 <a name="xhtml" id="xhtml">
    ※ただし、XHTML1.1ではname属性は廃止されてしまっているので、id属性のみ記述します。

  9. "&"は全て"&amp;"でエスケープする
  10. 属性値内では改行しない
  11. スクリプトおよびスタイル要素の定義が異なる

    スクリプトやスタイルシートは原則として外部ファイルにする。外部ファイルは<head>〜<head>内にlinkタグを記述。

    <link rel="stylesheet" href="../css/xxx.css" type="text/css" />

    どうしてもXHTMLファイル内に記述しなければならない場合はCDATAセクションを使用します。

    <style type="text/css">
    <![CDATA[
    body {
    background-color: #000000;
    color: #ffffff;
    }
    ]]>
    </style>

    ※しかし、CDATAを使用する場合は、ファイルの拡張子を.xhtmlにしないとスタイルシートは表示されません。また、拡張子xhtmlは非対応ブラウザもあるので、結局、スクリプトやスタイルシートは外部ファイルにした方が良いということです。

XML宣言とDOCTYPE宣言

XHTMLではファイルの文頭にXML宣言とDOCTYPE宣言をします。

XML宣言

XHTMLではファイルがXML文書であるということを宣言する記述を
1行目に挿入することが推奨されています。

<?xml version="1.0" encoding="Shift_JIS"?>

バージョン(version)属性は必須です。文字コード(encoding)属性には使用する文字コードを指定しますが、文字コードがUTF-8、またはUTF-16の場合、encoding属性は省略できます。

シフトJIS → Shift_JIS
JIS → ISO-2022-JP
EUC → EUC-JP
Unicode → UTF-8
Unicode → UTF-16

※1行目にXML宣言を記述することで、WinのIE6以下のブラウザでレンダリング(データ生成)が互換モードになり、表示がおかしくなったり、XML宣言文がそのまま表示されたりするため、標準モードによる表示を期待する場合は、文字コードをUTF-8、またはUTF-16にして、このXML宣言を省略するか、通常のHTML 4.01などで組みます。

DOCTYPE宣言

XML宣言の次に、Document Type の宣言を記述します。これはファイルがXHTMLのTransitional 仕様で記述されていることを意味します。

<!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/1999/xhtml" xml:lang="ja" lang="ja">

DOCTYPE宣言は、文書のDTDを指定することで、指定されたXHTMLのDTDに従ったXML文書として扱われることになります。さらにhtml要素にはxmlns属性を指定します。xmlns属性にはどの仕様(バージョン)のXML文書なのかを記述します。そして使用する言語名を属性で指定します。

XHTMLの拡張子

XHTML文書の拡張子は.xhtmlですが、IE6では認識されない為、.htmlもしくは.htmで記述します。

以上、まとめるとXHTML1.0 Transitionalの場合、以下のように記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>〜</title>
<link rel="stylesheet" type="text/css" href=" 〜 .css" />
</head>
<body>

</body>
</html>

transitional以外のタイプのXML宣言、DOCTYPE宣言の記述は下記をご参照ください。

XHTML 1.0 Frameset
XHTML 1.0 Strict
XHTML 1.1
XHTML Basic 1.0

ここではXHTML1.0 transitonal仕様で書いていますが、他の仕様では非推奨となっているタグがありますので要注意です。詳しくは使用可能なXHTMLのタグ一覧をご参照ください。