XHTMLの文書構造
html
文書ルート
2008/3/26
構文
説明
html要素は、文書ルートを表します。
XHTML文書でも<html>となります。
xmlns属性には、必ずhttp://www.w3.org/1999/xhtmlを指定します。
html要素内には、head要素とbody要素が1回ずつ出現する必要があります。
XHTML 1.0の場合、xml:lang属性とlang属性を両方指定します。
XHTML 1.1の場合、lang属性は不要です。
/* XHTML 1.0 （xml:lang属性とlang属性を両方指定）*/ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> /* XHTML 1.1 */ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| i18n | STF | S | 任意 | ||
| id="%ID" | ユニークな識別子。 | STF | S | 任意。DTD宣言で文書型を指定するため不要。 | |
| xmlns="%URI" | 名前空間を指定。 | STF | S | 固定。"http://www.w3.org/1999/xhtml" | |
サンプル
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <!-- ヘッダ情報 --> </head> <body> <!-- 本文 --> </body> </html>
head
ヘッダ情報
2008/3/26
構文
説明
head要素は、文書のヘッダ情報を表します。
head要素内には、文書のタイトル（title要素）が1回出現する必要があります。
それ以外は必要に応じて、メタ情報（meta要素）、関連リンク（link要素）、外部スクリプトファイルの読み込み（script要素）などを指定します。
| XHTML 1.0 | script | style | meta | link | object | isindex |
|---|---|
| XHTML 1.1 | script | style | meta | link | object |
<head profile="http://purl.org/net/uriprofile/"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>XHTML | PHP & JavaScript Room</title> <script type="text/javascript" src="common.js></script> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head>
属性
title
文書のタイトル
2008/3/26
構文
説明
title要素は、文書のタイトルを表します。
title要素は、head要素内に記述します。
title要素内に記述可能な値は、文字列（%CDATA）のみです。 ここで指定した文字列は、ブラウザのタイトルバーに表示されます。 「サイト名 » コンテンツ名」のように、文書の内容がわかるタイトルを指定しましょう。
タイトルバーの文字化け対策として、文書の文字コードを定義するmeta要素より後にtitl要素を記述しましょう。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP & JavaScript Room</title> </head>
title要素は、URI同様検索エンジン対策に重要な要素です。 検索結果に表示されるタイトルの文字数は、Googleで半角50字くらい、Yahooで全角40文字です。 それ以上になると「...」で省略されます。 長ければよいというものではないので、全角なら20～30字前後に収めるようにしましょう。
Google検索結果またGoogleでは、検索結果に表示されるドメインに紐づくページのタイトル表示に影響しますので、タイトルには下記のように規則性を持たせたることをおすすめします。
TOPページ：「サイト名」
第1階層ページ：「ページタイトル｜サイト名」
第2階層ページ：「ページタイトル｜カテゴリ｜サイト名」
検索結果属性
body
文書の本文
2008/3/26
構文
説明
body要素は、文書の本文を表します。
body要素に直接テキストを指定することはできません。
テキストは必ずp要素などのブロック要素でくくる必要があります。
<body> <p>文書の本文。</p> <p>文書の本文。</p> <p>文書の本文。</p> </body>
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| onload="%Script" | ページが完全に読み込まれた時に実行する処理を指定。 | STF | S | 任意 | |
| onunload="%Script" | ページが閉じられた時または他ページに移動した時に実行する処理を指定。 | STF | S | 任意 | |
| background="%URI" | 背景画像のURIを指定。 | TF | - | 任意 | CSS（background-imageプロパティ）で代替。 |
| bgcolor="Color" | 背景色を指定。 | TF | - | 任意 | CSS（background-colorプロパティ）で代替。 |
| text="Color" | テキストの色を指定。 | TF | - | 任意 | CSS（colorプロパティ）で代替。 |
| link="Color" | リンクの色を指定。 | TF | - | 任意 | CSS（a要素のcolorプロパティ）で代替。 |
| vlink="Color" | 訪問済みリンクの色を指定。 | TF | - | 任意 | CSS（a要素のcolorプロパティ）で代替。 |
| alink="Color" | アクティブ時のリンクの色を指定。 | TF | - | 任意 | CSS（a要素のcolorプロパティ）で代替。 |
body要素のbackgroud属性、bgcolor属性、text属性、link属性、vlink属性、alink属性は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。 そのためこれらの属性は、CSSで代替しましょう。
- background属性 ⇒ CSS（colorプロパティ）で代替。
- bgcolor属性 ⇒ CSS（colorプロパティ）で代替。
- text属性 ⇒ CSS（colorプロパティ）で代替。
- link属性 ⇒ CSS（a要素のcolorプロパティ）で代替。
- vlink属性 ⇒ CSS（a要素のcolorプロパティ）で代替。
- alink属性 ⇒ CSS（a要素のcolorプロパティ）で代替。
<style type="text/css">
body {
margin:0 auto; padding:0;
background:#fff url(/content/img/bg.gif) repeat top left; /* 背景 */
color:#000; /* 文字色 */
}
a {
color:blue; /* リンク色 */
}
a:hover,
a:active {
color:red; /* マウスが乗った時、アクティブ時のリンク色 */
}
a:visited {
color:purple; /* 訪問済みリンク色 */
}
</style>