Home > Webデザイン > Web標準に準拠したWebデザイン(2) - XHTMLへの移行

Web標準に準拠したWebデザイン(2) - XHTMLへの移行

XHTMLに移行するぞ、と意気込んでXHTMLについて色々調べてみました。ここではXHTMLについて、極力難しい言葉は使わずに、XHTML初心者向けに噛み砕いた表現でXHTMLについてまとめています。こんなブログでもW3CのXHTMLとCSSの文法チェックを通ることが出来ました。

XHTMLとは

XHTMLとは、「Extensible HyperText Markup Language」の略で、従来のHTMLにXMLの拡張性を取り入れたものです。簡単にまとめると、ハイパーテキスト（テキスト）をタグで囲うことにより、文章の構造(見出しやハイパーリンクなど)を記述していく言語のことです。ここでは深入りししないで、これくらいの説明にしておきましょう。

XHTMLの記述例

このブログのXHTMLの記述例です。

<?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/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTMLの記述例</title>
</head>
<body>
<h1>XHTMLの記述例</h1>
<p>XHTMLの記述例を以下に記述します・・・</p>
</body>
</html>

上から順に解説すると、

<?xml version="1.0" encoding="UTF-8"?>

ここでは、XML宣言とバージョンの指定、使用する文字コードの指定を行っています。ここでは、文字コードをUTF-8と指定しています。環境に合わせて文字コードを指定してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ここでは、XMLのバージョンの指定と、文書型宣言を行っています。文書型には「Strict」と「Transitional」と「Frameset」がありますが、ここでは「Transitional」と宣言しています。

「Strict」は「厳密な」という意味で、厳密に定義された文書型のことです。それに対して、「Transitional」は「移行する」という意味で、Strictに比べるとそれほど厳しくなく、過去の書式も若干許容されます。「Strictを目指してはいるものの、まだ移行途中です」といった所でしょうか。「Frameset」については…よく解りませんでした(^^;。

以下に、StrictとFramesetの文書型宣言も記述しておきます。

【XHTML 1.0 Strict】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

【XHTML 1.0 Frameset】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

次に、html要素に各種属性を設定します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

xmlns属性で、名前空間を指定します。名前空間とは、様々な場面で使われる名前の衝突（同じ名前が複数あること）を避けるために用いられる概念です。例えば「ゴジラ」というと、有名な日本映画ですが、野球界（という空間）では松井秀喜を指します。この時の野球界という空間が、名前空間と対応します。XHTML 1.0では、http://www.w3.org/1999/xhtml を指定します。

また、言語の属性には、日本語「ja」を指定します。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

ここでは、文字コードの指定を行っています。XHTML文書では、 head 要素内の、meta http-equive で、文字コードを指定する必要があります。

HTMLとXHTMLの違い

タグや属性は全て小文字で記述する

XHTMLでは、タグや属性は全て小文字で記述しなければなりません。

例）
○ <p>XHTMLとは</p>
× <P>XHTMLとは</P>

終了タグの省略の禁止

</p>や、</li>などの、終了タグの省略が禁止されています。

例）
○ <p>XHTMLとは</p>
× <p>XHTMLとは

空要素の記述方法

XHTMLでは<br>や<hr>などの空要素タグ（開始タグ、終了タグがないタグ）は、<br />、<hr />と記述します。古いブラウザとの互換性を考慮して、/の前にスペースを入れることが推奨されています。

例）
○ 改行<br />
× 改行<br>

属性値は"…"で囲む

XHTMLでは、全ての属性値を"…"で囲まなければなりません。

例）
○ <A href="～" target="_top">
× <A href="～" target=_top>

属性名の省略の禁止

HTMLでは、checkedなどの属性名が省略されることがありましたが、XHTMLでは省略が出来ません。

例）
○ <input type="radio" checked="checked">
× <input type="radio" checked>

属性値の&は、&amp;と記述する。

CG呼び出しのパラメタ区切りなどで使われる&を&amp;と記述しなければなりません。

例）
○ <a href="search?hl=ja&amp;lr=lang_ja&amp;…">
× <a href="search?hl=ja&lr=lang_ja&…">

スクリプトやスタイルシートの外部ファイル化

XHTMLでは、<!--コメント内-->のコメント内部に「<」「>」「&」などが含まれる場合は、外部ファイルを用いることになっています。

例）
○ <link rel="stylesheet" href="….css" type="text/css" />

name属性の廃止

XHTML 1.1ではname属性が廃止されていますので、XHTML 1.0でもなるべくid属性を使うようにしましょう。

【参考記事】
XHTMLとは何だろうか
XHTML入門

XHTML文法チェックの方法

上記のことを、いちいち確認するのは大変な作業ですので、文法チェックを行ってくれるサイトを紹介します。まずは文法チェックを行ってみて、エラーがある箇所を修正していくようにしましょう。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
日本語でHTML文書の文法チェックを行ってくれるサイト。この記事を書いている時点で、トップページは86点でした。

http://validator.w3.org/
W3CのHTML文法検証サービス。

http://jigsaw.w3.org/css-validator/
W3CのCSS検証サービス。

Tags :
Xhtml?0?Target?移行?1?

カテゴリ「Webデザイン」の最新記事

カテゴリ「Webデザイン」 の全ての記事を読む

「xhtml」に関連する商品を...

Home > Webデザイン > Web標準に準拠したWebデザイン(2) - XHTMLへの移行

Popular Entries
Categories
Search Engine Cloud
Archives
Search
Feeds

Page Top