!DOCTYPEの宣言 - HTML5/HTML4/XHTMLで正しい指定方法
  • facebookページ
  • twitterページ
  • 2020.01.31

    !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法

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

    互換モードとは?

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

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

    HTML5のHTMLテンプレート

    では、HTML5のDOCTYPE宣言を使ってHTMLファイルを作成してみましょう。次のサンプルコードは、HTML5で最低限必要な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)

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

    ・ HTML4.01 Frameset DTD(フレーム設定型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)

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

    XHTML 1.0 Transitional DTD(移行型DTDと)

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

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

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

    HTML5の利用を積極的に

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE