コーディング

本気で学ぶ！HTML入門#03

【HTML入門】HTMLのバージョンとDOCTYPE宣言

HTML入門#3

さぁ、HTML入門の3回目はHTMLの「バージョンとDOCTYPE宣言」について学習しましょう。

今回は、「バージョンに合わせたDOCTYPE宣言を書けるようになる」のが目標です。

少し固い話、というか歴史的な話なんかも入れながら見て行くので長いですが、頑張りましょう。

目次

  1. HTMLのバージョン
  2. DOCTYPE宣言
  3. 【演習】DOCTYPE宣言を書いてみよう！
  4. まとめ

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より前の（X）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より前の（X）HTMLでは、どのバージョンの仕様に基づいて記述しているかを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宣言を追加

  1. 前回編集したHTMLファイル（index.html）をテキストエディタで開きましょう。
    （テキストエディタでHTMLファイルを開くときは、そのファイルをテキストエディタの画面内か、アイコンにドラッグ＆ドロップしたら開けましたね。）

  2. 下記を参考に、1行目にHTML5のDOCTYPE宣言（<!DOCTYPE html>）を追加しましょう。

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ここにタイトル</title>
  </head>
  <body>
    <p>ここに本文を入れる</p>
  </body>
</html>
  3. 記述できたら、上書き保存しておきましょう。

  4. ブラウザで確認（index.htmlをダブルクリック）
    (見た目に何も変更はないですが、ブラウザの表示モードは「標準モード」で開かれているはずです。)

まとめ

今回は、HTMLのバージョンとDOCTYPE宣言という内容を歴史的な背景も少し入れながらやってみました。

とりあえず、今回覚えておいて欲しい事は2つです。

  1. HTMLにはバージョンがあって、2016年5月現在の主流はHTML5
  2. HTMLファイルの冒頭にはDOCTYPE宣言を行なう

以上です。
次回は、「meta要素の役割との文字コードの指定方法」という内容をやって行きましょう。

HTML入門#4

【HTML入門】meta要素の使い方と文字コードの指定方法

  • date_range