doctype htmlとは 読み方と書き方 無いと互換モードになる理由

自社サイトのソースを表示すると、いちばん上に <!DOCTYPE html> という1行があった。

タグのようにも見えるが、閉じタグがない。何のために付いているのか、消したらどうなるのか、制作会社に聞いたこともない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。DOCTYPEは、ページの先頭に置く「このページはHTMLの文書です」という宣言です。HTMLの仕様では、必須の前置きと定められています。

仕様が必須とする理由も、仕様の中に書かれています。省略すると、ブラウザが古い時代の表示ルールに切り替わるからです。

この切り替えを、互換モード（quirks mode）と呼びます。互換モードになると、同じHTMLとCSSでも、表示が変わることがあります。

今回、弊社で同じ中身のページを2枚作り、DOCTYPEを付けたものと付けないものをブラウザで開いて確かめました。割合で高さを指定した箱の高さは、DOCTYPEがあれば28px、なければ300pxでした。

DOCTYPEの読み方には、公式の定めが見つかりませんでした。「ドックタイプ」と「ドクタイプ」の両方が使われています。

検索順位やAI検索の引用との関係は、公式の文書に記載が見つかりませんでした。DOCTYPEを書けばAIに引用される、とは言えません。

この記事の軸は、ページ先頭の1行の意味と、無いとき・古いときの直し方です。タグの名前を覚える話は最小限にして、自社サイトで確かめる手順に重心を置きます。

先に答え：DOCTYPEについて、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、その答えの根拠にした資料です。

疑問	答え	根拠にした資料
今の書き方は何か	<!DOCTYPE html> の1行。大文字小文字は区別されない	HTMLの仕様（WHATWG）の書き方の章
必須か	必須の前置き。省略すると別の表示規則になる	HTMLの仕様（WHATWG）の書き方の章
無いとどうなるか	ブラウザが互換モードで文書を読む	HTMLの仕様（WHATWG）の構文解析の章、弊社の実測
書く場所はどこか	ページの先頭。前に置いてよいのは空白とコメントだけ	HTMLの仕様（WHATWG）の書き方の章
古い長い書き方は誤りか	書き方としては古いが、直す前に表示の確認が要る	HTMLの仕様（WHATWG）の構文解析の章
検索やAIに影響するか	公式に記載なし	Google検索セントラル、OpenAIとAnthropicの公式文書

表の中で「記載なし」と書いた行は、調べて見つからなかったという報告です。ないことの証明ではありません。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
DOCTYPEの意味と読み方を知りたい	DOCTYPEとは何か：仕様に書かれた定義
書かないとどうなるか知りたい	無いとどうなる：互換モードという別の表示規則
先頭に何かが混ざっていないか不安	先頭に何があると効かなくなるか
古い長いDOCTYPEが残っている	古いDOCTYPEが残っているときの考え方
自社サイトの状態を確かめたい	自社サイトで確かめる3つの方法
WordPressのどこで出ているか知りたい	WordPressでは、どこでDOCTYPEが出ているか
直したいが、見た目が崩れるのが怖い	直す順番
すぐ点検したい	今日できる点検

この記事で使う言葉

DOCTYPEの話は、似た言葉が多く出ます。迷わないように、この記事での使い方を先に決めておきます。

言葉	この記事での意味
DOCTYPE	ページ先頭に書く、文書の種類の宣言。<!DOCTYPE html> の1行
互換モード	ブラウザが古い表示規則で文書を描く状態。英語ではquirks mode
標準モード	ブラウザが現在の仕様どおりに描く状態。英語ではno-quirks mode
ほぼ標準モード	標準モードに、一部の古い挙動を残した状態。英語ではlimited-quirks mode
構文解析	ブラウザがHTMLの文字列を読んで、ページの部品に組み立てる作業
先頭	ファイルの最初の文字。ソースの1文字目を指す。画面の上の位置は関係しない

「先頭」は、ソースの1文字目から数えた位置の話です。画面の上に見えるかどうかは関係しません。この違いが、あとの節で何度も出てきます。

この記事の根拠にした資料

この記事は、次の資料を2026年11月8日に実際に開いて読んでから書いています。

• HTMLの仕様（WHATWG）の最新版（2026年11月6日更新）。書き方の章と構文解析の章
• DOMの仕様（WHATWG）の最新版（2026年11月4日更新）。文書の表示モードを返す項目の定義
• 互換モードの仕様（WHATWG、2026年10月19日更新）
• Google検索セントラル「Google 検索の技術要件」（日本語版・2025年12月18日更新）
• Google検索セントラル「AI 機能とウェブサイト」（日本語版・2025年12月31日更新）
• OpenAIとAnthropicのクローラーに関する公式文書
• WordPress公式のソースコード（公開リポジトリの最新版）

あわせて、ブラウザ（Chromium 145）で作ったテスト用のページを開き、表示モードと見た目を測りました。書くのは、そこで確かめられた範囲だけです。確かめられなかったことは「公式に記載なし」と書きます。

Q&Aサイトで見かけた、DOCTYPE宣言が必要か聞く質問

先日、Q&Aサイトでこのような悩みを拝見しました。投稿から年数が経っていますが、いまも同じ疑問を持つ人は多いと思います。

投稿者は、テンプレートを借りてホームページを作っている初心者でした。以前にも質問して、本を買うよう勧められ、実際に2冊買っています。

ところが、2冊の本でページの土台の書き方が違っていました。1冊はXHTMLの説明が中心で、もう1冊は簡潔で分かりやすいけれど、書く内容が違います。

そこで、「DOCTYPE宣言は必要ですか」と尋ねていました。

回答に書かれていたこと

寄せられた回答は、立場が分かれていました。

ひとつは、基本的に必須と思ってほしい、というものでした。書かない理由を理解していないなら、書いたほうがよい、という助言も添えられています。

別の回答は、CSSでデザインするときに、DOCTYPEの有無で表示が変わるブラウザがある、と指摘していました。

反対に、なくても問題ないと思う、という回答もありました。音声や動画のタグを使う場合だけは必須だ、という補足が付いていました。

調べればいくらでも出てくる、と突き放す回答もありました。

回答のどこまでが確かめられるか

この回答群は、確かめられる部分と、確かめられない部分が混ざっています。

「基本的に必須」「CSSの表示が変わる」は、仕様と実測で確かめられます。次の節以降で、原文と測定結果を示します。

「なくても問題ない」は、見た目が崩れなかった場合の経験としては成り立ちます。ただし、仕様は必須としています。しかも「音声や動画を使う場合だけ必須」という限定は、私が読んだ仕様の範囲には見つかりませんでした。仕様は用途を限らず、文書の前置きとして必須だと定めています。

質問から読み取れる3つの疑問

この質問の中には、3つの疑問が混ざっています。

1つ目は、DOCTYPEは本当に必要なのか。2つ目は、本によって書き方が違うのはなぜか。3つ目は、自分のページはどちらに当たるのか。

本によって書き方が違うのは、HTMLの書き方が時代で変わってきたからです。その変化は、仕様に残っている古いDOCTYPEの一覧から読み取れます。古い書き方の扱いは、あとの節で説明します。

先に短く答える

DOCTYPEは、書きます。今の書き方は、<!DOCTYPE html> の1行です。

書き忘れていても、見た目が大きく崩れないページは多くあります。それでも、ブラウザは古い表示規則に切り替わっています。気づかないうちに、箱の高さや表の文字の大きさが、仕様と違う計算になっています。

次の節から、仕様の原文に当たって、中身を順に見ていきます。

DOCTYPEとは何か：仕様に書かれた定義

まず、DOCTYPEが何を指す言葉なのかを、仕様の原文に当たって確かめます。

HTMLの仕様（WHATWG）の書き方の章は、DOCTYPEを次のように説明しています。「DOCTYPEは、必須の前置きである」という趣旨の一文で、続けて理由が書かれています。

「DOCTYPEは歴史的な理由で必須である。省略すると、ブラウザは、いくつかの仕様と互換性のない別の表示モードを使う傾向がある」。これは、仕様の英語の原文を和訳したものです。

DOCTYPEを入れておけば、ブラウザは関連する仕様に沿って描くよう最善を尽くす、と仕様は続けています。

読み方と語の成り立ち

読み方は、HTMLの仕様にも、Google検索セントラルにも、定めが見つかりませんでした。実際には「ドックタイプ」「ドクタイプ」のどちらも使われています。

