W3C 規格に準拠した HTML & XHTML テンプレート [ デジタルライフ部 ]

2012年09月26日 18:00 (水) カテゴリ：WEBプログラミング>HTML & XHTML

W3C 規格に準拠した HTML & XHTML テンプレート

多くの WEB サイト制作で用いられるマークアップ言語（HTML, XML, XHTML 等）は，ベースとなる文章をタグで囲うだけというシンプルな文法構造から，他のプログラミング言語と比べると簡単で扱いやすい言語です．そしてさらに仮想サーバーが時代に伴って実用的になり，価格やセキュリティ面で敷居が低くなった影響もあって，今までプログラミングと縁がなかった人でも WEB サイトの制作にチャレンジした事がある人も少なくないと思います．

しかし，これほどシンプルで扱いやすい HTML（XHTML）なのですが，サイト制作を重ねていくほど「毎回 body タグの前の定型文を書く事」が億劫に感じてくる人もいると思います．
ここで指している "body タグの前の定型文" とは，主に head タグの中身の事です．

次世代の規格である HTML5 では，冗長であるコードは極力書かないようにデザインされていて大変優秀な言語ですが，現在の主流である HTML4.01 や XHTML1.0 では，この冗長部分である head タグを含めた body タグの前の定型文を毎回書かなければなりません．

さらに HTML (XHTML) はインタプリタ言語のため，ソースコードの文法に問題があったとしても，それが発見されにくいです．そのためこれらのデメリットを考慮すると，厳密な文法で書かれた HTML4.01, XHTML1.0 のテンプレートを用意し利用する事が，効率的な WEB サイト制作を実現する上で１つの有効な手段と言えるでしょう．

そこで今日は，私がウェブサイトを制作するときに使っている自作のテンプレートをご紹介します．

テンプレート

XHTML1.0

XML 宣言

DOCTYPE 宣言

文字コードの指定

スクリプト言語の指定

ページタイトルの指定

外部スタイルシートの読み込み

外部スクリプトの読み込み

HTML4.01

DOCTYPE 宣言

テンプレート

私が普段サイトを制作するときに使っている XHTML1.0 のテンプレートと，もう１つの WEB の主流である HTML4.01 のテンプレートも，このエントリーを書くにあたって作成したので同時に公開しています．しかし，特に理由がないのであれば XHTML1.0 を利用することを勧めます．これは今回作成した HTML4.01 のテンプレートに問題があるのではなく，２つの言語の特性の違いによるものです．

ちなみに，ここで公開している XHTML1.0 と HTML4.01 の両テンプレートは W3C が勧告している規格に完全準拠した文法で書かれています．ですがいくら作者が完全準拠を明記していても気になる方は，目視や Another HTML-lint 等のツールを用いて各自でソースコードを確認してください．

本ソースコードのライセンスについて：

誰でも利用・再配布・改変してもらって構いません．
本ソースコードを利用したウェブサイトを公開する際は，ソースコード内や，実際のサイト上に表示される範囲等に著作権表示をする必要はありません．
本ソースコードを転載・改変した「ソースコード自体」を公開するときは，著作権表示は義務ではないですが，出来ればリンクを貼ったり引用元を記載してもらえると嬉しいです．
本ソースコードを利用したことによるいかなる問題に関して，作者は責任を負いません．

作者：koyocha

XHTML1.0

<?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" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script type="text/javascript" src="test.js"></script>
</head>

<body>

</body>
</html>

これが私がいつも使ってる自作のテンプレートです．ソースコードだけ載せて「あとはご自由に使ってください」では，多くの人に使ってもらえる機会も少ないと思うので，ポイントとなるいくつかの行では，以下で補足の説明をしているので参考にしてください．

XML 宣言

DOCTYPE 宣言

文字コードの指定

スクリプト言語の指定

ページタイトルの指定

外部スタイルシートの読み込み

外部スクリプトの読み込み

XHTML1.0：XML 宣言

