DOCTYPE HTMLを使用する理由
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
最近はあらゆるWeb開発ツールがテンプレートコードの挿入をサポートするほど強力なので、この長くて臭いdoctypeを一文字一文字打ち込む必要はないのが良いところです。でも、もういいやという方は、以下の書き出しを試してみてはいかがでしょうか。
<!DOCTYPE html>
わあ、きれいだ!」。1つは、doctypeを間違える心配なく簡単に書けること、2つは、およそ105バイトの文字数を節約できたこと、これは1日のPVが数千万に及ぶサイトにとって、かなりの客観的トラフィックを節約できること、3つは、後方互換性、そう、html5のdoctypeはこのように書かれていて、モダンブラウザはそれを認識していること、などなど、メリットは明らかです。
私のように、ずっとこう思っていた人は
dtdを指定しないと、ブラウザの変なモードがオンになる
その発言は間違っています。
正しくは、doctypeを定義しないと変なモードが有効になる、つまり、ある種のdtdを指定しなくても、<!doctype html>を定義するだけでブラウザがストリクトモード(標準モード)でページをレンダリングするようになる、ということです。ここで、すべてのブラウザは、変なモードとストリクトモード(一部では標準モードとも呼ばれる)の2つのモードを必要としていることを思い出してみましょう。Windows/Mac版のIE 6、Mozilla、Safari、Operaはいずれも両方のモードを実装していますが、IE 6以下のバージョンでは、常にweird modeに設定されています。ここでは、この2つのモードについて説明します。
- 標準化以前に書かれたページにはdoctypeがないため、doctypeのないページは変なモードでレンダリングされます。
- 逆に、ウェブ開発者が自分が何をしているかを知っていることを意味するdoctypeを追加すれば、ほとんどのdoctypeはstrictモード(標準モード)をオンにし、ページは標準にしたがってレンダリングされるようになります。
- 新しい、あるいは未知のdoctypeは、ストリクトモード(標準モード)がオンになっています。
- 変なモードを有効にする方法は、各ブラウザで異なります。このリストを見てみてください。 http://hsivonen.iki.fi/doctype/
注:選択したdoctypeに基づいてページを検証する必要は全くなく、doctypeタグが存在するだけでstrictモード(標準モード)をオンにするのに十分なのです。もし、まだ私の言っていることに懐疑的であれば、次のサイトへどうぞ。
http://www.quirksmode.org/css/quirksmode.html#link2
をご覧になってみてください。必要なのは、その答えを得るための小さなJavaScriptのコードだけで、それは
mode=document.compatMode;
このコードは、現在のブラウザがquirkyモードか標準モードかを判断するために使用できます。この属性の互換性は疑う余地もなく、もし疑うのであれば http://www.quirksmode.org/dom/w3c_html.html#t11 . でテストしたいブラウザでアクセスすることができます。 http://wanz.im/demo/doctype-test.html 私の知る限りでは、ie6でも変なモードは発動しません。何か新しい発見がありましたら、お気軽にコメントを残してください。
関連
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
html+css+js ナビゲーションバー用スクロールグラデーション効果
-
Adobe Bracketsの簡単な使い方のグラフィックチュートリアル
-
Htmlにおけるスペースの表現方法(意味するところ)
-
src または css の背景画像の url 値を base64 でエンコードしたコード
-
フラッシュプラグインを使用してPCカメラを呼び出す方法TMLページに埋め込む方法
-
ページ内ジャンプの手法を実現するためのタグのname属性とid属性
-
HTMLでボタンタグをクリックし、ページジャンプを実現する3つの方法
-
DOCTYPE宣言の役割と使用方法の詳細
-
editplus用Zenコーディングのコード例
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン