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宣言についての必要性やその内容について解説してみました。
今ではシンプルかつ単純で簡素的な宣言のみとなっているため、あまり意識する必要がなくなったものではありますが、やはりその意味をキチンと理解しておくことが重要です。
今後もこういった仕様は変わる可能性があるため、今のうちにできる限り多くの知識を身に着けながら学習していきましょう。
