W3C準拠XHTMLテンプレート

2010.10.29crossnodeHTML


XHTMLファイルを作成する際に最低限必要な要素やよく使う要素が入ったソースです。まず基本的な部分だけでもエラーが出ない状態を雛形にしておけば初歩的な修正は減りますよね。
下記のソースをコピーしてW3C Markup Validation ServiceAnother HTML-lint gatewayの直接入力でチェックしてみましょう。W3Cをパスし、lintでも100点でエラーもなく「たいへんよくできました」と評価されるはずです。

W3C準拠XHTMLテンプレート

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ページタイトル / サイト名</title>
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード,keyword,カンマで区切る" />
<link rev="made" href="mailto:sample@sample.com" />
<link rel="index" href="index.html" />
<link rel="next" href="next.html" />
<link rel="prev" href="prev.html" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<h1>ページタイトル</h1>
<h2>見出し</h2>
<p>段落</p>
<p>段落</p>
</body>
</html>

さっそくソースを追っていきましょう。
ほとんど定型で使っちゃうので、よく分からなくても実装に影響のない部分も多いですが、ひと通り見てみましょう。

01 : XML宣言

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

このテキストファイルがXML形式で記述されていることを宣言します。W3C勧告では、このXML宣言を使うよう強く奨励されていますが、例外として文書のキャラクタエンコーディング(文字コード)が UTF-8 か UTF-16の場合には省略することが許されています。
W3Cで認められた条件で宣言を省略してチェックを通っても、lintでは省略すると必ず大きく減点されてしまいます。
lintで減点されるのなら省略しなければいいじゃない。と思う人もいるかと思いますが、このXML宣言があるとIE6では他のブラウザと表示結果がずれてしまうバグがあるのです。
それを知ってしまった制作者は、長らく続いている議論の渦中へと巻き込まれていくわけです。

詳しくはこちらの記事で。

02 : 文書型宣言

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

この文書がどの形式にのっとって書かれているか宣言します。DOCTYPE宣言とも呼ばれていて、htmlタグよりも前にまずDOCTYPE宣言をしなければなりません。上記の例では「XHTML 1.0 Strict」という部分で、「XHTMLバージョン1.0の厳密型」に基づいて記述することを宣言しています。
Strictの他にTransitional(移行型)というものもあり、こちらで宣言した場合は前のバージョンで使われていたけど今回から非推奨になったというタグや属性の使用が許されます。
Strict宣言してハックするよりも、Transitional宣言して非推奨のタグ等を使うという人もいるようですので、StrictもTransitionalもどちらが良い悪いと切り捨てずに柔軟に使い分けるというのも手かも知れませんね。

03 : htmlタグ、名前空間宣言、言語指定

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

htmlタグは文字通り「ここからhtmlを記述しますよ」というタグです。「xmlns=”http://www.w3.org/1999/xhtml”」という記述は、このタグの中身がxhtmlとして扱われるように指定する名前空間宣言というものです。
ちなみに値に入っているURIにアクセスしてみても仕様書を見られるわけではありません。
「xml:lang=”ja”」ではxmlテキスト(=このhtmlタグの中身)に対して、「lang=”ja”」はhtmlタグに対して日本語として表示するよう指定しています。

04 : headタグ

<head>

headタグ内にはページタイトルや文字コードの指定、外部ファイルの読み込み文などを記述します。

05 : Content-Type指定

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

この文書がhtml形式のテキストデータで、文字コードはutf-8であるということを指定しています。「text/xhtml」という指定は用意されていないので、XHTMLも「text/html」と指定します。
charsetの部分を記述しなかったり、ファイルの実際の文字コードと違うものを指定してしまうと、文字化けの原因となるので気をつけましょう。また、titleタグや、JSやCSSの記述/読み込み文はこの指定よりも後に書きましょう。文字コードを指定する前にテキストを扱うと文字化けの原因になります。

06 : Content-Script-Type指定

<meta http-equiv="Content-Script-Type" content="text/javascript" />

「JavaScriptというスクリプトを扱いますよ」という指定です。JS自体の記述はこの指定よりも後に書きましょう。指定文よりも先に実行されてしまったら指定の意味がないですからね。JSを使わないページに書いてあっても問題はないので、テンプレートとしてデフォルトで書いておく人もいるようですね。

07 : Content-Style-Type指定

<meta http-equiv="Content-Style-Type" content="text/css" />

CSSを使ってスタイル指定をしますよという指定です。CSSを使用する時には必ず必要な指定ですが、CSSを使わない事はないので全てのページに必ず書くものと思ってよいでしょう。そしてCSS自体はこの指定よりも後に書きましょう。

08 : titleタグ

<title>ページタイトル / サイト名</title>

このページのタイトルを記述します。ブラウザの最上部に表示されるあれです。

09 : description設定

<meta name="description" content="説明文" />

このサイトまたはページの説明文を記述します。Google等の検索結果のサイト名の下に出る文章などに使われるので、この文を見た人がこのサイトがどういう内容なのか分かりやすく、できれば思わず訪れてみたくなるような簡潔かつ魅力的な文章が書けるといいですね。
W3Cでもlintでも必須ではありませんが、検索サイトからユーザー誘導するためにも基本的に書くようにしましょう。

10 : keywords設定

<meta name="keywords" content="キーワード,keyword,カンマで区切る" />

このサイトまたはページに関連するキーワードを記入します。ダブルクォーテーションの中でカンマで区切って複数の単語を記入できます。たくさんの人に訪れてもらいたいのでいろいろな関連キーワードを詰め込みたくなるところですが、あまりたくさんキーワードが書いてあると検索エンジンスパム扱いされてしまうこともあるという噂もあるので、本当に関連のあるものに絞って書きましょう。
W3Cでもlintでも必須ではありませんが、検索サイトからユーザー誘導するためにも基本的に書くようにしましょう。

11 : メールアドレス

<link rev="made" href="mailto:sample@sample.com" />

このサイトの管理者のメールアドレスを記述して、サイトを見たユーザーがコンタクトしやすくします。ただ、迷惑メール防止のために書かない人も多いようです。W3Cでは必須ではなく。lintでは減点のないエラー扱いです。

12 : ナビゲーション機能設定

<link rel="index" href="index.html" />
<link rel="next" href="next.html" />
<link rel="prev" href="prev.html" />

このサイトのインデックスや、このページの前後のページを指定します。ブラウザにナビゲーションボタンが表示される便利な機能。とはいうもののIEなどメジャーなブラウザはみな非対応なのでお目にかかった事のない人が多いようです。W3Cでは必須ではなく。lintでは減点のないエラー扱いです。

13 : 外部CSS読み込み

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

CSSファイルを読み込むときに使います。1つの読み込み文で複数のファイルを読み込むことはできません。その場合は読み込み文を複数書きます。

14 : 外部JS読み込み

<script type="text/javascript" src="sample.js"></script>

JSファイルを読み込むときに使います。1つの読み込み文で複数のファイルを読み込むことはできません。その場合は読み込み文を複数書きます。

コメントを残す


ページトップへ