Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

「DOCTYPE宣言とは…」が誰でも簡単に理解できるトピック

  • 2014年11月13日
  • HTML

「DOCTYPE宣言とは…」が誰でも簡単に理解できるトピック

HTMLファイルの先頭には多くの場合「DOCTYPE~」という文字列がありますよね。これは「DOCTYPE宣言」というもので、読み方は「ドックタイプ宣言」と読みます。では、いったいなぜDOCTYPE宣言をするのかを知っているでしょうか。ドロップシッピングでもHTMLの知識があったほうが有利なので、今回はHTMLファイルの先頭に必ず記述される「DOCTYPE宣言」について紹介します。

DOCTYPE宣言とは

まず最初に疑問に思うことは「DOCTYPE宣言とはいったい何…?」ということですよね。何の目的で記述しどのような効果があるのか…。

DOCTYPE宣言は「文書型宣言」

DOCTYPEの「DOC」はドキュメント(document)のことで、つまりは「ドキュメントタイプ宣言」ということ。さらにドキュメントタイプをもっと分かりやすい言葉で言うと「文書型」になります。DOCTYPE宣言は文書型宣言を表しているんですね。

文書型宣言をする意味は…?

なぜ文書型宣言をするのかというと、ちょっとここからややこやしくなってくるので、コーヒーでもいれて間をおくといいかもです。

HTML5(現在のHTMLの最新バージョン)以前の、各バージョンのHTMLにはそれぞれ「DTD(Document Type Definition)」というものが用意されています。DTDは「文書型定義」と呼ばれるもので、そのバージョンのHTMLでの文法が細かく記述されているファイルのこと。W3Cというウェブの仕様を決めている組織のサイト内にあります。

それらのファイルには「このバージョンのHTMLでは属性・要素はコレコレが使えて、どんな順序で何回まで使えるよ」みたいなことが記されています。つまりは各バージョンにおける文法の決まり事が記述されたもので、HTMLファイルの先頭にこれらを記述する意味は「このHTMLファイルはHTML○○のバージョンで記述します」というのを指定するためです(本来は…)。

DOCTYPE宣言の一覧

DOCTYPE宣言はバージョンの数だけあるのではなくDTDの数だけあります。また、HTMLにXMLの要素を定義した「XHTML」にもDOCTYPE宣言が必要で、以下8種類を一覧で紹介します。ただ、別に覚える必要性は全くなく決まり文句として考えておけばいいです。必要なときはコピペすればいいだけです。

  1. HTML 4.01 Transitional DTD
  2. HTML 4.01 Frameset DTD
  3. HTML 4.01 Strict DTD
  4. XHTML 1.0 Transitional DTD
  5. XHTML 1.0 Frameset DTD
  6. XHTML 1.0 Strict DTD
  7. XHTML 1.1 DTD
  8. XHTML Basic 1.1 DTD

参考サイト⇒DTD別のDOCTYPE宣言

HTML 4.01 Transitional DTD

「HTML 4.01 Transitional DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

「HTML 4.01 Frameset DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Strict DTD

「HTML 4.01 Strict DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Transitional DTD

「XHTML 1.0 Transitional DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD

「XHTML 1.0 Frameset DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Strict DTD

「XHTML 1.0 Strict DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1 DTD

「XHTML 1.1 DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.1 DTD

「XHTML Basic 1.1 DTD」のDOCTYPE宣言は次の通りです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
 "http://www.w3.org/MarkUp/DTD/xhtml-basic11.dtd">

3つのタイプと「xmlns属性」

DOCTYPE宣言は記憶するものではなくコピペするものです(自分的には…放心状態の顔)。そのなかに「Transitional」「Frameset」「Strict」という3つのタイプが登場してきました。また、XHTMLで必要となる「xmlns属性」についても紹介します。

DTDの3つのタイプ

  1. Transitional
  2. Frameset
  3. Strict

「HTML 4.01」と「XHTML 1.0」には、それぞれ「Transitional」「Frameset」「Strict」があります。それらの意味はいったいなんでしょうか。あらかじめ簡潔に説明を加えておくと、これらは移行途中の様々な場面で対応できるように策定されたものという前提だと分かりやすいと思います。