どちらで言っても、相手には通じます。会議で制作会社と話すときは、「ページの一番上の、文書の種類を宣言する1行」と言い添えれば確実です。

語の成り立ちは、仕様のほかの部分から推測できます。DOMの仕様には、文書の種類を表す部品として「DocumentType」という名前が出てきます。DOCTYPEは、この文書の種類（document type）を縮めた書き方だと考えると、筋が通ります。

ただし、略称の由来そのものを述べた一次資料は、今回は見つけられませんでした。ここは推測だと明記しておきます。

書き方の決まり

仕様が定める書き方は、短い部品の並びです。

順番	部品	例
1	小なり記号と感嘆符に続く DOCTYPE という文字	<!DOCTYPE
2	空白が1つ以上	（半角スペース）
3	html という文字	html
4	古い互換用の文字列（任意）	通常は書かない
5	空白が0個以上
6	大なり記号	>

仕様はこれを「つまり、大文字小文字を区別しない <!DOCTYPE html> である」とまとめています。

覚えるのは、<!DOCTYPE html> の1行だけです。

大文字と小文字

仕様は、DOCTYPEの文字も html の文字も、大文字小文字を区別しない（ASCIIの範囲で）と定めています。

弊社の測定でも、<!doctype HTML> と書いたページは、<!DOCTYPE html> と同じ標準モードで読まれました。

実際のサイトでも、書き方は揃っていません。WordPressの公式ソースを見ると、ブロックテーマの表示ひな形（template-canvas.php）は <!DOCTYPE html> と大文字で書いています。同じ公式の標準テーマ Twenty Twenty-One のheader.phpは <!doctype html> と小文字で書いています。

どちらも仕様に合っています。大文字小文字を直すために、ファイルを触る必要はありません。

書く場所：ファイルの先頭

仕様は、HTML文書を次の順番で並べるよう定めています。

順番	置くもの	必須か
1	文字の並びの目印（BOM）1つ	任意
2	コメントと空白	任意（いくつでも）
3	DOCTYPE	必須
4	コメントと空白	任意（いくつでも）
5	html要素（文書の本体）	必須
6	コメントと空白	任意（いくつでも）

DOCTYPEの前に置いてよいのは、BOM、コメント、空白だけです。文字や、タグを置いてはいけません。

この決まりを破るとどうなるかは、あとの節で実測の結果を示します。

無いとどうなる：互換モードという別の表示規則

DOCTYPEを省略すると、ブラウザは「互換モード」に入ります。この節では、互換モードとは何か、何が変わるのかを、仕様と測定で確かめます。

ブラウザの3つの表示モード

互換モードの仕様（WHATWG）は、歴史を次のように説明しています。ブラウザには、HTMLを描く表示モードがいくつかあります。

原因は、歴史上の行き違いです。CSSの仕様が、当時のブラウザの動きと合っていませんでした。既存のサイトを壊さないために、ブラウザは新しい表示モードを導入しました。

その結果、現在のブラウザには3つのモードがあります。

モード	仕様での名前	どんなときに入るか
標準モード	no-quirks mode	<!DOCTYPE html> がある
ほぼ標準モード	limited-quirks mode	XHTML 1.0 の暫定版など、一部の古いDOCTYPEがある
互換モード	quirks mode	DOCTYPEがない、または一部の古いDOCTYPEがある

どのモードになるかは、HTMLの仕様の構文解析の章に、DOCTYPEの中身ごとに書かれています。

ページ側から読み出す方法も、DOMの仕様にあります。文書のcompatMode（互換モードの種類を返す項目）は、互換モードのときだけ文字列の BackCompat を返し、それ以外は CSS1Compat を返します。

つまり、compatMode が BackCompat なら、そのページは互換モードで描かれています。

互換モードで変わること

互換モードの仕様は、CSSの章で、互換モードのときだけ有効な挙動を一覧にしています。全部で13項目あります。

そのうち、サイトの見た目に関わる代表的なものを抜き出します。

仕様の項目	互換モードでの挙動
割合による高さの計算	祖先の高さが決まっていなくても、割合を計算する
html要素が表示領域を埋める	html要素が、表示領域の高さまで広がる
body要素がhtml要素を埋める	body要素が、html要素の高さまで広がる
表のセルの幅の計算	セルの中の画像の前後で折り返さない
行の高さの計算	中身が空の行内の箱を、行の高さ0として扱う（ほぼ標準モードでも適用）

あわせて、HTMLの仕様の表示の章には、互換モードのとき表（table）がfont-sizeなどを親から引き継がない、という規則があります。

弊社で測った結果：同じ中身を2枚

仕様の規則が、実際のブラウザでどう見えるかを測りました。

同じ中身のHTMLを2枚作り、1枚はDOCTYPEを付け、もう1枚は付けませんでした。中身は、背景が灰色で高さを50%とした箱、文字の大きさを24pxにしたbody、表のセル1つです。

Chromium 145で、表示領域を幅800px、高さ600pxにして開き、値を読み出しました（2026年11月8日・弊社実測）。

測った項目	DOCTYPEあり	DOCTYPEなし
compatMode の値	CSS1Compat	BackCompat
高さ50%の箱の高さ	28px	300px
body要素の高さ	62px	600px
表のセルの文字の大きさ	24px	16px

DOCTYPEがあると、高さ50%の箱は、中身の分の28pxにしかなりません。祖先の高さが決まっていないので、割合が計算できないからです。

DOCTYPEがないと、body要素が表示領域いっぱいの600pxに広がり、その半分の300pxになりました。

表のセルの文字の大きさも、DOCTYPEなしでは親の24pxを引き継がず、ブラウザの標準の16pxに戻りました。

測定から言えること

この測定が示すのは、同じHTMLとCSSでも、DOCTYPEの有無だけで見た目が変わる、という事実です。

テーマを作った人は、DOCTYPEなしの状態でレイアウトを組み、その見た目を正解だと思っているかもしれません。その場合、DOCTYPEを付け直した瞬間に、見た目が変わります。

だから、DOCTYPEが抜けているサイトを見つけたときは、まず付けて表示を比べる手順が要ります。直し方は、あとの節で説明します。

先頭に何があると効かなくなるか

DOCTYPEを書いているのに互換モードになっているサイトが、実際にあります。原因はたいてい、DOCTYPEの前に何かが混ざっていることです。

前の節で見たとおり、仕様がDOCTYPEの前に置いてよいと認めているのは、BOM、コメント、空白だけです。それ以外が先に来るとどうなるのか、仕様の読み方と実測を合わせて説明します。

仕様の読み方：構文解析の最初の段階

HTMLの仕様の構文解析の章には、ブラウザがHTMLを読み始める最初の段階が書かれています。この段階を、仕様は「initial」と呼んでいます。

この段階の規則は、トークンの種類ごとに分かれています。空白の文字は無視します。コメントは、そのまま文書に取り込みます。DOCTYPEが来たら、中身を調べて表示モードを決めます。

それ以外のものが来たら、仕様は次のように定めています。「文書がiframeのsrcdoc文書でなければ、これは構文エラーである。表示モードを変えられない旗が立っていなければ、文書を互換モードにする」。

つまり、DOCTYPEより先に文字やタグが来た時点で、互換モードに決まります。その後ろにDOCTYPEが現れても、取り返しはつきません。

弊社で測った結果：先頭の状態ごとの表示モード

仕様の読み方が実際のブラウザの動きと合っているかを、測りました。先頭の状態だけを変えた小さなHTMLを作り、Chromium 145で開いて、compatModeの値を読み出しました（2026年11月8日・弊社実測）。

先頭の状態	compatModeの値	表示モード
<!DOCTYPE html> が1行目にある	CSS1Compat	標準モード
改行とコメントのあとに <!doctype HTML>	CSS1Compat	標準モード
コメント、DOCTYPE、コメントの順	CSS1Compat	標準モード
BOMのあとにDOCTYPE	CSS1Compat	標準モード
XMLの宣言（<?xml ...?>）のあとにDOCTYPE	CSS1Compat	標準モード
文字「x」と改行のあとにDOCTYPE	BackCompat	互換モード
<p> 要素のあとにDOCTYPE	BackCompat	互換モード
DOCTYPEがない	BackCompat	互換モード

標準モードを保てたのは、空白、コメント、BOM、XMLの宣言が先に来た場合でした。

互換モードになったのは、文字や要素が先に来た場合と、DOCTYPEそのものがない場合です。仕様の読み方どおりです。

XMLの宣言については、HTMLの仕様の構文解析の章に、処理命令を取り込む規則が見つかります。今回のブラウザでは、標準モードのままでした。ただし、すべてのブラウザで同じとは言えません。測ったのはChromium 145だけです。

DOCTYPEの前に文字が混ざる原因

先頭に文字が混ざる原因は、サイトを動かす仕組みの側にあることが多くなります。HTMLのファイルを書き間違えた例は、むしろ少数です。

原因	何が起きるか	見分け方
PHPのエラーや注意の表示	画面にエラー文が出力され、HTMLの先頭に混ざる	ソースの1行目に、エラー文や注意書きの文字がある
テーマのファイルの先頭の余計な出力	文字や要素が、DOCTYPEより前に出る	ソースの先頭が、DOCTYPEではない
別のプログラムが先に出力	空白のほか、何かの文字が先に出る	先頭付近に見覚えのない文字列がある
文字コードの目印の混入	BOMが付く	仕様では許容。互換モードにはならない

BOMは、仕様が許容しています。今回の測定でも、標準モードのままでした。

空白と改行も同じです。テーマのファイルの先頭に空行が入っていても、表示モードは変わりません。

古いDOCTYPEが残っているときの考え方

次は、ページ先頭に長いDOCTYPEが書かれているサイトです。HTML4やXHTMLの時代に作られたサイトでは、今も見かけます。

長いDOCTYPEの読み方

長いDOCTYPEは、いくつかの部品に分けて読むと、意味が分かります。

たとえば、HTML 4.01の暫定版の書き方は、次のような形でした。

“`html

“`

先頭の <!DOCTYPE HTML までは今と同じです。そのあとに、PUBLICという文字、引用符で囲んだ公開識別子、URLの順に並びます。

公開識別子の中の「DTD」は、文書型定義（Document Type Definition）の略です。HTMLのバージョンと、暫定版か厳密版かを区別する名札として使われていました。

HTMLの仕様の構文解析の章には、この名札の一覧が載っています。ブラウザは、名札を見て表示モードを決めているのです。

名札ごとの表示モード

仕様の一覧から、サイトでよく見かける書き方を選んで整理します。

書かれているDOCTYPE	仕様での表示モード	弊社の測定（compatMode）
<!DOCTYPE html>	標準モード	CSS1Compat
HTML 4.01 厳密版（URLあり）	標準モード	CSS1Compat
HTML 4.01 暫定版（URLなし）	互換モード	BackCompat
HTML 4.01 暫定版（URLあり）	ほぼ標準モード	測定は未実施
XHTML 1.0 暫定版（URLあり）	ほぼ標準モード	CSS1Compat
<!DOCTYPE html SYSTEM "about:legacy-compat">	標準モード	CSS1Compat

ここで注意が必要なのは、HTML 4.01の暫定版です。同じ名札でも、URLが付いているかどうかで、仕様上の表示モードが変わります。URLがないと互換モード、あるとほぼ標準モードです。

また、ほぼ標準モードの場合、compatModeの値は CSS1Compat になります。値だけでは、標準モードとほぼ標準モードの区別がつきません。

ほぼ標準モードで残る古い挙動は、互換モードの仕様のCSSの章で、互換モードとほぼ標準モードの両方に適用すると書かれた項目です。行の高さの計算に関する2項目が、これに当たります。

末尾の短い互換用の書き方

表の最後にある about:legacy-compat は、特別な書き方です。

仕様は、短い <!DOCTYPE html> を出力できないプログラムのために、この書き方を認めています。ただし、「その種のプログラムでない限り使うべきでない」と書いています。

手で書くHTMLでは、使う場面はありません。

古いDOCTYPEは、すぐ直すべきか

古い書き方が残っていること自体は、すぐに問題を起こすとは限りません。HTML 4.01の厳密版やXHTML 1.0の暫定版なら、表示モードは標準かほぼ標準で、見た目は安定しています。

直す価値があるのは、次の3つの場合です。

1つ目は、URLのないHTML 4.01暫定版のように、互換モードになる書き方が残っている場合。2つ目は、DOCTYPEがそもそも存在しない場合。3つ目は、先頭に何かが混ざって互換モードになっている場合です。

いずれも、compatModeの値を読み出せば、BackCompatで見分けられます。

自社サイトで確かめる3つの方法

ここからは、自社サイトのDOCTYPEが正しく働いているかを、確かめる手順です。特別な道具は要りません。

3つの方法は、見る場所が違います。上から順に、手軽な方法を並べました。

方法1：ページのソースを表示する

いちばん手軽なのは、ブラウザでページのソースを表示して、1行目を見ることです。

ソースの1行目が <!DOCTYPE html> なら、書き方は正しい形です。空行やコメントが先にあっても、仕様の範囲です。

1行目に文字や、見覚えのないタグがあれば、その位置にDOCTYPEが来ていません。次の節で、原因を探す方法を説明します。

方法2：コマンドで先頭だけ取り出す

ブラウザを介さず、サーバーが返した文字そのものを見る方法もあります。パソコンのターミナルで、curl というコマンドを使います。

curl -s https://自社のURL/ | head -c 200 と打つと、返ってきた文字の先頭200字が表示されます。

この方法はブラウザを介さないので、サーバーが返した文字をそのまま確かめられます。

方法3：ブラウザの開発者ツールで表示モードを読む

ソースの先頭が正しく見えても、表示モードが標準とは限りません。最終的な答えは、ブラウザ自身に聞くのが確実です。

ブラウザの開発者ツールを開き、コンソールに document.compatMode と打ちます。CSS1Compat と返れば、標準モードかほぼ標準モードです。BackCompat と返れば、互換モードです。

もうひとつ、document.doctype と打つ方法もあります。DOMの仕様では、DOCTYPEがなければ null を返すと定められています。

3つの方法の使い分け

方法	分かること	向いている場面
ソース表示	1行目の文字	まず全体を見たいとき
curlで先頭取得	サーバーが返した先頭の文字	ブラウザの影響を除きたいとき
compatMode	ブラウザが決めた表示モード	最終判定をしたいとき

制作会社に確認を頼むときは、「トップページと記事ページの両方で、compatModeの値を教えてください」と伝えれば足ります。ページの種類によって、使うひな形が違うことがあるからです。

WordPressでは、どこでDOCTYPEが出ているか

WordPressのサイトでは、DOCTYPEを出している場所が、テーマの種類で決まっています。公式のソースコードで確かめた範囲を書きます。

ブロックテーマの場合

近年のWordPressのブロックテーマは、WordPress本体のtemplate-canvas.phpというファイルが、ページ全体の枠を出力します。

2026年11月8日に公開リポジトリの最新版を開くと、このファイルの冒頭近くに <!DOCTYPE html> が書かれていました。続いて、html要素、head要素、body要素の順に出力します。

ブロックテーマを使っていて、テーマ側で触っていなければ、DOCTYPEは本体が出しています。

クラシックテーマの場合

従来型のテーマは、header.phpというファイルが、ページの先頭を出力します。

WordPress公式の標準テーマのひとつ、Twenty Twenty-Oneのheader.phpは、ファイルの冒頭に <!doctype html> を書いています。小文字ですが、仕様に合っています。

自作のテーマや、古い時期に作られたテーマでは、この行が抜けていたり、長い古い書き方になっていたりすることがあります。

どこを見ればよいか

使っているテーマ	見る場所	確かめること
ブロックテーマ	基本は見なくてよい（本体が出力）	表示モードがBackCompatのとき、プラグインを疑う
クラシックテーマ	header.php	ファイルの冒頭の行がDOCTYPEか
子テーマを使っている	子テーマ側のheader.php	親と子のどちらが読まれているか
自作・古いテーマ	header.phpの先頭とfunctions.php	先頭に出力が混ざっていないか

functions.phpは、テーマ全体の設定を書くファイルです。ここの末尾に余計な空行や文字があると、ページの先頭に出力が混ざることがあります。

これは、WordPressの公式ドキュメントでは確かめていません。PHPの動き方からの一般的な推測です。実際に原因かどうかは、ページのソースで先頭の文字を確かめて判断してください。

直す順番

DOCTYPEの問題が見つかったら、いきなりファイルを直さず、次の順番で進めます。

手順1：いまの状態を記録する

直す前に、主要なページの見た目を保存します。トップページ、サービスのページ、記事のページ、問い合わせフォームのページを、画面全体のスクリーンショットで撮ります。

前の節で測ったとおり、DOCTYPEを付けると、箱の高さや表の文字の大きさが変わることがあります。変化を見つけるには、直す前の記録が要ります。

手順2：原因を特定する

compatModeがBackCompatのとき、原因は2つに分かれます。DOCTYPEがそもそもないか、DOCTYPEの前に何かが混ざっているかです。

ソースの先頭を見れば、どちらかが分かります。DOCTYPEがなければ追加し、前に混ざったものがあれば、その出力元を探します。

手順3：1行だけ直す

追加や修正は、<!DOCTYPE html> の1行です。複数の変更を一度にしないでください。

長い古いDOCTYPEを置き換えるときも、<!DOCTYPE html> の1行に書き換えれば足ります。

手順4：見た目を見比べる

直したら、手順1で撮ったページを開き、見比べます。

特に見るのは、高さが決まっている箱、表の文字の大きさ、フォームの余白の3か所です。互換モードに依存していた部分が、ここに出やすいからです。

手順5：崩れた場所は、CSSで直す

見た目が変わった場所は、CSSで直します。DOCTYPEを外して元に戻す方法は、互換モードの状態に逆戻りします。

高さの割合が効かなくなった箱なら、祖先の要素にも高さを指定します。表の文字の大きさが変わったなら、tableに文字の大きさを明示します。

症状と直し方の対応

症状	見分け方	直し方
DOCTYPEがない	ソースの1行目がDOCTYPEでない、doctypeがnull	<!DOCTYPE html> を先頭に追加する
前に文字が混ざる	1行目に文字やタグがある	出力元のファイルから、余計な出力を取り除く
古い長いDOCTYPE	1行目が長い宣言	<!DOCTYPE html> に置き換える
直したら崩れた	直前の記録と見た目が違う	崩れた場所を、CSSで明示的に指定する
直しても変わらない	compatModeが同じ	キャッシュとプラグインを疑う

弊社の公開記事30ページで確かめたこと

弊社のサイト（kenkyo.ai）でも、同じ確認をしました。2026年11月8日に、公開記事を新しい順に30ページ取得し、返ってきた文字の先頭を調べました。

サーバーへの負担を避けるため、1ページずつ1秒以上の間隔を空けて取りました。

結果は、30ページすべてで、先頭の文字が <!DOCTYPE html> でした。その直後には、言語を日本語と指定したhtml要素が続いていました。

この30ページは、記事ページだけです。トップページ、固定ページ、別のドメインのサイトは測っていません。測っていない範囲については、何も言えません。

また、先頭の文字を調べただけで、30ページすべてのcompatModeを読み出したわけではありません。ただし、先頭が正しくDOCTYPEから始まっていれば、仕様のとおり標準モードに入ります。

言語を指定するlang属性の役割は、lang属性の記事で説明しています。html要素に付ける属性なので、DOCTYPEの次の行で出てきます。

検索エンジンとAIとの関係：公式に書かれていること

DOCTYPEを正しく書くと、検索順位が上がるのか。AI検索に引用されやすくなるのか。この疑問に、公式の文書がどこまで答えているかを確かめました。

Google検索セントラルの技術要件

Google検索セントラルの「Google 検索の技術要件」（日本語版・2025年12月18日更新）は、検索結果に表示されるための最低限の技術要件を挙げています。

要件は3つです。Googlebotがブロックされていないこと、ページが機能していること（HTTPステータスコード200を返す）、インデックス登録可能なコンテンツがあること、です。

この文書の本文にDOCTYPEという語は出てきません。技術要件の中に、DOCTYPEは含まれていません。

AI機能とウェブサイトの文書

「AI 機能とウェブサイト」（日本語版・2025年12月31日更新）には、次の説明があります。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません」。

この文書にも、DOCTYPEという語は出てきません。AI機能で表示されるための条件は、ページがインデックスに登録され、スニペットが表示され、検索の技術的要件を満たしていること、と書かれています。

OpenAIとAnthropicの公式文書

OpenAIのクローラーの概要ページと、Anthropicのクローラーに関する公式ヘルプも開きました。

どちらも、クローラーの名前と、robots.txtでの制御の説明が中心です。DOCTYPEという語は、私が開いた範囲には出てきませんでした。

公式に書かれていないこと

疑問	公式の記載
DOCTYPEを書くと検索順位が上がるか	記載なし
DOCTYPEを書くとAIに引用されやすくなるか	記載なし
DOCTYPEがないとインデックスされないか	記載なし。技術要件には含まれていない
互換モードのページをAIが読めないか	記載なし

「記載なし」は、効果がないという意味ではありません。公式が何も約束していない、という意味です。

弊社の整理

ここからは、公式の文書に書かれていない、弊社の整理です。

仕様上、DOCTYPEはブラウザの表示を決める前置きです。表示のずれは、人が読むときの体験に出ます。表示が崩れたページは、読まれ方が変わる可能性があります。

検索エンジンやAIがHTMLをどう読むかは、公式に記載がありません。DOCTYPEを理由に順位や引用を期待するのは、根拠がない話です。

DOCTYPEを書く理由は、ブラウザに仕様どおり描いてもらうためです。AIのためではありません。AIがページを読む手前の話として、JavaScriptで後から描かれる内容の扱いは、AIクローラーとJavaScriptの記事で整理しています。

よくある質問

Q1. DOCTYPEは必ず必要ですか

HTMLの仕様は、必須の前置きと定めています。書かなくてもページは表示されますが、ブラウザは互換モードという別の規則で描きます。

Q2. DOCTYPEは大文字と小文字のどちらで書きますか

どちらでも構いません。仕様は大文字小文字を区別しないと定めています。WordPress公式のソースでも、大文字のものと小文字のものが混在しています。

Q3. 古い長いDOCTYPEが残っています。すぐ直すべきですか

HTML 4.01の厳密版やXHTML 1.0の暫定版なら、表示モードは安定していることが多く、急ぐ必要はありません。URLのないHTML 4.01の暫定版のように、互換モードになるものは直す価値があります。直すときは、必ず表示を見比べてください。

Q4. DOCTYPEを直したら、表示が崩れました。どうすればよいですか

崩れた場所は、CSSで直します。DOCTYPEを外すと、互換モードに逆戻りします。高さの割合、表の文字の大きさ、フォームの余白が、互換モードに頼っていた例として挙げられます。

Q5. DOCTYPEは、AI検索への対策になりますか

公式の文書に、記載はありません。Googleは、AI機能で表示されるための追加の要件も特別な最適化も不要と説明しています。DOCTYPEは、ブラウザの表示を正しくするための1行です。

まとめ：ページ先頭の1行を、確かめて直す

DOCTYPEは、HTML文書の先頭に置く必須の前置きです。今の書き方は <!DOCTYPE html> の1行で、大文字小文字は区別されません。

省略したり、先頭に文字や要素が混ざったりすると、ブラウザは互換モードに入ります。弊社の測定では、同じ中身でも、割合で指定した箱の高さが28pxと300pxに分かれました。

前に置いてよいのは、BOM、コメント、空白です。弊社の測定でも、XMLの宣言を前に置いたページは標準モードのままでした。

古い長いDOCTYPEは、URLのないHTML 4.01の暫定版のように互換モードになるものと、標準やほぼ標準モードに入るものがあります。

自社サイトの状態は、ソース表示、curl、compatModeの3つで確かめられます。直すときは、見た目を記録してから、1行だけ変えて見比べます。

検索順位やAI検索への影響は、公式に記載がありません。DOCTYPEを書く理由は、ブラウザに仕様どおり描いてもらうことです。

弊社の公開記事30ページは、すべて先頭が <!DOCTYPE html> でした。

今日できる点検

点検すること	方法	合格の目安
ソースの1行目	トップページと記事ページのソースを表示する	<!DOCTYPE html> が1行目にある
表示モード	開発者ツールのコンソールで document.compatMode を読む	CSS1Compat と返る
先頭の混入物	curlで先頭200字を取り出す	文字やタグが、DOCTYPEより前にない
古いDOCTYPE	ソースの1行目が長い宣言でないか見る	長いものは、置き換えの計画がある
テーマの種類	ブロックテーマかクラシックテーマかを管理画面で確かめる	見るファイルが分かっている
直す前の記録	主要ページの画面全体を保存する	4ページ以上、保存してある
直したあとの見比べ	高さのある箱、表、フォームを見る	崩れがない、または崩れの直し方が決まっている

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。