バナー画像

DOCTYPEとは

htmlファイルの先頭に必ず記述する「DOCTYPE」の宣言は、そのhtml文書で使用するHTMLやXHTMLのバージョンを宣言する為に使用します。

何となくコピペして使用していると、思わぬところで意図しないレイアウトになったりするので、「DOCTYPE」宣言の役割をしっかり把握しておきましょう。

DOCTYPEを宣言すると?

DOCTYPEを宣言することは、その文書がHTMLであることや、どのバージョンで作成されているかを宣言するものです。DOCTYPEは文章型宣言とも呼ばれ、DTD(Document Type Definition)をHTMLファイルの冒頭で指定します。

ポテパンダの一言メモ

DTD(Document Type Definition)は、HTMLのバージョン毎に、使用できる要素や属性が定義されたファイルです。

HTML5でのDOCTYPE宣言

HTML5でのDOCTYPE宣言は、以前のHTML4の書き方に比べ、かなりシンプルな記述が可能になりました。以下がHTMLのDOCTYPE宣言です。

<!DOCTYPE html>

DOCTYPEは省略することも可能ですが、省略した場合、多くのブラウザでは、互換モードで表示されます。その場合、レイアウト崩れなどが発生するため、必ずファイルの先頭に記述するようにしましょう。

互換モードとは?

ほとんどのブラウザには、「標準モード」「互換モード」の2つの表示モードがあります。HTMLやCSSの標準仕様に準拠して表示するモードが「標準モード」で、古いバージョンで作成されたHTMLを、過去のブラウザと同じように表示するモードを「互換モード」と呼びます。

「標準モード」「互換モード」の切り替えは、先述したHTMLのDOCTYPE宣言によって切り替えの判定が行われます。

HTML5のHTMLテンプレート

では、HTML5のDOCTYPE宣言を使ってHTMLファイルを作成してみましょう。次のサンプルコードは、HTML5で最低限必要なHTMLタグをまとめたものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの概要">
<meta name="author" content="作成者">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトのタイトル</title>
</head>
<body>
<p>サイトの本文</p>
</body>
</html>

HTML4でのDOCTYPE宣言

次に、HTML4でのDOCTYPE宣言について見ていきましょう。HTML4には、次の3種類のDOCTYPE宣言方法があります。

HTML4.01 Strict DTD(厳密型DTD)

W3C(Web技術の標準化を行う団体)が非推奨とする要素や属性は使用できず、要素の配置にも細かいルールがあります。また、フレームも使えません。

HTML4.01 Transitional DTD(移行型DTDと)

W3Cが非推奨とする要素や属性は使えますが、フレームは使えません。

HTML4.01 Frameset DTD(フレーム設定型DTD)

Transitional DTDと同じようにW3Cが非推奨とする要素や属性が使用でき、フレームも使えます。最近ではフレームを使ったサイトは見かけなくなった為、あまり使わないDTDです。

HTML4のHTMLテンプレート

HTML4のDOCTYPE宣言を使ったHTMLの最小構成のテンプレートを紹介します。

・HTML4.01 Strict DTD(厳密型DTD)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="サイトの概要">
<meta name="author" content="作成者">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトのタイトル</title>
</head>
<body>
</body>
</html>

・HTML4.01 Transitional DTD(移行型DTDと)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
~ 以降、厳密型DTDと同じため、省略 ~

・ HTML4.01 Frameset DTD(フレーム設定型DTD)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
~ 以降、厳密型DTDと同じため、省略 ~

XHTMLでのDOCTYPE宣言

XHTMLは、HTML4.01をベースに作られたHTMLであり、HTMLと特徴は似ています。HTMLでは記述の内容がある程度自由だったのに対し、XHTMLは、XML文書のルールに従って書く必要があり、書式が厳密に決まっています。

例えば、改行を表す<br>タグでは、HTML4.01であれば閉じタグは必須ではありませんが、XHTMLでは、タグをしっかり閉じる必要があるため、<br/>のように書く必要があります。

XHTMLにも、DOCTYPE宣言が必要です。基本的には、先述したHTML4のDOCTYPE宣言と同じような書き方になります。

XHTML 1.0 Strict DTD(厳密型DTD)

非推奨とする要素や属性は使用不可、フレームも使用不可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・

XHTML 1.0 Transitional DTD(移行型DTDと)

非推奨の要素や属性は使用可能、フレームは使用不可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・

XHTML 1.0 Frameset DTD(フレーム設定型DTD)

非推奨の要素や属性、フレームが使用可能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・

HTML5の利用を積極的に

htmlファイルの先頭に記述するDOCTYPE宣言について、HTMLのバージョン毎に書き方を解説してきました。DOCTYPEの指定方法によって、ブラウザの表示モードが変わる為、何気なくコピペするのではなく、htmlのタグ構造をよく確認してから指定しましょう。

ちなみに、2020年現在では、ほぼすべてブラウザがHTML5に対応しています。そのため、HTMLを新しく作成する場合は、特に理由がない限りHTML5で記述したほうが良いでしょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。