「HTMLの宣言文ってなんだろう？」
「違う宣言文を書くことでデメリットってあるのかな？」
突然ですが、HTMLを学習していてこのような疑問を感じた方も多いのではないでしょうか。
そもそもHTMLを記述する際に、「宣言文」を書くことはご存知でしたか？
HTMLのバージョンごとに記述する宣言文も異なり、きちんとルールがありますのでこの記事で解説していきますね！
この宣言文を間違えるとエラーなどが起こる可能性がありますので、この記事しっかりと覚えていただけると嬉しいです。
HTMLの宣言文とは？バージョンごとにチェックしよう
まずHTMLの宣言文についてですが、どのようなものかはご存知ですか？
HTMLを記述する前に “必ず” 記述する文章のことで、この宣言文が記載されていないとエラーが起こったりする可能性が高くなるので、必ず覚えておきましょう。
HTMLは現在、「HTML5」が最新のバージョンとなっています。
この最新バージョンまでの宣言文をまとめてみましたので、参考にしてみてくださいね。
- HTML4.01
- XHTML1.0
- HTML5
バージョン1：HTML4.01
1999年12月24日に勧告されたバージョン「HTML4.01」は、以下のように宣言文を記述します。
同じバージョンでも、のちに解説する3種類のDTDにより、記述方法が違うので確認してみましょう！
-
種類①：Strict
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
種類②：Transitional
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
種類③：Frameset
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
バージョン2：XHTML1.0
2000年1月26日に勧告されたバージョン「XHTML1.0」は、以下のように宣言文を記述します。
こちらも3種類のDTDごとに記述方法が違います。
-
種類①：Strict
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
種類②：Transitional
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
種類③：Frameset
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
バージョン3：HTML5
では2014年10月28日に勧告された、現時点での最新バージョンの宣言文です。
こちらはシンプルで、かんたんに記述することができます。
|
1 |
<!DOCTYPE html> |
とてもシンプルですね。
DTDとは？
では古いバージョンにあった3種類の「DTD」とはなんでしょうか？
これは、Document Type Definition（文書型定義）のことで、HTMLのバージョン毎にそのバージョンでどの要素や属性が使用できるのか、どこにどの順番で配置できるのか、などを独自の文法で記述られているファイルのことです。
さきほど3種類のDTDがあると記述しましたが、その特徴も解説していきますね。
Strict
仕様に厳密なDTDで、W3Cが非推奨としている要素や属性、またフレームという機能を使用することができません
Transitional
文法がゆるいDTDで、W3Cが非推奨とする要素や属性も使えますが、フレームという機能は使えません
Frameset
フレーム用のDTDで、Transitionalに加えて、フレームという機能も使えます
宣言文を間違えるとデメリットはあるの？
この宣言文（DOCTYPE宣言）は、“HTMLの仕様をブラウザに認識させるための宣言” と思っていただけるといいかと思います。
実際のコードだけでは全体の仕様をブラウザが認識できないため、正しくコードが反映されない場合があるため必ずこの宣言文を記述しましょう！
ブラウザにHTMLの仕様を理解させることはSEO対策にも結びつきます。
しっかりと、正しいDOCTYPE宣言をしてページランクを上げる対策をしていきましょう。
実は、この宣言文は書かなくてもブラウザへの表示はされます。
ですが先ほども述べましたが、宣言文を間違えたり、書かなかったりすると “正しく表示されない” というデメリットがあります。
表示したいように表示できなくなる危険性は、やはり避けたいですよね？
確認した際にエラーを少なくするためにも、正しく宣言文を記述してWeb制作をしてみてくださいね。
HTML5を積極的に使いましょう
2020年現在では、ほぼすべてブラウザがHTML5に対応しています。
そのため、HTMLファイルを新しく作成する場合は、特に理由がない限りHTML5で記述したほうが良いといえますね。
以前のバージョンでも記述することはできるのですが、予期せぬエラーを防ぐためにも積極的に、最新バージョンの「HTML5」で記述しましょう！
宣言文を記述する場所
宣言文を記述する場所についてですが、これは必ず一番はじめに記述します。
HTMLでは大まかに、以下の3つの構成で記述がされます。
- <head>
- <body>
- <footer>
例は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>宣言文とは</title> </head> <body> これから宣言文の説明をします。 </body> <footer> Copyright </footer> </html> |
<head>
メタ情報を記述する場所です。
記事のタイトルや、スタイルシート、スクリプトを読み込ませる目的で、この欄は実際にブラウザに反映されるわけではありません。
<body>
実際にブラウザに表示される部分で、見出しや本文を記述します。
コピーライトや会社名などを記載する場所です。
まとめ
いかがでしたか？
今回の記事では、
「HTMLの宣言文」
についてまとめてみました！
バージョンごとに宣言文の書き方が違いますので、この記事で最新バージョンの宣言分の書き方を覚えていただけたならうれしいです。エラーの元にもつながりますので、しっかりと覚えておきましょう。
おさらいとして、現在のHTMLバージョンは「HTML5」です。対応する宣言文で、エラーの無いコードを書いていきましょう！
|
1 |
<!DOCTYPE html> |
