HOME　＞　XHTML仕様

XHTML仕様

XMLの仕様に沿って改良したHTMLの新バージョンとなる言語XHTML

ショートカット

XHTML
HTMLとの違い
XHTML文書の基本構造

XHTMLとは

XHTML （Extension HTML）

インターネット時代に合わせて多様なニーズに応えるべく、従来のHTMLをXMLの仕様に沿って改良。
次世代ブラウザの基準となる可能性を秘めている。
HTMLの新バージョンとなる言語。
ブラウザにおける互換性問題を解決すべく、厳格な記述が求められている。

XHTMLとHTMLとの違い

正しい論理構造で記述

要素名・属性名は半角英数字の小文字で記述する。

<a href="index.html"> トップページ </a>
HTML4.01は大文字小文字は自由ですが、XMLが適用する文字セットは大文字小文字を厳格に区別するため、すべて小文字で指定する必要がある。
- HTML4.01
```
<A href="index.html"> トップページ </A>
<A HREF="index.html"> トップページ </a>
```
- XHTML向けに修正
```
<a href="index.html"> トップページ </a>
```

属性値は必ず引用符でくくる。

<td width="100"> ～ </td>
XHTMLで省略が不可になった。
HTMLエディタによっては自動的に省略される場合もあるので注意する。
- HTML4.01
```
<table width=500 border=0 cellpadding=0 cellspacing=0> ～ </table>
```
- XHTML向けに修正
```
<table width="500" border="0" cellpadding="0" cellspacing="0"> ～ </table>
```

属性名と同じ属性値でも必ず指定する。

<td nowrap="nowrap"> ～ </td>
属性名と同じ値を指定した場合のみ有効となる、論理型の属性と呼ばれるものがある。
（compact、nowrap、ismap、declare、noshade、checked、disabled、readonly、multiple、selected、noresize、defer）
古いブラウザが対応しないため、属性値のみを記述することになっていたが、XHTMLでは省略ができなくなった。
- HTML4.01
```
<input type="radio" checked>
```
- XHTML向けに修正
```
<input type="radio" checked="checked" />
```

すべての要素に終了タグが必要である。

<br />
<img>、<hr>、<input>、<br>、<meta>、<link> といった空要素も、 /> をつけて終了させる。
XHTMLに非対応ブラウザとの互換性のため、/の前に半角スペースを空けることが推奨されている。
Pタグなどのこれまで終了タグが省略可能だった要素も省略できなくなった。
XHTMLではすべて終了タグが必須となっている。
- HTML4.01
```
<img src=" ～ ">
<p> ～ <p> ～
```
- XHTML向けに修正
```
<img src=" ～ " />
<p> ～ </p><p> ～</p>
```

name属性は廃止予定、 id属性で定義する。

<a id="header"> ～ </a>
HTML4.01では、<a>、<applet>、<form>、<frame>、<iframe>、<img>、<map> の要素にname属性を定義していたが、XHTMLではname属性が廃止予定となる。
XHTMLでは上記要素のname属性のかわりにすべて id属性 で定義する。
- HTML4.01
```
<a name=" ～ "> ～ </a>
```
- XHTML向けに修正
```
<a id=" ～ "> ～ </a>
```

style要素とscript要素

これまで、<style> ～ </style> や <script> ～ </script> の中に  を入れていた。
（古いブラウザ対応として注釈で中身を隠す）
しかし、XMLベースの実装では注釈の内容を除去される可能性がある。
外部スタイルシート や 外部スクリプト を使用するのがよい。

スタイルシート

XHTML文書用のスタイルシートは、XMLの規則が適用される。
- 要素名、属性名は小文字を使う。
- CSSセレクタの中でtbodyが参照されている場合には、明示的に tbody要素を追加する。

実体参照文字

&（CGI参照URLによく含まれる）や空白が属性値に含まれる場合、実体参照文字を使用する。
- 間違い
```
<a href="http://～board.cgi?page=0&mode=move&pass=">掲示板</a>
```
- 正しく修正
```
<a href="http://～board.cgi?page=0&amp;mode=move&amp;pass=">掲示板</a>
```

XML宣言

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

文書の冒頭にXML宣言をする。
（すべての文書でXML宣言を行うことが推奨されている）
XHTML文書の文字コードのデフォルトは UTF-8 か UTF-16 である。
それ以外の場合（Shift_JIS、euc-jp、iso-2022-jp）はXML宣言が特に必須となる。
- Shift_JISのときの宣言
```
<?xml version="1.0" encoding="Shift_JIS"?>
```

DTD（文書型定義）

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

必ず指定し、それにあわせて文書を記述していく必要がある。
HTML4.01のDTDと同じように厳密型、移行型、フレーム用型が用意されている。

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 Transitional

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

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML名前空間

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

言語の指定に lang と xml:lang の双方が使われている。（xml:lang 属性の値が優先）
最新バージョンのXHTML 1.1では lang属性が廃止され xml:lang属性のみとなる。

XHTML文書の基本構造

ページの基本構造

<?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>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" href="pc/style.css" type="text/css" media="all" />
<title>XHTMLドキュメント</title>
</head>

<body>

<h1>タイトル1</h1>
<h2>サブタイトル1</h2>

<p>段落1</p>

<ul>
<li>非序列リスト1 </li>
<li>非序列リスト2 </li>
</ul>

<ol>
<li>序列リスト1 </li>
<li>序列リスト2 </li>
</ol>

<dl> 
<dt> 用語1 </dt>
<dd> 定義1 </dd> 
</dl>

<hr />

<address>連絡先</address>

</body>
</html>

それぞれの要素の解説

文書のはじめにXML宣言をする。（ここでは文字コードにShift_JIS）

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

文書型定義（ここではXHTML 1.0 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">

ヘッダ

<head>

メタタグ

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />

スタイルシートはなるべく外部スタイルシートで指定するとよい。

<link rel="stylesheet" href="pc/style.css" type="text/css" media="all" />

ドキュメントタイトル

<title>XHTMLドキュメント</title>

</head>

ボディ
* インライン要素（画像やテキストなど）はHTML直下に記述できない。ブロック要素にはさむこと。

<body>

いちばん大きい見出し（タイトル）
* 見出しは上から1～7の順で使用。

<h1>タイトル1</h1>

小見出し（サブタイトル）
* さらに見出しがつづくときも同様。

<h2>サブタイトル1</h2>

段落1
* p要素の中にはインライン要素しか入れられない。

<p>

画像挿入
* alt、width、heightの属性を忘れずに指定すること。

<img src=" ～ " width="200" height="40" alt="バナー" />

改行タグ
* brの連続はよくない。（空間をとりたいときはスタイルシートなどで）

<br />

テキスト

バナー画像

</p>

番号なしリスト

<ul>
<li>非序列リスト1 </li>　←　リストアイテムはいくら並んでも入れ子になっても大丈夫。
<li>非序列リスト2 </li>
</ul>

番号つきリスト

<ol>
<li>序列リスト1 </li>
<li>序列リスト2 </li>
</ol>

定義リスト
* dt要素の中に入れられるのはインライン要素のみ

<dl> 
<dt> 用語1 </dt>　←　用語
<dd> 定義1 </dd>　←　定義説明（ひとつの用語に対し、複数の説明があってもよい）
</dl>

罫線

<hr />

アドレス

<address>

リンク

<a href=" ～ ">連絡先</a>

</address>

</body>

</html>

SEO		[PR] 花おまとめローン Windows7 冷え性対策	動画掲示板レンタルサーバーライブチャット SEO