コーディング
本気で学ぶ!HTML入門#03
【HTML入門】HTMLのバージョンとDOCTYPE宣言

さぁ、HTML入門の3回目はHTMLの「バージョンとDOCTYPE宣言」について学習しましょう。
今回は、「バージョンに合わせたDOCTYPE宣言を書けるようになる」のが目標です。
少し固い話、というか歴史的な話なんかも入れながら見て行くので長いですが、頑張りましょう。
目次
HTMLのバージョン
HTMLには「1」とか「2」とか、バージョンがあります。
バージョンが上がるに連れて、要素や属性がが追加されたり、廃止されたり、または意味や役割が変更されたりしてバージョンをアップを繰り返しています。
2016年5月現在での最新版は「HTML5」になります。
そもそもHTMLはいつ誰が作ったのかというと、1989年、CERN(欧州原子核研究機構)にて、ティム・バーナーズ=リーさんが開発しました。
2016年現在では主に以下のバージョンのHTMLを使ったホームページが多いです。
- HTML4.01
- に勧告されたバージョン。視覚的な表現を行なう為の要素や属性を非推奨(CSSという言語に移行)とし、文章構造のみを記すというHTML本来の目的に沿ったバージョン
- XHTML1.0
- に勧告されたバージョン。XHTMLの「X」は「エクステンシブル」という意味。具体的にはXMLという別の言語の仕様に従って定義しなおしたHTML。HTMLとしては大きな変更はありませんが、タグは小文字で記述するなどといったルールがより厳格になったバージョン
- HTML5
- に勧告された現時点での最新バージョン。HTML5はより人間にも機械にも理解しやすい言語になるとともに、Webアプリケーションを 開発するための様々な仕様が新たに盛り込まれています!
なんかややこしい。
って感じると思いますが、
今は「HTML5」が主流なんだ!
って、とりあえず思っといてもらえれば大丈夫です。
実際、現時点(2016年5月)では、新たにホームページを制作するなら「HTML5」で制作することがほとんどです。
ただ、すこし気を付けて欲しいのが、なんでもかんでも新しいHTMLを使えばいいという訳ではないです。
実は古いブラウザが対応していない事もあります。
例えば、HTML5はInternet Explorerの「8」以下には対応していません。
「そんな古いブラウザ使ってる人いるの?」
って思うかもしれませんが、います。
確かに少数ですが・・・。
なのでInternet Explorer8で見ているユーザーを対象にするときは、それなりの対策をする必要があります。
Web技術の標準化団体
さて、HTMLにはバージョンがあるという事を書きましたが、誰が勧告しているのでしょうか?
実は、WebにはWeb技術を標準化している非営利団体があります。それが
W3Cです。
- W3C(World Wide Web Consortium)
- にHTMLを開発したティム・バーナーズ=リーさんが創設した、Web技術の標準化を目的とした非営利団体
HTMLの各バージョンは、このW3Cが仕様をまとめて、勧告をしています。
また機会があれば、HTMLやWebの歴史の記事を書きたいと思います。
DOCTYPE宣言
なぜ、こんなにHTMLのバージョンの話をしているかというと、
実は、
具体的には、HTML5より前のバージョンには、DTDと呼ばれるファイルがW3Cのサイト内にあります。そこにはHTMLのバージョン毎に、使用できる要素や属性の情報や、どこに配置できるのか、などの情報が記されています。
- DTD
- DTD(Document Type Definition:文書型定義)とは、どのHTMLのバージョンで、どの要素や属性が使用できるのか、どこにどの順番で配置できるのか、などが記されいるファイル
このDTDをHTMLの冒頭でバージョンに合わせて指定することで、どのバージョンの仕様に基づいたHTMLかを宣言します。
それを、DOCTYPE宣言と言います。
- DOCTYPE宣言
- どのバージョンの(X)HTMLで作成しているかを示す為に、HTMLのバージョン毎に用意されている、DTDファイルをHTMLの冒頭で指定すること
なので、HTML5より前のバージョンのHTMLでは必ず、HTMLファイルの冒頭にDOCTYPE宣言を記述しましょう。
DOCTYPE宣言のもう1つの役割
ほとんどのブラウザは、DOCTYPE宣言をブラウザの表示モード(レンダリングモード)を切り替える用途にも使っているのです。
どういう事かと言うと、DOCTYPE宣言があれば、「標準準拠モード」で表示し、DOCTYPE宣言がなければ、「互換モード」で表示します。
互換モードでは、「HTMLで視覚的な表現も行なっている昔のホームページ」といった認識になり、具体的にはCSSというデザインを行なう為の言語が正しく解釈されず、レイアウトが崩れる可能性などがあります。
従って、互換モードで表示させない為にも、DOCTYPE宣言は必ず記述しましょう。
HTML5のDOCTYPE宣言
先ほど、「
つまり、HTML5ではDOCTYPE宣言は不要です。
・
・
・
ただ、
・
・
・
HTML5でもDOCTYPE宣言を行なわなければ、「互換モード」で表示してしまい、正しく表示されなくなる可能性があります。
従って、そうなることを回避する為だけに、HTML5でも必要最低限のDOCTYPE宣言をつけます。
実際に、HTML5のDOCTYPE宣言は以下になります。
<!DOCTYPE html>
これを、前回作ったHTMLの基本構造と合わせるとこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ここにタイトル</title>
</head>
<body>
<p>ここに本文を入れる</p>
</body>
</html>
これで、HTML5でも「標準モード」で表示する」ことができます。
HTML5より前のバージョンでのDOCTYPE宣言
これからはHTML5が主流なので、実際に使う事は少ないかもしれませんが、昔のホームページなどを触る時に登場するかもしれませんので、少し触れておきます。
3種類のDTD
HTML5より前のバージョンのDOCTYPE宣言は、同じバージョンでも3種類のDTDがあり、その種類によってDOCTYPE宣言の記述が異なります。
その3種類というは、「Strict」、「Transitional」、「Frameset」の3つです。
- Strict
-
仕様に厳密なDTDで、W3Cが非推奨としている要素や属性、またフレームを使用することができません。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Transitional
-
文法があまいDTDで、W3Cが非推奨とする要素や属性も使えますが、フレームは使えません。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Frameset
-
フレーム用のDTDで、Transitionalに加えて、フレームも使えます。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
【演習】DOCTYPE宣言を書いてみよう!
では、前回作ったHTMLファイルをテキストエディタで開き、DOCTYPE宣言を追加してみましょう。
index.htmlを開き、DOCTYPE宣言を追加
-
前回編集したHTMLファイル(index.html)をテキストエディタで開きましょう。
(テキストエディタでHTMLファイルを開くときは、そのファイルをテキストエディタの画面内か、アイコンにドラッグ&ドロップしたら開けましたね。) -
下記を参考に、1行目にHTML5のDOCTYPE宣言(
<!DOCTYPE html>
)を追加しましょう。<!DOCTYPE html> <html lang="ja"> <head> <title>ここにタイトル</title> </head> <body> <p>ここに本文を入れる</p> </body> </html>
- 記述できたら、上書き保存しておきましょう。
-
ブラウザで確認(index.htmlをダブルクリック)
(見た目に何も変更はないですが、ブラウザの表示モードは「標準モード」で開かれているはずです。)
まとめ
今回は、HTMLのバージョンとDOCTYPE宣言という内容を歴史的な背景も少し入れながらやってみました。
とりあえず、今回覚えておいて欲しい事は2つです。
- HTMLにはバージョンがあって、2016年5月現在の主流はHTML5
- HTMLファイルの冒頭にはDOCTYPE宣言を行なう
以上です。
次回は、「meta要素の役割との文字コードの指定方法」という内容をやって行きましょう。