XHTMLの基礎 : XHTML

Pocket

XHTMLとHTMLとの違い、XHTMLを記述する際のポイントをまとめています。

XHTMLとは

XHTMLはHTMLをXML規格で記述したXML文書です。XHTMLを利用して、構造(XHTML)と視覚・見栄え(CSS)を分けて記述することにより、簡潔性,汎用性,操作性,アクセシビリティに優れたサイトになります。

XHTMLの基本文法

XHTMLの基本文法をHTMLとの違いを中心にまとめます。

全てのタグ・要素・属性名は小文字で記入する。
HTMLは小文字と大文字を区別しませんが、XHTMLは小文字と大文字を区別します。
全ての属性値を引用符(")で囲む
全ての属性は値を必要とする
(例) <td nowrap> ⇒ <td nowrap="nowrap">
全てのタグを閉じる
HTMLではp要素やli要素などは、閉じタグ</p>,</li>を省略できますが、XHTMLでは省略できません。
空タグも閉じる
<br> ⇒ <br />
<hr> ⇒ <hr />
<img src="ファイルパス"> ⇒ <img src="ファイルパス" />
※スラッシュ(/)の前に半角スペースを入れることで、XHTMLの仕様に先立って開発された昔のブラウザにも対応できます。つまりスラッシュ(/)をつけることにより後方互換性が得られます。
コメントに–(ハイフンの連続)を入れない
<!– –コメント– –>  ⇒ ×
<!– ==コメント- – –>  ⇒ ○
全ての<,>,&記号は文字参照で記述する
<(小なり記号)は&lt;に、>(大なり記号)は&gt;、&(アンパンサントは)&amp;にします※1
※1:
<,>,&はHTMLで特殊な意味(<,>はタグ区切文字,&は文字参照の開始文字)を持つが、文字参照で記述することにより<.>,&を特殊な意味ではなく、通常の文字としてブラウザに解釈させることができます。
XML宣言を記述する
XHTMLはHTMLをXML規格に沿って記述したXMLなのでXML宣言を記述する。
<?xml version="1.0" encoding="Shift_JIS"?>
XML宣言はHTMLファイルの必ず先頭に記述します。
文字コードがUFT-8/16の場合はXML宣言を省略できるます。
IE6にはXML宣言を記述すると後方互換モードで表示する不具合があります。そのためXHTML文書の文字コードをUTF-8にしてXML宣言を省略するのが現実的だと思います(UTF-16は正しく解釈できないブラウザが多い)。
正確な文書型宣言を記述する
正確な文書型宣言の例(XHTML 1.0 Transitionalの場合)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
文書型宣言はXML宣言の直後またはXML宣言を省略した場合は先頭に記入します。
正確な名前空間を記述する
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="ja" lang="ja">
XHTML1.0ではmeta要素で文字コードを記述する
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
文字コードの指定はheadタグの先頭で行ないます(コメントよりも先に記述することに注意する)。

※この場合の文字コードとはXHTML文書(HTMLファイル)の作成時に使用した文字コードです。
ただしPHPファイルなど、スクリプトファイルの中に記述する場合はPHPファイル自体の文字コードとは異なる場合があります。PHPファイルで、XHTML文書のmeta要素等の文字コードの指定は、PHPが書き出すXHTML文書の文字コードを指定することでありPHPファイル自体の文字コード(通常EUC-JPが多い)とは関係がありません。

※XHTML1.1ではmeta要素での文字コードの指定はできない。
MIMEタイプの指定
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
XHTMLのMIMEタイプはapplication/xhtml+xmlが推奨されているが、XHTML1.0 Transitional/Framesetではtext/htmlでも可能とされている。またXHTML1.0 StrictでもW3Cのバリデーションテストではtext/htmlで通る

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。