XHTML なので XML 宣言をします．このテンプレートでは１行目がそれにあたります．

<?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>

私はいつも UTF-8 の文字コードで書いているので，このテンプレートも UTF-8 になっていますが，ご自身が扱う文字コードに書き直してください．ちなみに日本語で書かれた XML 文書では，以下の文字コードがよく使われています．

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

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

<?xml version="1.0" encoding="EUC-JP"?>

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

<?xml version="1.0" encoding="ISO-2022-JP"?>

また，ここでの文字コードの文字列は大文字小文字を区別しません．そのため「UTF-8」を「utf-8」と記述したり，「EUC-JP」を「euc-jp」としても全く問題ありません．「小文字じゃないとダメだ！」という人は変更しても良いです．個人的にはここでの宣言は大文字派なので，このテンプレートも大文字になっているだけです．

XHTML1.0：DOCTYPE 宣言

XHTML1.0 では３つの DOCTYPE 宣言があり，このテンプレートでは２行目がそれにあたります．

<?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" />

私はいつも「XHTML 1.0 Strict」で書いているので，このテンプレートもそうなっていますが，この行もご自身が扱う DOCTYPE 宣言にしてください．必ず以下の３つの宣言のうちの１つになります．

「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">

DOCTYPE 宣言の違いを具体的に説明すると長くなるためここでは割愛しますが，この宣言の違いが文法エラーの基準として扱われ，ブラウザによってはデザインが崩れる要因になるため，実際には非常に重要な１行になります．そのため理解してこの宣言を選択できるようになってください．

XHTML1.0：文字コードの指定

meta タグ内で文字コードを指定します．このテンプレートでは５行目がそれにあたります．

<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" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />

XHTML がどのような文字コードで書かれているのかを指定します．つまり，結果的には XML 宣言で指定した文字コードと同じものを指定することになります．

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

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

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

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp" />

ちなみに，ここの文字コードの文字列も大文字小文字を区別しません．そのため，大文字で記述したい方は変更して構いません．個人的にここの宣言では小文字で記述したいので，このテンプレートでは小文字になっているだけです．

XHTML1.0：スクリプト言語の指定

XHTML で扱うスクリプトを指定します．このテンプレートでは６行目がそれにあたります．

<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" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />

XHTML 内で（埋め込みや外部ファイルに拘わらず）JavaScript を利用する場合は，ここでスクリプトを指定しておかないといけません．また逆に XHTML 内で一切 JavaScript を利用していない場合，この行の記述の有無が文法的に何らかの問題になることはありません．

そのため私が使うときは，XHTML 内で JavaScript を利用するかの有無がある程度完成するまでわからない場合は，とりあえずこの行は残してコーディングし，既に JavaScript を利用しないと決めている場合はこの行を削除しています．
（私はめんどくさがり屋のため１からこの行を書くよりも，"JavaScript 利用しないときにこの１行を削除するだけで良い" という，このテンプレートの利用スタイルが合っているため，このようになっています）

XHTML1.0：ページタイトルの指定

ページタイトルを指定します．このテンプレートでは７行目がそれにあたります．

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script type="text/javascript" src="test.js"></script>
</head>

ページタイトルにはどのような文字列でも指定できますが，ここで指定したタイトルは SEO やユーザーとって重要な要素の１つになるため，いくらかそれを意識したタイトル付けを行うと良いです．

例を挙げると，検索エンジンに表示される検索結果は，ある一定以上の長さのタイトルだと省略されてしまいます．そのため出来るだけ省略されないようにタイトルを短くするようにしたり，検索キーワードを含めたり，他のサイトと差別化を図るため，ありがちなタイトルを付けないよう意識することで，より多くのユーザーの目に止まるようにするなど様々あると思います．

XHTML1.0：外部スタイルシートの読み込み

外部スタイルシートを指定します．このテンプレートでは８行目がそれにあたります．

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script type="text/javascript" src="test.js"></script>
</head>

