DOCTYPEが重要な理由と正しく使用する方法

PHP、MySQL、Javascriptでのプログラミングについて、スタッフと定期的に講義と実践的なクラスを実施することにしました。 高品質のサイトのリリースに必要な他の技術と同様。 HTMLタグを使用して、最上部から開始することにしました。 どんなコメントでも喜んでいます:)

インターネットでほとんどの情報を見つけたので、すぐに予約します。ソースへのリンクは記事の下部にあります。 情報の一部は、Google翻訳と一緒に翻訳されました。

だから:



DOCTYPEがなぜそんなに重要なのですか?





あなたはすべてを正しく行ったようですが、何らかの理由で、ブラウザの最新バージョンでサイトが見られないか、期待どおりに動作しません。

正しい標準XHTMLコードと標準CSSを作成しました。 DOM(ドキュメントオブジェクトモデル)を操作するための標準仕様を使用して、ページ上の動的要素を制御しました。 それでも、これらの標準に正確に準拠して作られていると思われるブラウザでは、サイトは機能しません。 ほとんどの場合、エラーは間違ったDOCTYPEヘッダーにあります。

この短い記事では、動作するDOCTYPEヘッダーについて説明し、この一見混乱したタグの実用的および理論的な重要性についても説明します。



DOCTYPEとは何ですか?



HTMLおよびXHTML仕様によると、DOCTYPEタグ(「ドキュメントタイプ宣言」を意味する)は、ページで使用している(X)HTMLのバージョンをバリデーターに通知します。 このタグは、各ページの最初の行に常にある必要があります。 DOCTYPEタグは、標準に準拠したWebページの重要なコンポーネントです。これがないと、コードとCSSはバリデーター検証に合格しません。

DOCTYPEタグは、標準に準拠したブラウザー(Mozilla、IE5 / Mac、およびIE6 / Win)でページを正しく表示および操作するためにも重要です。

属性が完全なURI(完全なWebアドレス)を指定するDOCTYPEタグは、特定の標準またはこの標準の亜種に従ってページを表示する必要があることをブラウザに伝えます。

不完全なDOCTYPEタグを使用したり、外観が古くなったり、それを忘れたりすると、ブラウザは「ミステリアス」(奇妙な)モードに移行し、エラーが発生してページコードを記述し、標準から自由に離れたという前提から進みます。 。 90年代後半に書いたように。

このモードでは、ブラウザーは下位互換性と表示の規則に従ってページを解析しようとします。たとえば、Internet Explorerバージョン4が表示するCSSはこのブラウザーで機能した方法で動作します(IEは古いDOM、およびMozillaとNetscape 6が一般的に神に切り替わることを知っています)。

あなたにとってこれらのトリックが望ましくないことは明らかです。 しかし、これは、不完全または誤ったDOCTYPEタグを使用した場合に得られるものです。



問題



NN4が作成されたとき、IE4は標準に準拠したCSSルールに従いませんでした。 Netscapeの実装はひどく、IE4は標準の実装により良くアプローチしましたが、それでも、完全には実装していませんでした。 IE 5 Windowsは多くのIE 4エラーを修正しましたが、他のCSSクラッシュは(主にウィンドウモデルで)残りました。

したがって、コンプライアンスが重要になったとき、W3Cはブラウザーメーカーを厳しい選択にしました。

W3C仕様へのアプローチは問題の解決策の1つでしたが、ブラウザーの製造元がCSSの実装を単に標準に完全に準拠するように変更した場合、多くのWebサイトが多かれ少なかれクロールするか、完全に動作しなくなります。 標準に準拠したこのような収束には、問題が伴います。 一方、標準に準拠していないと、ブラウザ戦争時代に永続的な混乱が生じる可能性があります。



解決策



したがって、この問題の解決策は





つまり、すべてのブラウザーは、 2つのモードで動作する必要がありました。古いルールの互換モードと、標準の厳密モードです。

IE Macは、両方のモードを使用する最初のブラウザーであり、Windows IE 6、Mozilla、Safari、Operaおよびそれに続くスーツです。

IE 5 Windows、およびNetscape 4などの古いブラウザーは、互換モードで常にブロックされます。



呼び出す表示モードを選択する決定は、「DOCTYPE」スイッチの使用中に見つかりました。 標準では、すべての(X)HTMLドキュメントには、使用する(X)HTMLドキュメントの種類を世界に伝えるDOCTYPEが必要です。



有効なDTD



DOCTYPE 説明
HTML 4.01
<!DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 // EN" " www.w3.org/TR/html4/strict.dtd"> 厳密なHTML構文。
<!DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Transitional // EN" " www.w3.org/TR/html4/loose.dtd"> 過渡的なHTML構文。
<!DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Frameset // EN" " www.w3.org/TR/html4/frameset.dtd"> HTMLドキュメントはフレームを使用します。
XHTML 1.0
<!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 厳密なXHTML構文。
<!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML移行構文。
<!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Frameset // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ドキュメントはXHTMLで記述されており、フレームが含まれています。
XHTML 1.1
<!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.1 // EN" " www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML 1.1開発者は、徐々にHTMLに取って代わることを提案しています。 この定義には種への分割はなく、構文は1つであり、明確な規則に従っています。


HTML 4.01 DTD







XHTML 1.0 DTD







XHTML 1.1 DTD



これは、XHTML 1.0 Strictの厳密さを備えた新しいDTDであり、XHTMLのモジュール化で説明されているフレームワークとモジュールに基づいています(それが何であるかを探さなかった:)。



さまざまなDTDの使用に関する統計



もちろん少し古い(2004年から2008年)が、新しいものは見つかりませんでした。

www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128

サイトの50%以上が奇抜なモード、つまりIE4モードで動作していることがわかりました!





非推奨のタグと属性



アルファベット順の古いタグ





非推奨のHTML / XHTMLタグ属性。 それらはすべてCSSスタイルに置き換えることができます。





HTMLとXHTMLの違い(XHTMLに指定されたルール)







互換性とIE8



IE8には、IE 5.5互換モード、IE 7標準モード、IE 8標準モード、およびIE 8互換モードの4つのモードがあります。

方法の選択は、DOCTYPE、メタ要素、HTTPヘッダー、Microsoftから定期的にダウンロードされるデータ(!)、イントラネット、ユーザーが行った設定、管理者が行った設定、Microsoftブラックリストでのサイトの可用性など、さまざまなソースからのデータに依存します!



スキーム(それは壊れます)IE8ブラウザーが動作するモードを決定します



http://hsivonen.iki.fi/doctype/ie8-mode.pdf



情報源



http://hsivonen.iki.fi/doctype/-動作モードを選択するための詳細な表(すべてのブラウザー)

http://en.wikipedia.org/wiki/Doctype

http://www.htmlbook.ru/html/!doctype.html

http://www.webmascon.com/topics/coding/25a.asp

http://www.quirksmode.org/css/quirksmode.html-Quirksモードとは

http://www.quirksmode.org/css/box.html-モデルボックスの修正

最後のマッチテーブルhttp://hsivonen.iki.fi/doctype/

http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml HTMLとXHTMLの違い

http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_Validation__Deprecated_tags_and_attributes.php非推奨のタグと属性、およびそれらを置き換える方法

http://www.w3.org/TR/html401/appendix/changes.html HTML 4.01で廃止された正確なタグ情報





upd:いくつかのエラーを修正しました



All Articles