<!DOCTYPE> / <html>
| 対応: | HTML 4（1997） |
|---|
『<!DOCTYPE>』はHTMLの文書型宣言で、ブラウザに「これはHTML5の文書です」と伝える宣言です。『<html>』要素はHTMLドキュメントのルート要素（最上位の要素）で、すべてのHTML要素を包みます。
構文
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文書のメタ情報 -->
</head>
<body>
<!-- 文書の本体 -->
</body>
</html>
属性一覧（html要素）
| 属性 | 概要 |
|---|---|
| lang | ドキュメントの言語を指定します。日本語は『lang="ja"』、英語は『lang="en"』と記述します。 |
| dir | テキストの方向を指定します。左から右は『ltr』、右から左は『rtl』と指定します。 |
| xmlns | XMLの名前空間を指定します。XHTMLとの互換が必要な場合に使用します。通常のHTMLでは不要です。 |
サンプルコード
sample_doctype_html.html
<!-- 基本的な日本語ページ --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプルページ</title> </head> <body> <h1>こんにちは！</h1> <p>これはHTML5の文書です。</p> </body> </html> <!-- 英語ページ（lang="en"） --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello!</h1> <p>This is an HTML5 document.</p> </body> </html> <!-- 右から左に書く言語（アラビア語など）の場合 --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>صفحة عربية</title> </head> <body> <p>مرحباً بالعالم</p> </body> </html>
実行結果
ブラウザは上記のコードをHTML5として解釈し、「こんにちは！」という見出しと「これはHTML5の文書です。」という段落を表示します。
概要
『<!DOCTYPE html>』はHTMLファイルの先頭に必ず記述します。これがないと、ブラウザが「後方互換モード（Quirks Mode）」で動作し、レイアウトが意図通りに表示されない場合があります。必ずHTMLファイルの1行目に記述してください。
HTML5以前のバージョン（HTML4.01・XHTML）では文書型宣言が長い文字列でしたが、HTML5では『<!DOCTYPE html>』と非常にシンプルになりました。
『<html>』要素には『lang』属性でページの言語を指定することを強くおすすめします。スクリーンリーダーが正しい言語で読み上げを行ったり、検索エンジンが言語を正しく判定したりするために役立ちます。
『<head>』要素・『<body>』要素については、それぞれ 『head』・『body』 のページで詳しく解説しています。
対応ブラウザ
Chrome
1 以降 ○
Firefox
1 以降 ○
Safari
1 以降 ○
Edge12 以降 ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera
12.1 以降 ○11.1 以前 ×
iOS Safari1 以降 ○
Android Browser4.4 以降 ○4 以前 × Chrome Android最新版 ○ Firefox Android最新版 ○※ バージョン情報は MDN に基づいています。
DOCTYPE宣言の歴史と役割
HTML5以前は、DOCTYPE宣言に長いURL（DTD）を記述する必要がありました。HTML5からは『<!DOCTYPE html>』のみになり、大幅に簡略化されました。
| バージョン | DOCTYPE宣言 |
|---|---|
| HTML5 | <!DOCTYPE html> |
| HTML4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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"> |
DOCTYPE宣言の重要な役割のひとつが、ブラウザのレンダリングモードの切り替えです。DOCTYPE宣言が正しく記述されていると「標準モード（Standards Mode）」で表示され、省略または不正な場合は「後方互換モード（Quirks Mode）」になります。後方互換モードでは古いブラウザの動作を模倣するため、CSSの計算式（ボックスモデルなど）が現在の標準と異なる動作をすることがあります。
lang属性の実践的な使い方
『<html>』の『lang』属性はページ全体の言語を指定しますが、ページの一部が別の言語になる場合は、その要素に個別に『lang』属性を指定できます。
<!-- ページ全体は日本語 -->
<html lang="ja">
<body>
<p>これは日本語のテキストです。</p>
<!-- 英語の引用文はlang="en"を指定 -->
<blockquote lang="en">
<p>This is an English quote embedded in a Japanese page.</p>
</blockquote>
<!-- 中国語の固有名詞 -->
<p>作者名: <span lang="zh">鲁迅</span></p>
</body>
</html>
『lang』属性はSEOにも影響します。検索エンジンはlang属性を参照してページの言語を判定し、適切な地域の検索結果に表示します。スクリーンリーダーはlang属性を参照して正しい言語の音声合成エンジンに切り替えるため、アクセシビリティにとっても重要な属性です。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする