今回の概要と目標 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アプリケーションを 開発するための様々な仕様が新たに盛り込まれている

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

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宣言を記述する