Webのいろは
MENU
検索結果
  • Webデザイン
  • HTML
  • CSS
  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
  • 【CSSのみ】全画面オーバーレイ検索フォームの作り方
    2018-06-12
    【CSSのみ】全画面オーバーレイ検索フォームの作り方
  • 【HTML】table・tr・th・td | 表の作り方・使い方を解説
    2018-06-06
    【HTML】table・tr・th・td | 表の作り方・使い方を解説
検索結果
  • HOME
  • >
  • Webデザイン
  • >
  • HTML

【HTML】<!DOCTYPE>|文書型宣言の使い方と種類・記述する理由を解説

2018/5/8 2019/2/11
いろは
【HTML】<!DOCTYPE>|文書型宣言の使い方と種類・記述する理由を解説
  • B!

HTMLを学ぶと色々なタグと一緒に、<!DOCTYPE>とも出会うと思います。(DOCTYPEは正確にはタグではありませんが!)
たとえば、HTMLのテンプレートはWeb上に公開されていたり教本に付属していたりしますが、ただコピペするのではなく意味を知ってから使いましょう。

場合によって、この<!DOCTYPE>はWebサイトを構成するHTMLファイル全体に意図しない影響を及ぼす可能性もあります。
この記事では<!DOCTYPE>について記述する理由と種類、記述方法を初心者の方にもわかりやすく解説したいと思います。

MENU

  • そもそもなぜ記述するのか?
  • DOCTYPE宣言の種類
  • まとめ

そもそもなぜ記述するのか?

結論から言うとHTMLファイルがどのバージョンで記述されているかを定義しています。
HTMLファイルの先頭で記述することを”DOCTYPE宣言“といい、最初にそのHTMLファイルがどのバージョン(ルール)で記述されているかを宣言しておくことで、ユーザ(閲覧側)のWebブラウザはそのルールを基にして内容を表示します。

なぜHTMLのバージョンを定義する必要があるかというと、バージョンにより使えるタグの種類や、記述するルールが異なっているためです。
この文章の型の定義はDTD(Document Type Definition)と呼ばれています。
つまり、ただDOCTYPE宣言すればいいというわけではなく、扱うHTMLを想定してDOCTYPE宣言を行い、そのDTDに沿ったマークアップを行わなければなりません。

DOCTYPE宣言の種類

DOCTYPE宣言の記述にはバージョンやDTDにより色々な種類があります。ですので使用するHTMLファイルの種類に合わせて記述しましょう。
現在主流のHTML5は記述もシンプルですが、前バージョンのHTML4やXHTMLなどは、それぞれで複数の記述の種類があり、また複雑な記述をします。
また、HTML5ではDOCTYPE宣言は必須でなくなりました。(その場合、ブラウザは互換モードでレンダリングを行います。)

HTML5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ずらりと各DOCTYPE宣言を記述しましたが、今から覚えるならばHTML5のものでいいと思います。
他のものは現存するWebサイトの管理時などには必要になると思いますが、今あえてHTML 4.01で新しいWebサイトを作ることもほとんどないと思います。

まとめ

  • DOCTYPE宣言することでHTMLのバージョンを定義する
  • 現在主流なHTML5の記述は短くシンプル
  • B!
【HTML】<!DOCTYPE>|文書型宣言の使い方と種類・記述する理由を解説
いろは
Webのいろは

Relate Post

  • 【HTML】h1~h6 | hタグでの見出しの使い方を解説
    【HTML】h1~h6 | hタグでの見出しの使い方を解説
  • 【HTMLのタグを覚えよう!】#2 はじめに覚えたい必須のHTMLタグ②
    【HTMLのタグを覚えよう!】#2 はじめに覚えたい必須のHTMLタグ②
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    【HTML】blockquote・q・site | 引用の使い方を解説
  • HTMLとは何か?Web制作の基本・基礎【初心者向け】
    HTMLとは何か?Web制作の基本・基礎【初心者向け】
検索結果

カテゴリー

  • Blog
  • Webデザイン
    • CSS
    • HTML
    • WordPress
  • テクノロジー
    • Techニュース

NEW POSTS

  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説

カテゴリー

  • Blog
  • CSS
  • HTML
  • Techニュース
  • Webデザイン
  • WordPress
  • テクノロジー

ARCHIVE

  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月

SEARCH

検索結果
Webのいろは
  • ホーム
  • 利用規約
  • お問い合わせ

Copyright © 2019 Webのいろは All Rights Reserved.