今回の概要と目標 0:25
HTML入門講座3回目は、HTMLのバージョンとDOCTYPE宣言について学習し、最終的には、HTMLのバージョンに合わせて、DOCTYPE宣言を記述できるようになりましょう。
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宣言は大文字と小文字を区別しないため、すべて大文字、すべて小文字で記述しても問題ありません。
HTML5より前のバージョンでのDOCTYPE宣言
これからはHTML5が主流なので、実際に使う事は少ないかもしれませんが、昔のホームページなどを触る時に登場するかもしれませんので、少し触れておきます。
3種類のDTD
HTML5より前のバージョンのDOCTYPE宣言は、同じバージョンでも3種類のDTDがあり、その種類によってDOCTYPE宣言の記述が異なります。
その3種類というは、「Strict」、「Transitional」、「Frameset」の3つです。
- Strict
- 仕様に厳密なDTDで、W3Cが非推奨としている要素や属性、またフレームという機能を使用することができません。
- Transitional
- 文法がゆるいDTDで、W3Cが非推奨とする要素や属性も使えますが、フレームという機能は使えません。
- Frameset
- フレーム用のDTDで、Transitionalに加えて、フレームという機能も使えます。
DOCTYPE宣言を書いてみよう! 11:27
では、実際にDOCTYPE宣言を追加してみましょう。
-
「Chapter03」フォルダ内の「index.html」をテキストエディタで開く
(テキストエディタでHTMLファイルを開くときは、テキストエディタの画面内か、アイコンにそのファイルをドラッグ&ドロップして開く。) - 下記を参考に、1行目にHTML5のDOCTYPE宣言を追加。
- 上書き保存し、ブラウザで開く
- ブラウザで見た目が変わっていないことを確認
練習問題 13:14
「Chapter03」› 「quest」フォルダ内の「index.html」を開いて下記のHTMLを作成して下さい。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
-
- HTMLのバージョン: HTML4.01
- DTD: Transitional
まとめ 15:48
HTMLのバージョンとDOCTPE宣言が何かわかりましたか?
- HTMLにはバージョンがある
- バージョンによって使える要素や属性が異なる
- HTMLファイルの冒頭にDOCTYPE宣言を記述する