みなさん doctype 宣言書いてますかー？

ちょっと試したい時には 書かないで作って あとから書いてある方に埋め込むと動かなかったりずれてたり そういうことがあるのでとりあえず全部に書いておいたほうがいいと思います

これを1行目に書くだけです
コピペしなくても特に困らない長さです

違いは？

どういう違いがあるかですが 上の宣言文は HTML5 の書き方で sttrict モードになります
何もかかないのは 互換モードです
互換モードは名前の通り昔の記述方法でも動くようにしています
こっちのほうが便利なところもありますが HTML5 は strict モードだけらしいですし strict モードをメインに考えていけばいいと思います
宣言なしだと HTML5 が使えないってわけではないんですけどね

よく困る違いは 高さの 100% の扱いの違いですね
strict モードだと html と body から height:100% を指定しないとダメです
さらに Chrome だとなぜか 100% なのにはみ出てスクロールバーが出るバグのような挙動をします

気づきづらい違い

ここまでは （Chromeがおかしいのは除いて）有名なところだと思います
今回は 最近私が気づいた部分2つの紹介です

サンプルを用意してるので比較してみてください
doctype 宣言あり
doctype 宣言なし

1つめ

margin を見てみてください
宣言なしのほうが上の方に文字があります

p タグは Chrome だと 18px の上下マージンがデフォルト値です
宣言ありでは 18px 上部に確保されていますが 宣言なしではマージンは body タグの部分だけで p タグ分の上部マージンはありません

ですが 自分で margin:18px 0; と設定すると 宣言ありと一緒の位置になります
ブラウザ固有のスタイルに限り適用されないみたいです

2つめ

黄緑の四角にマウスカーソルを持っていってください
宣言なしでは ピンクの四角が移動しますが 宣言ありだと移動しません

違いは スタイルの変更で px をつけるかどうかですと px なしでも 宣言なしの方はちゃんと 100px にしてくれています

---

1つめは宣言ありの動きのほうが好きですが 2つめは宣言なしの動きのほうが好きです

こういう違いは探すとまだまだありそうなので互換モードで作ったのを strict モードにコピペするのは危険だと思います
可能なら最初から両方一緒にしたほうがいいです