HTML

意外と知らない？HTMLのDOCTYPEとは何かを初心者向けに徹底解説！

 

HTMLでWebページを作成する際に、最初に見かける「DOCTYPE」という記述をご存じでしょうか？
DOCTYPEは、HTMLドキュメントの先頭に書く宣言のことで、これを記述することでブラウザがHTMLのバージョンを認識し、適切にページを表示できるようになります。
この記事ではDOCTYPEの役割や種類、具体的な使用例、指定すべき内容について初心者にもわかりやすく解説していきます。

Contents

DOCTYPEとは、種類、歴史、必要性

DOCTYPEとは何か

DOCTYPEとは、「Document Type Declaration（文書型宣言）」の略で、HTMLドキュメントの種類を指定するための宣言です。
DOCTYPEを正しく指定することで、ブラウザがどのHTMLバージョンでページを解釈すればよいかがわかり、意図した表示が可能になります。

DOCTYPEの種類

DOCTYPEには複数の種類があり、それぞれHTMLのバージョンに対応しています。代表的なものは以下の通りです。

  • HTML5:
    <!DOCTYPE html>
  • HTML 4.01 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

このように、DOCTYPEの種類はHTMLのバージョンや文書の構成によって異なります。

DOCTYPEの歴史

HTMLの初期バージョンではDOCTYPEの概念はなく、HTML 2.0から導入されました。
その後、HTML 4.01やXHTMLといったバージョンでさまざまなDOCTYPEが使われるようになりましたが、HTML5で再びシンプルな形に統一されました。
現在、一般的に使用されているのはHTML5の<!DOCTYPE html>です。

DOCTYPEの必要性

DOCTYPEは、ブラウザがページをどのモードで表示するかを決定するために重要です。
DOCTYPEを指定しない場合、ブラウザは「互換モード」や「クイークスモード」と呼ばれる表示モードに入り、ページが意図しない見た目で表示される可能性があります。
DOCTYPEを正しく指定することで、ブラウザは「標準モード」でHTMLを解釈し、最新の仕様に基づいてページを表示します。

使い方、具体例

DOCTYPEの使い方

DOCTYPEの宣言は、HTMLファイルの一番上に記述します。
例えば、HTML5のDOCTYPE宣言は以下のように書きます。

<!DOCTYPE html>

　

具体例

基本的なHTML5の構造を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
</body>
</html>

この例では、DOCTYPE宣言が一番上にあり、その下にHTMLの内容が続きます。

注意点

DOCTYPEの指定にはいくつかの注意点があります。

  • 位置:
    DOCTYPEはHTMLファイルの一番上に書かなければなりません。先頭以外に書くと無効になります。
  • スペル:
    HTML5のDOCTYPEは<!DOCTYPE html>と、全て小文字で書きます。スペルミスがあるとブラウザが正しく解釈できません。
  • バージョン対応:
    HTML5を使っている場合はHTML5のDOCTYPEを指定するようにしましょう。他のバージョンとの互換性に注意が必要です。

結果何を指定すればよい？

現在のWeb開発では、基本的にHTML5を使用するのが推奨されており、DOCTYPEもHTML5のものを使うことが一般的です。
HTML5のDOCTYPEは非常にシンプルで、次のように書くだけです。

<!DOCTYPE html>

これだけで、ブラウザはHTML5の標準モードでページを表示するようになります。

まとめ

DOCTYPEは、HTMLページの先頭に記述する簡単な宣言ですが、ブラウザがページを正しく表示するために欠かせない重要な要素です。
DOCTYPEの役割を理解し、正しく指定することで、Webページが意図通りに表示されるようにできます。
現代のWeb開発ではHTML5が主流であるため、<!DOCTYPE html>を指定するだけで簡単に対応できます。
DOCTYPEの使い方を理解し、安心してWebページを作成していきましょう。

　
※参考にされる場合は自己責任でお願いします。

DOCTYPE
関連記事