DOCTYPE宣言の機能と使い方の詳しい説明

DOCTYPE宣言の機能と使い方の詳しい説明

1. ブラウザのレンダリングモードとdoctype

一部の Web ページは標準に従って作成されていますが、多くは標準に従っていません。標準に準拠した Web ページを作成できない場合でも、ブラウザで標準に従ってページを正しく表示する必要があります。現在、多くの Web ページには非標準のコードが使用されていますが、それでも正常に動作しています。実際、古いブラウザ用に設計されたコードのほとんどは、新しいブラウザでも正しく表示されます (ただし、レンダリングは異なる場合があります)。その理由は何でしょうか?実際、最新の標準に厳密に従うと、それらのページの存在の基盤そのものが完全に破壊されてしまいます。もちろん、変化を期待するブラウザにとっては、これは受け入れられないものです。

ブラウザレンダリングモード

最新のブラウザには、標準に準拠した Web ページと古いブラウザ向けに設計された Web ページの両方をサポートするために、さまざまなレンダリング モードが含まれています。これらのうち、標準モード (厳密なレンダリング モードとも呼ばれます) は最新の標準に準拠した Web ページをレンダリングするために使用され、Quirks モード (緩いレンダリング モードまたは互換性モードとも呼ばれます) は従来のブラウザー用に設計された Web ページをレンダリングするために使用されます。また、Mozilla/Netscape 6 には、古いバージョンの標準向けに設計されたページをサポートする新しい Almost Standards モードがあることにも注意してください。

doctype 切り替えとは何ですか?
Web ページの上部に配置された doctype 宣言は、ブラウザを正しいレンダリング モードにするための鍵となります。ブラウザは、doctype 宣言で指定されたドキュメント タイプを正しく表示するために、適切なレンダリング モードに自動的に切り替わります。

理論的には、これはかなり直感的なスイッチになるはずです。 doctype が現在の Web ページが標準 (つまり、HTML 4+ または XHTML 1+) ドキュメントであることを示している場合、ブラウザは標準モードに切り替わります。 doctype が指定されていない場合、または HTML 3.2 以前が指定されている場合、ブラウザは Quirks モードに切り替わります。これにより、ブラウザは、古い非標準の Web ページを完全に破棄することなく、標準に準拠したドキュメントを正しく表示できるようになります。

文書型切り替えの問題
ただし、doctype の切り替えは不完全な解決策です。 Web ドキュメントで doctype 宣言を使用した場合でも、ブラウザーが期待どおりのレンダリング モードで Web ページを表示しない場合があります。これには多くの理由があり、doctype の形式が正しくないことや、XHTML ページなどの異なる <?xml version="1.0" encoding="UTF-8"?>) ヘッダーなどが含まれます。ただし、IE、Opera、および古いバージョンの Safari では、ドキュメントの最初の行が doctype 宣言であることが想定されています。したがって、その前に何か他のもの (XML プロローグを含む) がある場合、Doctype は認識されません。したがって、XML プロローグが存在すると、IE、Opera、Safari は Quirks モードになります。 XML プロローグは必須ではないため、XHTML ページでは安全に省略できます。注: XML プロローグに欠落している encoding 属性を補うために、http-equiv メタ タグに charset 属性を必ず含めてください。

欠落または相対 URL:
完全な doctype 宣言には、対応するドキュメント タイプ定義 (DTD) ファイルの URL が含まれます。 URL が欠落しているか、完全修飾インターネット アドレスではなく相対パスとして指定されている場合、ほとんどのブラウザーは、doctype 宣言で指定されたモードに関係なく、Quirks モードに入ります。

間違ったドキュメントタイプ:
ブラウザは doctype 宣言の形式とフォーマットに非常に敏感で、正しくない形式の doctype を認識できない場合は Quirks モードに強制的に切り替わります (このため、自分で入力するのではなく、既知の正しい doctype をコピーしてドキュメントに貼り付けることをお勧めします)。不正な doctype の一般的な原因は、doctype の最初の部分と URL の間にスペースがないことです。 2 行の doctype を 1 行にまとめると、そのスペースが失われることがよくあります。

移行ドキュメントタイプ:
ブラウザが移行的な doctype を処理するときに、不整合が発生する可能性が最も高くなります。 IE と Opera は標準モードを使用します。Netscape 6 および Safari の以前のバージョンは Quirks モードを使用します。Netscape 7、Mozilla 1、および Safari の新しいバージョンは、標準モードのよりフォールト トレラントなバージョンである Netscape の Almost Standards モードを使用します。
不明なドキュメントタイプ:
ブラウザは、認識できない doctype を処理する方法にも一貫性がありません。 IE と Opera は標準モードになります。つまり、認識されない doctype は、まだブラウザに統合されていない新しい標準であると想定します。一方、Netscape 6 は、認識されない doctype に遭遇すると Quirks モードに切り替わります。
ブラウザー間の不一致を認識し、問題を事前に回避していれば、doctype を切り替えることは、ブラウザーを正しいレンダリング モードに設定し、Web ページを正しく表示するための効果的な方法になります。

2. 正しいDOCTYPE宣言を使用する

私たちは通常、Web ページを作成するときにこの点を見落としがちです (通常、書くのが面倒でブラウザのデフォルトを使用する私を含む)。Web ページのコーディング標準化の現在の傾向では、誰もがこの詳細を理解する必要があり、役に立ちます。諺にあるように、ルールがなければ秩序はない。

ほとんどの Web ドキュメントには先頭に doctype 宣言がありますが、多くの人はそれに注意を払っていません。これは、新しいドキュメントを作成するときに Web 作成ソフトウェアが適切に処理しない多くの詳細事項の 1 つです。多くの人が見落としていますが、doctype は標準に準拠するすべての Web ドキュメントで必須の要素です。 doctype はコードの検証に影響し、ブラウザが最終的に Web ドキュメントを表示する方法を決定します。

doctypeの役割

doctype 宣言は、ドキュメント内のマークアップを解釈するために読者が使用すべき一連のルールを示します。 Web ドキュメントの場合、「リーダー」は通常、ブラウザやバリデータなどのプログラムであり、「ルール」は W3C によって公開された文書型定義 (DTD) に含まれるルールです。

各 DTD には、Web ドキュメントのコンテンツをマークするために使用される一連のタグ、属性、およびプロパティが含まれています。さらに、どのタグが他のどのタグ内に出現できるかを規定するいくつかのルールも含まれています。各 Web 推奨標準 (HTML 4 Frameset や XHTML 1.0 Transitional など) には独自の DTD があります。ドキュメント内のマークアップが doctype 宣言で指定された DTD に従っていない場合、ドキュメントはコード検証に合格できないだけでなく、ブラウザーに正しく表示されない可能性があります。マークアップの不一致に関しては、ブラウザはバリデータよりも寛容です。ただし、doctype 宣言が間違っていると、Web ページが正しく表示されないか、まったく表示されないことがよくあります。

適切なDOCTYPEを選択する

正しい doctype 宣言を取得するには、DTD をドキュメントが従う標準に対応させることが重要です。たとえば、ドキュメントが XHTML 1.0 Strict 標準に準拠していると仮定すると、ドキュメントの doctype 宣言は対応する DTD を参照する必要があります。一方、doctype 宣言で XHTML DTD を指定しても、ドキュメントに古いスタイルの HTML タグが含まれている場合、これは不適切です。同様に、doctype 宣言で HTML DTD を指定しても、ドキュメントに XHTML 1.0 Strict タグが含まれている場合も不適切です。

場合によっては、doctype 宣言をまったく使用しないことも可能です。有効な doctype 宣言が指定されていない場合、ほとんどのブラウザは組み込みのデフォルトの DTD を使用します。この場合、ブラウザは組み込みの DTD を使用して、指定したマークアップを表示しようとします。一時的に急いでまとめたドキュメント(そのようなものはたくさんあります)の場合は、doctype 宣言を省略し、ブラウザのデフォルト表示を受け入れることを検討してください。

doctype 宣言を最初から記述し、任意の DTD を指すようにすることは完全に可能です。ただし、ほとんどの Web ドキュメントは W3C によって公開された国際的に認められた Web 標準のいずれかに従う必要があるため、これらのドキュメントには通常、次の標準の doctype 宣言のいずれかが含まれます。

HTML 2: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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

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

HTML 4.01 フレームセット: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 フレームセット//EN" " http://www.w3.org/TR/html4/frameset.dtd ">

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

XHTML 1.0 トランジショナル: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 トランジショナル//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

XHTML 1.0 フレームセット: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 フレームセット//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">

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

XHTML 1.1 プラス MathML プラス SVG: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 プラス MathML 2.0 プラス SVG 1.1//EN" " http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd ">

上記の doctype 宣言に加えて、特別な要件を持つ一部のドキュメントでは、他の宣言もいくつか使用されます。

doctype 宣言は通常、<html> タグやその他のドキュメント コンテンツの前の、ドキュメントの最初の行にあります。 XHTML ドキュメントでは、doctype の前に XML 処理命令 (XML プロローグとも呼ばれます) が付く場合があることに注意してください: <?xml version="1.0" encoding="utf-8"?>

Web ページが正しく表示され、検証に合格することを保証するには、正しい doctype を使用することが重要です。コンテンツに反する不正確な、または不正な形式の doctype が、多くの問題の原因となります。

DW を使用して Web ページを設計する場合、新しいファイルを作成すると、コードの先頭に次の内容が表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">これは、DW によって Web ページのファイル ページに自動的に追加された DTD 情報であり、削除することができます。 削除すると、ブラウザはデフォルトの DTD を使用します。
3. どのようなDOCTYPEを選択するか

標準に準拠したサイトの作成を開始するときに最初に行う必要があるのは、ニーズに合った DOCTYPE を宣言することです。

このページの元のコードを見ると、最初の行が次のようになっていることがわかります: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

有名なウェブデザインソフトウェア開発会社 Macromedia や、デザインマスター Zeldman の個人ウェブサイトなど、基準を満たしたサイトをいくつか開くと、同じコードが見つかります。標準を満たす他のサイト (k10k.net など) には、次のコードがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br >.完全なコードは次のとおりです。


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

どの DOCTYPE を選択すればよいでしょうか?
もちろん、理想的な状況は厳密な DTD ですが、Web 標準に不慣れなほとんどのデザイナーにとっては、移行 DTD (XHTML 1.0 Transitional) が現在のところ理想的な選択肢です (移行 DTD を使用しているこのサイトも含みます)。この DTD ではプレゼンテーション層のロゴ、要素、属性も使用できるため、W3C コード検証に合格しやすくなります。 注: 上記の「プレゼンテーション レイヤーの識別子と属性」は、タイプセットに使用されるテーブル、背景色の識別子など、プレゼンテーションを制御するためだけに使用されるタグを指します。 XHTML では、タグはプレゼンテーションを実装するためではなく、構造を表すために使用されます。この移行の目的は、最終的にデータとプレゼンテーションを分離することです。

たとえば、マネキンが服を着替える。モデルはデータのようなもので、服は表現形式です。モデルと服は別物なので、自由に着せ替えることができます。 HTML4では、データとプレゼンテーションが混在しており、プレゼンテーション形式を一気に変更することは非常に困難でした。ハハ、ちょっと抽象的ですね。この概念は、申請の過程で徐々に理解していく必要があります。

補充する
DOCTYPE 宣言は、すべてのコードとマークアップの上に、すべての XHTML ドキュメントの先頭に配置する必要があります。

4. DOCTYPE HTML PUBLICの公式定義はこうだ

!DOCTYPE

--------------------------------------------------------------------------------

HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。

Microsoft® Internet Explorer 6 の新機能は何ですか?この宣言を使用すると、Internet Explorer 6 以降を標準準拠モードに切り替えることができます。

文法

HTML トップレベル要素の可用性「登録 // 組織 // タイプ タグ // 定義言語」「URL」

可能な値

トップレベル要素: DTD で宣言されたトップレベル要素タイプを指定します。これは宣言された SGML ドキュメント タイプに対応します。 HTML のデフォルト。 .HTML です。

可用性: 正式な公開識別子 (FPI) がパブリックにアクセス可能なオブジェクトであるか、システム リソースであるかを指定します。 PUBLIC デフォルト。パブリックにアクセス可能なオブジェクト。 SYSTEM ローカル ファイルや URL などのシステム リソース。

登録済み: 組織が国際標準化機構 (ISO) に登録されているかどうかを指定します。 + デフォルト。組織名は既に登録されています。 - 組織名が登録されていません。 Internet Engineering Task Force (IETF) と World Wide Web Consortium (W3C) は登録された ISO 組織ではありません。

組織: !DOCTYPE 宣言によって参照される DTD の作成と保守を担当するグループまたは組織の名前 (つまり OwnerID) を指定します。 IETF IETF。 W3C W3C。

タイプ: パブリック テキスト クラス、つまり参照されるオブジェクトのタイプを指定します。 DTD のデフォルト。 .DTD。

ラベル: 参照されるパブリック テキストの一意の説明的な名前であるパブリック テキストの説明を指定します。その後にバージョン番号が続く場合があります。 HTML のデフォルト。 .HTML です。

定義: ドキュメント タイプ定義を指定します。フレームセット フレームセット ドキュメント。 Strict では、スタイルシートがすでに確立されているため、W3C の専門家が段階的に廃止したいと考えている一般的な属性と要素がすべて除外されます。 Transitional には、frameSet 要素を除くすべてのコンテンツが含まれます。

言語: 公開テキスト言語、つまり参照オブジェクトの作成に使用される自然言語エンコード システムを指定します。言語定義は ISO 639 言語コード (大文字 2 文字) として記述されます。 EN デフォルト。英語。

URL: 参照オブジェクトの場所を指定します。

注記

この宣言は、ドキュメントの先頭、HTML タグの前に記述する必要があります。

!DOCTYPE 要素には終了タグは必要ありません。

この要素は、Microsoft® Internet Explorer 3.0 の HTML で使用できます。

この宣言を使用すると、Internet Explorer 6 以降で厳密な標準準拠モードに切り替えることができます。これを有効にするには、ドキュメントの先頭に !DOCTYPE 宣言を含め、有効なタグと、場合によっては定義や URL を指定します。

注意: 標準互換モードでは、他のバージョンの Internet Explorer との互換性は保証されません。標準準拠モードをオンにすると、ドキュメントのレンダリング動作が Internet Explorer の将来のバージョンと異なる可能性があります。コンテンツが本質的に固定されている場合(CD に書き込まれている場合など)、このモードは使用しないでください。

次の例は、!DOCTYPE 宣言を使用してドキュメントが準拠する DTD を指定し、Internet Explorer 6 以降を標準準拠モードに切り替える方法を示しています。 次の例の宣言はすべて、HTML 4.0 DTD への準拠を指定します。 2 番目の宣言では「Strict」を指定します。最初の宣言は指定されていません。これら両方の宣言により、Internet Explorer 6 以降が標準準拠モードに切り替わります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 厳密//EN">

次の例の宣言はすべて、「Transitional」HTML 4.0 DTD への準拠を指定します。 2 番目の宣言では、DTD の URL を指定します。最初の宣言は指定されていません。 2 番目の宣言により、Internet Explorer 6 以降が標準準拠モードに切り替わります。最初の声明はそうではありません。

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

<<:  Vue 大画面データ表示例

>>:  CSSは固定比率のブロックレベルコンテナを簡単に実装できる

推薦する

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

Dockerコンテナのタイムゾーン調整操作

Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...

MySQL 5.7.23 のインストールと設定方法のグラフィックチュートリアル

この記事では、参考として MySQL 5.7.23 のインストール チュートリアルを記録します。 1...

jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...

Alibaba Cloud Server で MySQL デュアルマシン ホットスタンバイを手動で実装する 2 つの方法

1. コンセプト1. ホットバックアップとバックアップの違いホット バックアップは高可用性 (HA)...

JS+Canvas が抽選ホイールを引く

この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...

Jsモジュール化の動作原理とソリューションの詳細な説明

目次1. モジュラーコンセプト2. モジュール化3. モジュール化プロセス1. 通常の記述(グローバ...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

2つのボールが交差する粘着効果を実現するCSSサンプルコード

これは純粋に CSS のみを使用して作成されたエフェクトです。簡単に言うと、このエフェクトは画像処理...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

Windows サーバー ポートを開きます (例としてポート 8080 を使用します)

ポートとは何ですか?私たちが通常参照するポートは、物理的な意味でのポートではなく、具体的には TCP...

JavaScript コンストラクタとプロトタイプの関係

目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...

Linuxシステムでノードプロセスを実行しているが、プロセスを強制終了できない問題を解決します

まず、Linux システムで実行されているノード プロセスはプロセスを強制終了できないことを紹介しま...