htmlタグ｜DOCTYPE ドキュメントタイプ・html文書宣言

ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（htmlタグよりも前）に必ず記述するルールとなっています。

インターネットの歴史の中で、HTMLはHTML4.01やXHTML1.0など、いくつかのバージョンアップを重ねてきました。過去のホームページ（ウェブサイト）では、それぞれのバージョンに合わせた非常に長くて複雑なDOCTYPE宣言を記述する必要がありました。しかし、現在の標準規格であるHTML5では、記述が大幅に簡略化され、「<!DOCTYPE>」とだけ記述するのが世界的な標準ルールとなっています。

より専門的には、このDOCTYPE宣言を正確に記述することは、SEO（検索エンジン最適化）やブラウザのレンダリング（描画処理）において非常に重要です。DOCTYPE宣言が記述されていなかったり、間違った記述がされていたりすると、ブラウザは「互換モード（Quirks mode）」と呼ばれる古い独自のルールでページを表示しようとします。その結果、CSSで指定したレイアウトが大きく崩れたり、最新の機能が正常に動作しなくなったりする危険性があります。標準モード（Standards mode）で正しくページを表示させ、ユーザーへ意図した通りのデザインを届けるためには、正しいDOCTYPE宣言を用意します。

また、検索エンジンに対しても、最新の標準規格に準拠した質の高いHTMLドキュメントであることを正確に伝える役割を果たします。クローラーが文書構造をスムーズに解析できるようになるため、間接的にホームページ（ウェブサイト）全体の評価向上に貢献します。事業用のホームページ（ウェブサイト）を構築し、長期的な集客を目指す上で、画面上には直接現れないHTMLの基本ルールを厳密に遵守することは、Webマーケティングの成功を支える強固な土台となります。

本ページでは、DOCTYPE宣言の歴史的な変遷から、現在の正しい記述方法、そしてそれがブラウザの動作やSEOに与える具体的な影響について詳しく解説します。正確な情報伝達と、集客に強いサイト構築のための知識としてお役立てください。

DOCTYPE（ドキュメントタイプ）

<!DOCTYPE>

ホームページ制作（ウェブサイト制作）の際に使用する<!DOCTYPE>についてのご説明です。

ホームページ制作において<!DOCTYPE>はホームページ（ウェブサイト）を構成する文書群のHTMLやXHTMLなどのドキュメントタイプを宣言し、ドキュメント種類を定義します。

HTMLファイルを作成する際にドキュメントタイプ宣言をすることで、HTMLバージョンの指定をすることができます。

現在、HTMLの標準仕様はW3Cの「HTML5」からWHATWGの「HTML Living Standard」へと移行しています。過去のHTML4.01などでは、SGMLという規格に基づいていたため、DTD（文書型定義）を参照する長いDOCTYPE宣言が必要でした。しかし、現在のHTMLはSGMLベースではないため、DTDの参照は不要です。つまり、「<!DOCTYPE>」という記述は、特定のバージョン（HTML5など）を宣言しているのではなく、単に「この文書は最新の標準仕様のHTMLである」とブラウザに伝達するためのものとして再定義されています。現代のホームページ（ウェブサイト）制作においては、バージョンを意識するのではなく、常にこの短いDOCTYPE宣言を記述することが基本ルールです。

<!DOCTYPE> ドキュメントタイプを宣言

<!DOCTYPE>でドキュメントタイプを宣言します。DTD（Document Type Declaration）=文書型宣言

ホームページ制作において、文書の記述の基準となるルールを宣言します。

ドキュメントタイプは<html>より先に記述します。

HTMLやXHTMLなど文書のマークアップにかかる「文書型」を宣言し、その正規表現に沿って文書を記述します。

<!DOCTYPE PUBLIC “”>

PUBLIC

参照しているものが公開された文章であることを示す

“”

引用符に囲まれた部分＝参照する文書の公開識別子（名称）

HTML4.01

HTML4.01は、大半のブラウザに対応。

Strict DTD

HTML4.01の本来の仕様に従った最も厳密で正確なDTD。

非推奨要素や属性、フレームを使用することができない。要素の配置についても厳しい制限がある。

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

Transitional DTD

非推奨要素や属性は使用可能だが、フレームは使用不可。要素の配置については比較的制限が緩やか。

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

Frameset DTD

Transitional DTDとほぼ同様でフレームが使用可能。

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

XHTML

先頭に<?xml version=”” encoding=””?>

続いて以下を記述。

Strict DTD

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

Transitional DTD

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

Frameset DTD

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

HTML5

HTML5は、2014年、W3Cより勧告されたHTMLの改定バージョン。

<!DOCTYPE html>

<!DOCTYPE>

この<!DOCTYPE>によって文書のhtmlバージョンを指定するため、ここでの設定がウェブページ内での使用可能なhtmlタグの種類を決定することになります。

DOCTYPE宣言とブラウザのレンダリングモード

現在のWebブラウザにおいてDOCTYPE宣言が持つ最も重要な役割は、ブラウザの「レンダリングモード」を切り替えることです。

ブラウザには、過去の古いホームページを正しく表示するための「互換モード（Quirks Mode）」と、最新の仕様に準拠して正しく表示するための「標準モード（Standards Mode）」が存在します。

もしDOCTYPE宣言の記述を忘れたり、記述に誤りがあったりすると、ブラウザは自動的に互換モードで動作します。互換モードでは、ボックスモデルの解釈（幅や高さの計算方法）がCSSの標準仕様とは異なる古い挙動になり、意図したレイアウトが崩れる原因になります。

HTML5における「スイッチ」としての役割

HTML4.01やXHTMLの頃は、DOCTYPE宣言の中に長いURLが含まれており、実際にDTD（文書型定義）ファイルを参照する意味合いがありました。しかし、現在のHTML5における <!DOCTYPE html> は、SGMLベースの定義への参照ではなく、単にブラウザを標準モードにするための「スイッチ」として機能しています。

技術的には、この最短の記述だけで、主要なブラウザすべてで標準モードが有効になることが保証されています。

標準準拠モードとSEO、Core Web Vitalsへの影響

正しいDOCTYPE宣言を行い、ブラウザを標準モードで動作させることは、SEO（検索エンジン最適化）の観点からも重要です。

特にGoogleが重視している「コアウェブバイタル」の指標の一つであるCLS（Cumulative Layout Shift：視覚的な安定性）に対し、レンダリングモードの違いは影響を与えます。互換モードで予期せぬレイアウトの崩れやズレが発生すると、ユーザー体験を損なうだけでなく、このCLSのスコアが悪化し、検索順位にマイナスの影響を与える可能性があります。

ホームページの品質を担保し、事業の成果につなげるためには、HTMLの冒頭に正しく宣言を記述することが、Web制作の基本でありながら極めて重要な工程です。

DOCTYPE宣言の本来の目的とブラウザのレンダリングモード

DOCTYPE宣言の記述方法や配置ルールについて、実務上押さえておくべき仕様上の制約がいくつか存在します。これを誤ると、ページのデザインやレイアウトに大きな影響を及ぼす可能性があります。

標準モードと互換モード（Quirks Mode）の制御

DOCTYPE宣言の最も重要な役割は、ブラウザの表示モードを「標準モード」に切り替えることです。DOCTYPE宣言を省略したり、誤った記述をしたりすると、ブラウザは過去の古いホームページ（ウェブサイト）を崩さずに表示するための「互換モード（Quirks Mode）」でページを描画してしまいます。互換モードに陥ると、CSSで指定したレイアウトが予期せぬ形で崩れたり、最新のCSSプロパティが正常に機能しなくなったりします。事業用ホームページ（ウェブサイト）の信頼性を保つためには、正しいDOCTYPE宣言による標準モードの維持が必須です。

先頭配置の絶対ルールと空白文字の排除

DOCTYPE宣言は、HTML文書の1行目の先頭に記述する必要があります。DOCTYPE宣言よりも前にHTMLコメントや半角スペース、改行などが存在すると、一部のブラウザや特定の環境下ではDOCTYPE宣言が正しく認識されず、互換モードを引き起こす原因になるかもしれません。ファイルの先頭には一切の文字や空白を入れず、直接「<!DOCTYPE html>」から書き始めることを徹底します。

検索エンジン最適化（SEO）とDOCTYPEの関連性

DOCTYPE宣言がSEOに与える影響について、正しく理解しておくことはWebマーケティングの観点からも重要です。

ユーザー体験の保護による間接的な評価向上

DOCTYPE宣言を記述したこと自体が、直接的に検索順位を大きく押し上げるわけではありません。しかし、正しい宣言によって標準モードで描画されることで、CSSやJavaScriptが設計通りに動き、レイアウトシフト（ページのガタつき）などを防ぐことができます。その結果、Core Web Vitalsなどのユーザー体験の指標が正常に保たれ、検索エンジンからの評価を下げるリスクを回避できます。クローラーに対して「このページは適切な技術標準に則って構築されている」と示す基本の作法として、すべてのページに正確に記述していきます。

ホームページ制作・SEOの1ポイント

ホームページ制作時にドキュメントタイプの指定がうまくいっていない場合、SEO以前にHTMLタグが正常に機能せずにおかしな挙動を起こすことがありますので、注意が必要です。

HTMLの廃止タグなどの関係で、ホームページのブラウザ描画の際、混乱することがありますので、ドキュメントタイプの指定がしっかりと行われているかを確認しましょう。場合によってはサイトのレイアウト崩れなどの原因になります。

（初回投稿日 2012年5月26日）

html（HTML文書宣言）

ホームページ制作（ウェブサイト制作）の際に使用する<html>タグについてのご説明です。

ホームページ制作において<html>（エイチティーエムエル）タグは、ホームページ（ウェブサイト）を構成するHTMLファイルを作成する際に、ファイルがHTML文書であることを宣言する際に使用します。

ドキュメントタイプ宣言の後、<html>タグで囲まれた部分がhtml文書であることを示します。

<html> html文書であることを宣言

HyperText Markup Language（ハイパーテキストマークアップランゲージ）。<html>タグは、html文書であることを宣言します。ホームページ制作において必ず必要なタグです。
DTD（Document Type Declaration）に続いて記述され、文書の最上位要素となります。

<html>タグで囲まれた部分がHTMLであることを示し、<html>の内側に文書付加情報である<head>タグ、HTML文書の本体部分である<body>タグを設置します。

ホームページ（ウェブサイト）は、これらHTML文書の組み合わせによって生成されています。

html文書の構造（ホームページの基本構造）

html文書は、ドキュメントタイプ宣言の後、<html><head><body>から構成されます。

<html>
<head>
</head>
<body>
</body>
</html>

<!DOCTYPE html>　ドキュメントタイプ宣言
<html>　html文書宣言
　<head>　文書付加情報
　　この間にメタ情報
　</head>　文書付加情報終了
　<body>　文書本体
　　この間にコンテンツ
　</body>　文書本体
</html>　html文書終了

この<html>タグは、そのファイルがhtml文書であることを宣言するため、ほとんどのウェブページにおいては必須タグです（html以外で記述されたものはその文書タイプに合わせた宣言が必要になります）。html4.01、html5問わずhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

このhtml文書宣言はホームページ制作でまずドキュメントタイプ宣言と同様ページの最初に記述する重要な項目です。ファイルの拡張子がphpなどであっても有効ですが、htmlのタグを使用するのであれば必ず記述することが必要な最重要タグの一つです。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作実績

新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作（ホームページ作成）に対応しています。
ホームページ制作実績

ホームページの更新・修正

ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・更新作業・エラー復旧にも対応しております。
ホームページの更新・修正料金価格表

お問い合わせ

htmlタグ｜iframe（インラインフレーム）・frame・frameset・noframes
現在のホームページ（ウェブサイト）制作において、YouTubeの動画やGoogleマップをページ内に埋め込んで表示する場面は頻繁に発生します。このように、閲覧しているページの一部を切り取り、そこに別のHTMLドキュメント（外部ページなど）を読み込んで表示するために使用されるのが「iframe（アイフレーム：インラインフレーム）」タグです。他のコンテンツを手軽
htmlタグ｜head（ヘッド）・link（リンク）
htmlタグ、head（ヘッド）・link（リンク）について。 head（ヘッド） <head></head> ホームページ制作（ウェブサイト制作）の際に使用する<head>タグについてのご説明です。ホームページ制作において<head>（ヘッド）タグはホームページ（ウェブサイト）を構成する各部分の内、HTML
htmlタグ｜meta（メタ）・title（タイトル）
ホームページ（ウェブサイト）制作において、ブラウザや検索エンジンに対してページの設定情報や意味を伝えるためのmetaタグ（メタタグ）は、ユーザーの目には直接見えないものの、サイトのパフォーマンスやWebマーケティングの成果を左右する極めて重要な要素です。文字コードの指定、画面サイズの制御、検索結果に表示される説明文の定義など、ホームページ（ウェブサイト）の根
htmlタグ｜body（ボディ）文書の本体
ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れ
htmlタグ｜h1～h6 見出し
ホームページ（ウェブサイト）制作において、コンテンツの階層構造を示し、ユーザーと検索エンジンの両方にページのテーマやセクションごとの要点を伝えるために使用されるh1〜h6タグ（見出しタグ）は、サイトの品質を決定づける非常に重要な要素です。かつてのホームページ制作では、単に文字を大きくしたり太くしたりするデザインの目的で、文脈に関係なく見出しタグが使われるこ