HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのDOCTYPE宣言とは？HTML5の書き方と過去のDOCTYPE一覧を解説

新しいHTMLドキュメントを作成するとき、最初に行うべきことの一つがDOCTYPE（ドキュメントタイプ）宣言の記述です。DOCTYPE宣言は、ブラウザに対して「これから表示するページはHTMLで書かれている」ということを伝える役割を果たします。HTML5のDOCTYPEを宣言するには、HTMLドキュメントの1行目に <!DOCTYPE html> と記述します。なお、HTML5のDOCTYPE宣言は大文字・小文字を区別せず、閉じタグも不要です。

新しいHTMLドキュメントに含めるべき要素

DOCTYPE宣言に加えて、html、head、body の各タグも記述する必要があります。

<!DOCTYPE html>
<html>
    <head>
        <!-- サイトのメタデータ -->
    </head>
 
    <body>
        <!-- ユーザーに表示されるコンテンツ -->
    </body>
</html>

html要素

<html> タグから </html> タグまでの間にあるすべての内容がHTMLであることを、Webブラウザに伝えるのがhtml要素です。ドキュメント全体を包む、最も外側の要素となります。

head要素

head要素には、ブラウザ向けのメタデータ（メタ情報）を格納します。このメタデータには、ページの言語設定、Webページのタイトル、スタイルシートへのリンクなどの情報が含まれます。

body要素

body要素には、ユーザーが実際に目にする情報が含まれます。body要素の中にはさまざまなタグが配置され、例えば段落を表す <p> タグ、番号付きリストを表す <ol> タグ、リスト項目を表す <li> タグ、リンクを表す <a> タグなどが使われます。

過去のDOCTYPE宣言の種類

HTMLのDOCTYPE宣言とは？HTML5の書き方と過去のDOCTYPE一覧を解説

HTML5ドキュメントでは <!DOCTYPE html> というシンプルなコードでDOCTYPEを宣言できますが、古いバージョンのHTMLで書かれたレガシーなコードでは、より複雑なDOCTYPE宣言を目にすることがあります。HTML5以前のDOCTYPE宣言は、DTD（Document Type Definition：文書型定義）を参照するため複雑でした。過去のHTMLのDOCTYPE宣言には、以下のようなものがあります。

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"https://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"https://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

朗報があります。新しくHTMLドキュメントを作成するのであれば、これらの古いDOCTYPEを使う理由は一切ありません！

まとめ

すべてのHTMLドキュメントは、必ずDOCTYPE宣言から始める必要があります。この宣言によって、ブラウザはWebページがHTMLで表示されることを認識します。これからHTMLを学び始める方は、「HTML学習ガイド」や「HTMLの習得にかかる時間はどれくらい？」といった記事も参考にしてみてください。

ブートキャンプ受講者の81%が「受講後、テック業界でのキャリア展望に自信が持てるようになった」と回答しています。今すぐ自分に合ったブートキャンプを見つけましょう。

また、ブートキャンプ卒業生の平均的なキャリアチェンジ期間は、受講開始から初めての仕事獲得まで6ヶ月未満です。

  1. HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説

    HTMLレイアウトとは HTMLレイアウトとは、Webページ上に配置される各コンポーネント（ヘッダー、ナビゲーション、本文、フッターなど）の配置構造を定義する仕組みのことです。HTMLには、ページ内のさまざまなセクションを意味的に示すためのセマンティック要素が数多く用意されており、これらを活用することで、検索エンジンやスクリーンリーダーにも伝わりやすい、アクセシブルなページ構造を作れます。 HTMLレイアウトで使用される主なセマンティック要素 以下は、HTMLレイアウトでよく使われるセマンティック要素の一覧です。 タグ説明 <header>セクションまたはドキュメント全体

  2. HTMLエディターとは？代表的な無料エディターの特徴を徹底解説

    HTMLエディターとはHTMLエディターとは、HTMLドキュメントの作成・編集を行い、場合によってはその場で実行までできるツールのことです。現在では、無料・有料を問わず、プロフェッショナル向けの高機能なHTMLエディターが数多く提供されています。Windows標準のメモ帳（Notepad）にはない、テーマのカスタマイズやターミナル連携といった付加機能を備えたエディターも多く、用途やスキルレベルに合わせて選ぶことができます。ここでは、特によく使われている代表的なHTMLエディターをご紹介します。Notepad（メモ帳）最も基本的な無料HTMLエディターの一つです。Windowsに標準搭載されてお