受講料が最大70%OFF 受講料が最大70%OFF

HTMLファイルのソースを見ると必ず先頭でdoctype宣言が記述されています。

初心者の方は何となく他のサイトでdoctype宣言は必要という部分だけ記憶し、コピーしてそのまま使っている方も多いのではないでしょうか?

しかしこのdoctype宣言、実はかなり重要な役割を担っているため、この宣言次第ではHTMLの記述や使用できるものがガラリと変わってきます。

今回はこの「doctype宣言」について解説してみたいと思いますので、違いをしっかりと理解しておきましょう。

DOCTYPEとは?

HTMLのソースを見ると最初に必ず書かれているものがあるのですが、これは何を意味するのでしょうか?

DOCTYPE宣言といって、HTMLを構築する際には必ず必要となる重要な宣言になります。

DOCTYPE宣言とは、「Document Type Definition(DTD)」の略で文書型宣言の事を指します。

簡単に言うと「HTMLの仕様をブラウザに認識させるための宣言」だと思ってください。

HTMLはタグの違いを理解させるためには様々な手法を駆使する必要があります。

これはブラウザも同じで、コードだけでは全体の仕様を理解することはできません。

そこでdoctype宣言をすることにより、正確にブラウザにHTMLの仕様を理解させることが出来るようになります。

またブラウザにHTMLの仕様を理解させるということはSEO対策にも効果があるため、ここでしっかりと正しい宣言をしておかなければページランクも上昇することが困難になります。

DOCTYPE宣言には重要な識別子が2つ存在しています。

2つの識別子については以下の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// 分解すると以下のようになる

// DOCTYPEの種別
DOCTYPE HTML PUBLIC

// 公開識別子
"-//W3C//DTD HTML 4.01//EN"

// System識別子
"http://www.w3.org/TR/html4/strict.dtd"

ここでいうSystem識別子とは、参照されるべきDTDのURLを指しています。

上から順に説明すると、まずDOCTYPE種別で「これはDOCTYPE宣言です!」という宣言を行っています。

PUBLIC宣言と似ているのでわかる方も多いかもしれませんが、ここだけで見るならば「HTMLを全公開します!」ということになります。

そして次に公開識別子というものがあります。

これはどの仕様に則って構築するかを記述しています。

現在ではHTML5が主流となっていますが、今に至るまでには当然前のバージョンのHTMLも存在するため、バージョン識別と考えてもいいでしょう。

そして最後にSystem識別子で宣言された公開識別子のURLを記述することで、「バージョンの仕様に関する詳しい資料はここのURL」を見てくださいとブラウザに教えているわけです。

このURLを開くと詳しい仕様が記述されているページが開かれると思いますが、内容としては以下のようになっています。

~一部抜粋~

<!–=================== Generic Attributes ===============================–>

<!ENTITY % coreattrs
“id ID #IMPLIED — document-wide unique id —
class CDATA #IMPLIED — space-separated list of classes —
style %StyleSheet; #IMPLIED — associated style info —
title %Text; #IMPLIED — advisory title –”
>

<!ENTITY % i18n
“lang %LanguageCode; #IMPLIED — language code —
dir (ltr|rtl) #IMPLIED — direction for weak/neutral text –”
>

<!ENTITY % events
“onclick %Script; #IMPLIED — a pointer button was clicked —
ondblclick %Script; #IMPLIED — a pointer button was double clicked–
onmousedown %Script; #IMPLIED — a pointer button was pressed down —
onmouseup %Script; #IMPLIED — a pointer button was released —
onmouseover %Script; #IMPLIED — a pointer was moved onto —
onmousemove %Script; #IMPLIED — a pointer was moved within —
onmouseout %Script; #IMPLIED — a pointer was moved away —
onkeypress %Script; #IMPLIED — a key was pressed and released —
onkeydown %Script; #IMPLIED — a key was pressed down —
onkeyup %Script; #IMPLIED — a key was released –”
>

<!– Reserved Feature Switch –>
<!ENTITY % HTML.Reserved “IGNORE”>