どんなにシンプルなページであったとしても，ある程度はスタイルシートを適用したデザイン作りがされます．そのためこの外部スタイルシートを指定する定型行は，大体のソースコードで含まれているはずです．そしてこのテンプレートでは最初から「test.css」というファイルを読み込む指定になっているので，この部分のファイル名を適時書き換えて使用してください．

ちなみに，外部スタイルシートを利用しない場合や，または XHTML 内に直接スタイルを書き込む場合はこの行を削除してください．私が XHTML をコーディングする際は大抵一緒にスタイルシートも作成するので，このテンプレートでは最初から外部スタイルシートの読み込む指定になっています．

初心者の方で，この行を残すのか削除するのか分からない場合は，「外部スタイルシートを用意（作成）した」という確かな記憶がないのなら，この行は削除するのが正しいと思います．

XHTML1.0：外部スクリプトの読み込み

外部スクリプトを指定します．このテンプレートでは９行目がそれにあたります．

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script type="text/javascript" src="test.js"></script>
</head>

近年では JavaScript を用いるサイトは珍しくありません．そのためこのテンプレートでは最初から「test.js」という外部スクリプトファイルを読み込む指定にしています．このファイル名を適時書き換えて使用するか，必要がない場合はこの行を削除してください．

こちらも初心者の方で，「外部スクリプトファイルを用意（作成）した」という確かな記憶がないのなら，この行は削除するのが正しいと思います．

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ページタイトル</title>
<link rel="stylesheet" href="test.css" type="text/css">
<script type="text/javascript" src="test.js"></script>
</head>

<body>

</body>
</html>

これから新規にサイトを制作する場合，その多くが XHTML1.0 で書かれたものになると思います．私も今では HTML4.01 でサイトを作る事がないため，過去に使っていたテンプレートが手持ちにありませんでした．そのためこの HTML4.01 のテンプレートは，今回このエントリーを書くのと同時に作成したテンプレートになります．

こちらも XHTML1.0 と同様に詳しく説明しようかと思ったのですが，基本的な構造は XHTML1.0 のテンプレートと変わらないですし，HTML4.01 は古い仕様のため，ネット上を探せばいくらでも情報を手に入れる事ができます．そのため補足の説明は DOCTYPE 宣言のみにしています．

HTML4.01：DOCTYPE 宣言

HTML4.01 では３つの DOCTYPE 宣言があり，このテンプレートでは１行目がそれにあたります．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

このテンプレートでは「HTML 4.01 Transitional」で宣言しています．もちろん「HTML 4.01 Strict」宣言で利用するのが一番理想ではありますが，あえて古い仕様である HTML4.01 テンプレートを利用してまで Strict 宣言をする変わった使い方をするくらいならば，最初から文法を厳密に扱う XHTML1.0 テンプレートを利用する方が理にかなっていると思います．

そのため，このままの形で利用するユーザーが一番多いと思われる Transitional 宣言の方でテンプレートを作りました．

「HTML 4.01 Strict」で宣言する場合：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

「HTML 4.01 Transitional」で宣言する場合：（今回のテンプレートはこの宣言です）
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

「HTML 4.01 Frameset」で宣言する場合：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

以上３つの DOCTYPE 宣言のうち，どれか１つを必ず指定します．この DOCTYPE 宣言も XHTML1.0 の時と同様に詳しい説明は割愛します．

あとがき

多くのユーザーに使ってもらえるように，説明を付けて張り切ってエントリーを書いたのですが，出来上がってみると逆に見づらくなってしまいました…．JavaScript でいくつかの項目を選択するだけで，それに合ったテンプレートを自動で生成するジェネレーター的な物を作った方が，利便性が高かったのかなぁ…とか全部書いた後で後悔してます．

なのでこのエントリーの需要があれば，ジェネレーター版っぽいのも作るかもしれません．

2012年09月26日 | Permalink | ↑ページの先頭へ