Webのいろは
MENU
  • HTML
  • CSS
検索結果
検索結果
  • HOME
  • >
  • HTML&CSS
  • >
  • !DOCTYPE|文書型宣言の使い方と種類・役割

!DOCTYPE|文書型宣言の使い方と種類・役割

2018/4/25 2019/10/14
いろは
!DOCTYPE|文書型宣言の使い方と種類・役割
  • B!

MENU

  • 1 なぜ<!DOCTYPE>を記述するのか?
  • 2 文書型宣言(DOCTYPE宣言)の種類
  • 3 文書型宣言についてのまとめ

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

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

なぜ<!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!
!DOCTYPE|文書型宣言の使い方と種類・役割
いろは
Webのいろは

Relate Post

  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • Webサイト制作の基本となるHTMLとは?
    Webサイト制作の基本となるHTMLとは?
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <h1>~<h6> | 見出しの使い方・記述方法
    <h1>~<h6> | 見出しの使い方・記述方法

アーカイブ

  • 2018年5月
  • 2018年4月

新着記事

  • <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
    2018-05-12
    <dl>・<dt>・<dd> | 説明リストの意味と使い方・記述方法
  • <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
    2018-05-11
    <table>・<tr>・<th>・<td> | 正しい表の使い方・作り方
  • <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
    2018-05-04
    <blockquote>・<q>・<cite> | Webページでの引用の使い方・表記方法
  • <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
    2018-04-30
    <ul>・<ol>・<li> | リスト表示(箇条書き)の使い方・記述方法
  • <h1>~<h6> | 見出しの使い方・記述方法
    2018-04-30
    <h1>~<h6> | 見出しの使い方・記述方法
Webのいろは
  • Webのいろは の利用規約
  • お問い合わせ

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