今回の概要と目標 0:25

HTML入門講座3回目は、HTMLのバージョンとDOCTYPE宣言について学習し、最終的には、HTMLのバージョンに合わせて、DOCTYPE宣言を記述できるようになりましょう。

今回のゴール

RERUN

新しいウインドウで表示する

HTMLのバージョン 1:33

HTMLにはいくつかのバージョンがあります。
そのバージョンによって 利用できる要素や属性、記述のルールなどが異なります。

現在も、要素や属性が追加されたり、廃止されたり、または意味や役割が変更されたりしながらバージョンをアップを繰り返しています。

主に利用されているHTMLのバージョン

HTML4.01
に勧告されたバージョン。
視覚的な表現を行なう為の要素や属性を非推奨（CSSという言語に移行）とし、文章構造のみを記すというHTML本来の目的に沿ったバージョン
XHTML1.0
に勧告されたバージョン。
XHTMLの「X」は「エクステンシブル」という意味。具体的にはXMLという別の言語の仕様に従って定義しなおしたHTML。HTMLとしては大きな変更はありませんが、タグは小文字で記述するなどといったルールがより厳格になったバージョン
HTML5
に勧告された現時点での最新バージョン。
HTML5はより人間にも機械にも理解しやすい言語になるとともに、Webアプリケーションを 開発するための様々な仕様が新たに盛り込まれている

2018年6月現在での最新版は、に勧告された「HTML5.2」になります。

Web技術の標準化団体

さて、HTMLにはバージョンがあるという事を書きましたが、誰が管理しているのでしょうか？
実は、WebにはWeb技術を標準化しているW3Cという非営利団体があります。

W3C（World Wide Web Consortium）
Web技術の標準化を目的とした非営利団体。
に創設。

HTMLの各バージョンは、このW3Cが仕様をまとめて勧告をしています。

DOCTYPE宣言 6:55

なぜ、こんなにHTMLのバージョンの話をしているかというと、 （X）HTMLは、どのバージョンの仕様に基づいて(X)HTMLを記述しているかを宣言する必要があるのです。その宣言のことを、DOCTYPE宣言と言います。

具体的には、HTML5より前の各バージョンには、バージョン毎にDTD（Document Type Definition：文書型定義）と呼ばれるファイルがW3CのWebサイト内にあります。そのファイルには、そのバージョンで使用できる要素や属性の情報、どこに配置できるのかなどの情報が記されています。

DTD
DTD（Document Type Definition：文書型定義）とは、HTMLのバージョン毎に、そのバージョンでどの要素や属性が使用できるのか、どこにどの順番で配置できるのか、などが独自の文法で記述されているファイル

このDTDをHTMLファイルの冒頭で指定することで、どのバージョンの仕様に基づいて記述されたHTMLなのかを示します。これが、DOCTYPE宣言（文章型宣言）の方法です。

DOCTYPE宣言
どのHTMLのバージョンに基づいて記述されたHTMLファイルなのかを、HTMLファイルの冒頭でDTDの指定によって宣言すること

このDOCTYPE宣言の記述方法はHTMLのバージョンによってことなります。

HTML5以降のDOCTYPE宣言

それではまず、HTML5以降のDOCTYPE宣言を見ていきましょう。
先ほど、「 HTML5より前の（X）HTMLでは、どのバージョンの仕様に基づいて記述しているかをDOCTYPE宣言で指定する必要がある」と言いました。実は、HTML5にはDTDがありません。

従って、HTML5にはDOCTYPE宣言は不要なのです。
ですが、ほとんどのブラウザは、DOCTYPE宣言をブラウザの表示モード（レンダリングモード）を切り替える用途にも使っているのです。 どういう事かと言うと、DOCTYPE宣言があれば、「標準準拠モード」というモードで表示し、DOCTYPE宣言がなければ、「互換モード」と言うモードで表示してしまいます。

互換モードでは、昔のホームページといった認識になり、具体的にはCSSというデザインを行なう為の言語が正しく解釈されず、レイアウトが崩れる可能性などがあります。

従って、互換モードで表示させない為に、HTML5以降でも必要最低限のDOCTYPE宣言をつけます。

以下が、HTML5以降のDOCTYPE宣言になります。 

<!DOCTYPE html>

*.DOCTYPE宣言は大文字と小文字を区別しないため、すべて大文字、すべて小文字で記述しても問題ありません。

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宣言を書いてみよう！ 11:27

では、実際にDOCTYPE宣言を追加してみましょう。

  1. 「Chapter03」フォルダ内の「index.html」をテキストエディタで開く
    （テキストエディタでHTMLファイルを開くときは、テキストエディタの画面内か、アイコンにそのファイルをドラッグ＆ドロップして開く。）
  2. 下記を参考に、1行目にHTML5のDOCTYPE宣言を追加。
Chapter03/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>webの勉強を開始</title>
</head>
<body>
  伝説のwebクリエーターに、おれはなる！
</body>
</html>
  1. 上書き保存し、ブラウザで開く
  2. ブラウザで見た目が変わっていないことを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 13:14

「Chapter03」› 「quest」フォルダ内の「index.html」を開いて下記のHTMLを作成して下さい。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • HTMLのバージョン： HTML4.01
    • DTD： Transitional
完成イメージ

RERUN

新しいウインドウで表示する

解答例

まとめ 15:48

HTMLのバージョンとDOCTPE宣言が何かわかりましたか？

  • HTMLにはバージョンがある
  • バージョンによって使える要素や属性が異なる
  • HTMLファイルの冒頭にDOCTYPE宣言を記述する