---
title: "DOCTYPEとは？HTML宣言の役割をやさしく解説"
description: "HTMLの先頭に置くDOCTYPE宣言は省いても動くように見えて、ブラウザの描画モードを左右します。なぜ必要なのか、省略するとどんな表示崩れが起きるのかを知りたい初心者向けの解説です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-doctype"
markdown: "https://giga-site.com/articles/what-is-doctype/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# DOCTYPEとは？HTML宣言の役割をやさしく解説

HTMLファイルの一番上にある DOCTYPE という一行。コピペで書いているけれど意味はよく知らない、という人は多いはずです。本記事ではDOCTYPEとは何か、なぜ必要なのか、省くとどんな表示崩れが起きるのかをやさしく解説します。

> Source HTML: https://giga-site.com/articles/what-is-doctype
> Article index: https://giga-site.com/articles/index.md

## DOCTYPEとは

DOCTYPE（ドックタイプ）とは、HTML文書の先頭に書く宣言で、「この文書はHTMLである」とブラウザに伝える役割を持ちます。現在のHTMLでは、文書の一番上に短い一行を書くだけのシンプルな形になっています。

DOCTYPE宣言は、HTMLタグそのものではなく、文書全体の種類を示すための特別な記述です。ページの中身を表すものではないため、画面には何も表示されませんが、ブラウザがページをどう解釈するかを決める重要な合図になります。

## DOCTYPE宣言の役割

DOCTYPEの最も大切な役割は、ブラウザに「標準モード」でページを描かせることです。標準モードでは、ブラウザは現在の仕様に沿った一貫したやり方でレイアウトを計算します。

DOCTYPEが正しく書かれていれば、複数のブラウザで見え方が大きくぶれにくくなります。逆にDOCTYPEがないと、ブラウザは古い時代との互換を保つための特別な解釈をしてしまうことがあります。

## 実務ではどこで関係する？

DOCTYPEは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

DOCTYPEについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 互換モード（quirksモード）とは

互換モード（quirksモード）とは、ブラウザが古い時代のWebページに合わせて、現在の仕様とは異なる古い解釈でページを描く動作のことです。これは、DOCTYPEがなかった頃に作られた多数のページを壊さないために用意された仕組みです。

DOCTYPE宣言を省くと、ブラウザはこの互換モードでページを描こうとします。すると、現在の仕様を前提に書いたCSSが意図どおりに効かず、レイアウトが崩れることがあります。

- 要素の幅や余白の計算方法が現在の前提とずれる
- 意図したCSSが効かず、レイアウトが崩れる
- ブラウザごとに見え方の差が大きくなる
- 原因が分かりにくく、修正に時間がかかる

## DOCTYPEを正しく書く手順

DOCTYPEは難しくありません。次の手順で確認すれば、標準モードを確実に使えます。

1. HTMLファイルの一番上、何よりも先にDOCTYPE宣言を書く
2. 宣言の前に空行やコメント、文字を入れないようにする
3. 続けて html、head、body の基本構造を書く
4. ブラウザでページを開き、レイアウトが意図どおりかを確認する
5. 崩れがある場合は、宣言が先頭にあるか・余計な文字がないかを見直す

## 共有前にモードを確かめる

DOCTYPEの書き忘れは、手元では気づきにくく、別の環境で開いたときに崩れて初めて発覚することがあります。レビューに出す前に、本番に近い状態で表示を確かめておくと安心です。

ギガサイト便はドロップしたHTMLをそのままURLで共有でき、同じURLのままファイルを差し替えられます。DOCTYPEを直したHTMLにすぐ更新して、リンクを送り直さずに表示の違いを再確認できるため、崩れの原因切り分けに役立ちます。

## よくある質問

### DOCTYPEは省略してもよいですか

省略しないことを強くおすすめします。DOCTYPEがないとブラウザが互換モードでページを描き、CSSが意図どおり効かずレイアウトが崩れる原因になります。先頭に一行書くだけなので必ず入れましょう。

### DOCTYPEはどこに書きますか

HTMLファイルの一番先頭、html要素より前に書きます。宣言の前に空行やコメント、その他の文字があると、ブラウザが互換モードになってしまう場合があるため注意してください。

### 標準モードと互換モードの違いは何ですか

標準モードは現在の仕様に沿ってレイアウトを計算するモード、互換モードは古いページに合わせた古い解釈で描くモードです。DOCTYPEを正しく書くことで標準モードになります。

### 今どのモードで表示されているか確認できますか

ブラウザの開発者ツールから、文書のモードを確認できる場合があります。意図せず互換モードになっているときは、まずDOCTYPE宣言が先頭にあるかを見直すのが近道です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)
- [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "DOCTYPEとは？HTML宣言の役割をやさしく解説",
  "description": "HTMLの先頭に置くDOCTYPE宣言は省いても動くように見えて、ブラウザの描画モードを左右します。なぜ必要なのか、省略するとどんな表示崩れが起きるのかを知りたい初心者向けの解説です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-doctype",
  "url": "https://giga-site.com/articles/what-is-doctype",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "DOCTYPEは省略してもよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "省略しないことを強くおすすめします。DOCTYPEがないとブラウザが互換モードでページを描き、CSSが意図どおり効かずレイアウトが崩れる原因になります。先頭に一行書くだけなので必ず入れましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "DOCTYPEはどこに書きますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLファイルの一番先頭、html要素より前に書きます。宣言の前に空行やコメント、その他の文字があると、ブラウザが互換モードになってしまう場合があるため注意してください。"
      }
    },
    {
      "@type": "Question",
      "name": "標準モードと互換モードの違いは何ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "標準モードは現在の仕様に沿ってレイアウトを計算するモード、互換モードは古いページに合わせた古い解釈で描くモードです。DOCTYPEを正しく書くことで標準モードになります。"
      }
    },
    {
      "@type": "Question",
      "name": "今どのモードで表示されているか確認できますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの開発者ツールから、文書のモードを確認できる場合があります。意図せず互換モードになっているときは、まずDOCTYPE宣言が先頭にあるかを見直すのが近道です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```