Transitional

「Transitional」は「移行型DTD」といい、非推奨要素と非推奨属性は使用できますがフレームは使用できません。

Frameset

「Frameset」は「フレーム設定型DTD」と言い、非推奨要素と非推奨属性に加えてフレームも使用できます。Transitional DTDにフレーム関連の要素が付け加えられたものです。

Strict

「Strict」は「厳密型DTD」と呼ばれ、非推奨要素と非推奨属性が使用できずフレームも使用できません。新しい使い方に完全に以降した場合に使われるDTDです。

「xmlns属性」とは

紹介したDOCTYPE宣言8種類のうち、5種類は「XHTML」のDOCTYPE宣言です。XHTMLはHTMLにXMLの要素を取り入れたもので、DOCTYPE宣言の他に「xmlns属性」を指定してあげなくてはいけません。とはいってもこれも決まり文句なのでコピペでOKです。まずHTMLファイルの先頭にDOCTYPE宣言を記述し、次にくる<html>タグに属性としてxmlnsを指定します。

HTMLの場合は

<html lang="ja">

でOKですが、XHTMLの場合は

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

と記述します。

XML文書ではXHTMLをはじめ、ほかの言語も複数使用できます。そういう場合、同じ<a>タグにも様々な言語の意味があり、どの言語の<a>タグとすればいいかはっきりしません。それを指定するのがxmlns属性(XMLネームスペース属性)なんです。まぁ意味は特に覚えることはありませんが、XHTMLで記述するときは<html>タグに「xmlns属性」を記述しなければいけないとういことです。
とても分かりやすい説明をありがとうございます嘆願する顔。参考サイト
xmlns属性

HTML5でのDOCTYPE宣言

なかなか難しい内容ですが、現在もっとも新しいバージョンであるHTML5では、非常にシンプルになっています。

<!DOCTYPE html>

たったこれだけでOK。ただ、本当はHTML5ではDTDはなくなり、HTML5の仕様書のなかに同じ言語で記述されています。なので本来の意味ではDOCTYPE宣言は必要ありません。でも記述しなければいけないのは次のような理由があるからです。

DTDのないHTML5なのにDOCTYPE宣言が必要な理由

ウェブが一般化してHTML言語が標準化してきた1990年代において、当時表示していたページは製作者のスキルの問題もあり文法がグチャグチャでした。当然記述すべきDOCTYPE宣言が記述されていないウェブページも多く、その対応を迫られたのがページを表示するブラウザ各社です。そこで「DOCTYPE宣言が記述されていないページは旧式のページ」「DOCTYPE宣言しているページは標準仕様に準拠したページ」というように、自動的にモードを切り替えるようにしました。ちなみに現在のほとんどのブラウザがこのような仕組みになっています。

そんな中で、HTML5になってDTDがなくなったからと言ってDOCTYPE宣言を記述しないと、ブラウザは「旧式のページ」と判断してしまいます。そうなると記述内容とは別の表示になってしまうので、それを回避するためにDOCTYPE宣言を記述するのです。HTML5では、むしろそのためだけにDOCTYPE宣言を記述すると言ってもいいくらいなんですね。なので必要最低限の短い記述でいいんです。

ちなみにHTML5のDOCTYPE宣言は大文字でも小文字でも問題ありませんが、一般的には「DOCTYPE」は大文字で、「html」は小文字で記述するので、それに合わせておけばいいかと思います。

まとめ

DOCTYPE宣言はHTML5でサイトを作る人にとっては、ほぼ考える必要はありません。ただ利用してるワードプレスのテーマがXHTMLだったりすると、いじるときにどういう記述が正しいか分からなくなるので、チラッと頭の片隅に入れておけばいいのではないかと思います。また、新たにワードプレスのテーマを作成したりHTMLサイトのテンプレートを作成するときは、HTML5で作成すれば問題ないと思います。

もしもドロップシッピングで稼ぐためのブログページトップへ戻る