ドキュメントタイプ
独学で自分でコーディングをしてhtmlを作る場合、
大抵の人はファイルの最初は<html>から始まっているのではないでしょうか？
私自身もそうでした。
しかし、実はその前にドキュメントタイプを宣言した方がより良いのです。
ドキュメントタイプというのは、どの種類のバージョンでページを作ってますよという事を明示するのです。
通常、普通にhtmlを学習した場合はhtmlのバージョン4.01です。
そして、宣言したドキュメントタイプによって表示モードが変わってくるのです。
モードには「標準モード」と「互換モード」の2つのタイプがあります。
標準モードはちょっとした文法ミスや、非推奨の書き方をしたものを全て排除してしまいます。
つまり、融通が効かないとって感じで覚えておけば良いかと思います。
より正確な記述が必要になってきます。
逆に互換モードは非推奨のタグやちょっとした文法ミスの物は自動的に解釈して補完してくれます。
こちらはある程度融通が効くんだなぁ〜って感じで覚えておけば良いかと思います。
この解釈なのですが、ブラウザによって解釈が違ったりするんですよ。
なので、互換モードだと自分の環境では良くても違う環境に行くと、
自分が思ってたのと違う表示になっちゃったりする事があります。
もっとも、標準モードでも完璧とまでは言えないんですけどね。
ドキュメントの書き方は以下のような感じです。
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD 記述言語とバージョン//EN">
もしくは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD 記述言語とバージョン//EN"
"記述言語に対応するURL">
]]>
詳しい設定は以下のような感じです。
（GeckoとはNetscapeNavigator6.0以降、Mozilla、FireFox等をまとめた物です）
|
ドキュメント宣言無し
|
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 互換
Gecko ⇒ 互換
|
|
ドキュメント宣言を書かないと自動的にこの設定になります。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 互換
Gecko ⇒ 互換
|
|
Htmlバージョン2.0を使用の場合です。古いバージョンなので今後使う事はないでしょう。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 互換
Gecko ⇒ 互換
|
|
Htmlバージョン3.2を使用の場合です。古いバージョンなので今後使う事はないでしょう。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 互換
Gecko ⇒ 標準
|
|
Html4.01のStrict記述です。基本的に標準モード用の書き方です。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
Html4.01のStrict記述です。URLを入れると全部標準モードで表示されます。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 互換
Gecko ⇒ 互換
|
|
Html4.01Transitional記述です。色々融通が効くので私はこれをオススメします。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
Html4.01Transisitional記述です。URLを入れるとこれも全部標準モードになります。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 互換
Gecko ⇒ 互換
|
|
Html4.01Frameset記述です。TransitionalにFrame要素を追加したバージョンです。
|
| <![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
Html4.01Frameset記述です。TransitionalにFrame要素を追加したバージョンです。
|
| <![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.0のStrict記述用です。
|
| <![CDATA[
<?xml version="1.0" encoding="Shift-JIS"? >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.0のStrict記述用です。
|
| <![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.0のTransitional記述用です。
|
| <![CDATA[
<?xml version="1.0" encoding="Shift-JIS"? >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.0のTransitional記述用です。
|
| <![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
]]> |
|---|
|
IE6 ⇒ 標準
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.1用です。
|
| <![CDATA[
<?xml version="1.0" encoding="Shift-JIS"? >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
]]> |
|---|
|
IE6 ⇒ 互換
MacIE5 ⇒ 標準
Gecko ⇒ 標準
|
|
XHTML1.1用です。
|
■HP作成-応用編-
・外部ファイルを使ってみよう
・リンクの設定変更
・お気に入りに追加＋ホームに設定
・非推奨タグ・属性
・ドキュメントタイプについて
・ブラウザ互換について-width-
・ブラウザ互換について-継承-
・ブラウザ互換について-外部CSS-
| 
