DTDとはいったい何でしょうか?
DTDはドキュメントタイプの定義のことで、HTML文書で使用する属性や要素、構造などを定義したものになります。
例えば、「XHTML 1.0 Transitional」のDTDはこのように定義されています。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
HTMLを書く際、まずはページ先頭のドキュメントタイプ宣言「<!DOCTYPE>」の箇所にて、どのDTDのバージョンで書くのかを宣言する必要があります。
「HTML 4.01」や「XHTML 1.0」などのバージョンによって書き方が異なるため、文書の型を宣言した上で、そのルールにそった書き方をするようにしましょう。
2000年代初頭から運営されている古いホームページの場合、「HTML 4.01」のDTDで書かれていることが多いです。一方、「XHTML 1.0」は当サイトを開設した2009年頃の主流でしたが、2023年の現在、最新バージョンは「HTML5」となっています。
「HTML 4.01」(かなり昔)→「XHTML 1.0」(以前までの主流)→「HTML5」(最新版)
このDTDの種類についてですが、ホームページ作成ソフトのDreamweaverを参考にすると、テンプレートには7種類のDTDが用意されています。
この「HTML 4.01」や「XHTML 1.0」については、さらに「Transitional」や「Strict」といったタイプに分かれており、緩さや厳格さの点で違いがあります。他にも、フレームを使用する際の「Frameset」のDTDなどもあります。
「XHTML 1.0」と「HTML5」ではどちらを採用するべきか?
DTDには、主にXHTMLとHTMLとの2種類があります。
このXHTMLとHTMLは、歴史的に紆余曲折があり、その経緯についてはこちらに記載があります。
(参照: HTML Standard 1.6 History)
概要でいえば、当初、正確さと拡張性に優れた「XHTML」での標準化を推進するW3Cと、開発コストが低く、互換性も高い「HTML」を支持するブラウザベンダーとの間で意見が対立していました。
しかし、2004年にブラウザベンダーのエンジニアたちがWHATWGを立ち上げ、HTMLの推進に力を入れた結果、2009年にW3CでのXHTMLの更新作業が中止されています。結局、ウェブの標準化にはブラウザでの実装が不可欠であり、ブラウザベンダーが重要な役割を果たしているものと思われます。
最終的に、現在はW3CとWHATWGが連携して、HTMLの最新バージョンであるHTML5の開発に取り組んでいます。
ブラウザは引き続きXHTMLをサポートしていますが、HTML5が普及している現在、XHTMLを使用する意味はあまりありません。また、「HTML 4.01」についても、現在は「4」ではなく「5」の「HTML5」が普及しているため、こちらを選択する意味もありません。
当サイトを開設した2009年頃は「XHTML 1.0 Transitional」が主流でしたが、2016年頃から徐々に「HTML5」へと移行するメディアが多くなり、2023年の現在、大手サイトではほぼ「HTML5」のDTDが採用されています。
- HTML 4.01 Transitional → かなり古い(200x年頃)
- HTML 4.01 Strict → かなり古い(200x年頃)
- XHTML 1.0 Transitional → 以前までの主流
- XHTML 1.0 Strict → あまり見たことない(厳格なバージョン)
- XHTML Mobile 1.0 → ガラケーサイト用のため、ほぼ消滅
- XHTML 1.1 → あまり見たことない
- XHTML 2 → 開発作業が中止され、HTMLへ統一。
- HTML 5 → 最新バージョン(2016年頃から主流へ)
そのため、今後は最新の「HTML5」を選択されるとよいでしょう。
ちなみに、文字コードについては「HTML5」でも「XHTML 1.0」でも「UTF-8」を選択しておけば間違いありません。
HTML5のDTDとLiving Standard
最新のHTML5では、以前までのXHTMLと比べてシンプルなDTDとなっており、単に<!DOCTYPE html>と記述するだけで済みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
コピー
大文字、小文字の違いで<!doctype html>や<!DOCTYPE HTML>などのケースもありますが、どちらでもかまいません。
このHTML5の仕様書についてですが、2019年5月にW3CとWHATWGが協力して単一バージョンのHTML5を開発することになりました。
そのため、W3C版のHTML5の仕様ページであった「https://www.w3.org/TR/html5/」 にアクセスすると、現在はWHATWG版の「HTML Living Standard」の公式ページにリダイレクトされます。
最新版だったHTML5.2についても廃止(Reired)されており、5.1や5.3も廃止されています。
その代わりに、常に最新版が上記のページで公開されることになったため、HTML5の仕様についてはそちらを参考にされることをおすすめします。「Living Standard」と呼ばれていますが、Webの最新状況に合わせて常に改良が加えらえているため、現在進行中のライブで生きているWeb標準という意味になります。
HTMLの書き方については、空要素の<br>と<br />などについて「半角スペースとスラッシュ」のあり・なしで違いがありますが、「XHTML 1.0」から「HTML5」へ移行しやすいように配慮されており、どちらでも問題なくなっています。
既存サイトを「HTML5」へ修正する方法については、こちらのページなどをご参照ください。
→ HTML5への修正方法
ページが出来あがってからHTMLの文法チェックをして、おかしなところを修正していけばよいでしょう。
「XHTML 1.0 Transitional」のDTDのサンプル
以前まで当サイトは「XHTML 1.0 Transitional」のDTD、文字コードは「UTF-8」で作成していましたが、以下のように「XML宣言」も記載していました。
<?xml version="1.0" encoding="UTF-8"?>
この「XML宣言」はIEバグの関係で省略されているケースもありますが、以下のような記載が一般的です。
<?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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="" type="text/css" />
</head>
<body>
コピー
もしくは、「XML宣言」の<?xml version="1.0" encoding="UTF-8"?>を省略した形でもよいでしょう。
DTDの定義自体は英語で書かれているため、「Transitional//EN」の「EN」についてはそのままでかまいませんが、「xml:lang="ja" lang="ja"」の箇所については日本語の「ja」を指定します。
metaタグやタイトルタグの位置についてはサイトによってバラつきがあり、タイトルタグを最後に持っていったり、あるいはできるだけ前に出したりとケース・バイ・ケースです。
文字コードについては「euc-jp」や「shift-jis」でも問題ないことが多いですが、文字化けすることもあるため、一般的な「UTF-8」を選択しておけば間違いないでしょう。
「XHTML 1.0 Transitional」では、改行タグの<br>を<br />と書いたり、<hr>を<hr />と書いたりといったルールがありますが、多少の間違いがあってもブラウザでは正常に表示されます。
ちなみに、「XHTML 1.0 Strict」については、XHTML 1.0の厳格なバージョンです。
「Transitional」は移行期の意味があり、一部では古いタグや属性も使用できるのに対し、「Strict」はより厳密なルールが適用されるため、古いタグや属性が使用できず、新しい仕様に完全に準拠した書き方が求められます。
一般的なサイトでは「Strict」で書く必要性はないため、「Transitional」を選択されるとよいでしょう。