<!– The following attributes are reserved for possible future use –>
<![ %HTML.Reserved; [
<!ENTITY % reserved
“datasrc %URI; #IMPLIED — a single or tabular Data Source —
datafld CDATA #IMPLIED — the property or column name —
dataformatas (plaintext|html) plaintext — text or html –”
>
]]>

<!ENTITY % reserved “”>

<!ENTITY % attrs “%coreattrs; %i18n; %events;”>

<!–=================== Text Markup ======================================–>

<!ENTITY % fontstyle
“TT | I | B | BIG | SMALL”>

<!ENTITY % phrase “EM | STRONG | DFN | CODE |
SAMP | KBD | VAR | CITE | ABBR | ACRONYM” >

<!ENTITY % special
“A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO”>

<!ENTITY % formctrl “INPUT | SELECT | TEXTAREA | LABEL | BUTTON”>

<!– %inline; covers inline or “text-level” elements –>
<!ENTITY % inline “#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;”>

<!ELEMENT (%fontstyle;|%phrase;) – – (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
%attrs; — %coreattrs, %i18n, %events —
>

<!ELEMENT (SUB|SUP) – – (%inline;)* — subscript, superscript –>
<!ATTLIST (SUB|SUP)
%attrs; — %coreattrs, %i18n, %events —
>

<!ELEMENT SPAN – – (%inline;)* — generic language/style container –>
<!ATTLIST SPAN
%attrs; — %coreattrs, %i18n, %events —
%reserved; — reserved for possible future use —
>

<!ELEMENT BDO – – (%inline;)* — I18N BiDi over-ride –>
<!ATTLIST BDO
%coreattrs; — id, class, style, title —
lang %LanguageCode; #IMPLIED — language code —
dir (ltr|rtl) #REQUIRED — directionality —
>

<!ELEMENT BR – O EMPTY — forced line break –>
<!ATTLIST BR
%coreattrs; — id, class, style, title —

DTDの種類

今では主流となったHTML5の宣言はとてもシンプルかつ1種類しかありませんが、それまでのHTMLには数種類の宣言があり、意味も違っていました。

ここでは今まで用いられていたいくつかのDOCTYPE宣言とその解説をしていきたいと思います。

HTML5で使われている宣言

<!DOCTYPE html>

HTML5の宣言は宣言の種類は1種類しかないため非常にシンプルな構成となっています。

HTML4.01 Strict DTD

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

厳密型DTDというもので、W3Cに準拠していない要素や属性は使うことが出来ません。

また、最近ではほぼ見かけなくなりましたが、HTMLフレームも使えません。

全てのスタイルをCSSのみで構築している方であればこの宣言が最もメジャーな宣言となります。

HTML4.01 Transitional DTD

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

移行型DTDというもので、こちらはフレームは使用することが出来ませんが、W3Cに準拠していない要素や属性は使用することが出来ます。

HTML4.01 Strict DTDに比べ、少しだけ柔軟に対応できますが、SEOを意識するならあまり使わない方がよいかもしれません。

HTML4.01 Frameset DTD

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

こちらは今ではほぼ見かけなくなりました。

上の二つに比べ比較的制限のない宣言であり、フレームも使えるような宣言となっています。

HTMLに対しあまり知識のない方や、ライトユーザー向けHTMLビルドツールを使用している方などはこの宣言となっていることが非常に多い傾向にあります。

宣言の必要性について

HTML5に移行されて以来、DOCTYPE宣言を意識する必要はほぼなくなったといえます。

その最も大きな理由は宣言をせずとも正確に表示されるようになったという部分にあります。

しかしブラウザのバージョンによっては、宣言されていないと強制的に互換モードで表示されてしまうため、やはり必ず宣言するように癖付けておくべきでしょう。

まとめ

いかがでしたか?

今回はDOCTYPE宣言についての必要性やその内容について解説してみました。

今ではシンプルかつ単純で簡素的な宣言のみとなっているため、あまり意識する必要がなくなったものではありますが、やはりその意味をキチンと理解しておくことが重要です。

今後もこういった仕様は変わる可能性があるため、今のうちにできる限り多くの知識を身に着けながら学習していきましょう。

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

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

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

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

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

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

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

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

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

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

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