こんにちは。
HTML5を学習しながら学んだ内容をまとめるための場所です。特定の機能について深く掘り下げた投稿をする場所ではないことをあらかじめご了承ください。
DTD (Document Type Definition)
Document Type Definitionの略語です。DTDとは、あるタグ、属性、値が特定のHTMLドキュメント内で有効かどうかを記述するテキストファイルです。各HTMLバージョンにはそれに適したDTDがあるそうです。通常、これはHTMLドキュメントの最初の行にdoctype宣言を通じて記述します。これにより、どのバージョンのHTMLまたはXHTMLが使用されているかをブラウザに伝えます。 このようなdoctype宣言を省略すると、多くのブラウザはQuirks Mode（互換モード）という状態に陥るといいます。
doctype宣言がされていないページに出会うと、「おや、このページは非常に大昔に書かれたページだな」と判断してしまうそうです。そして「なら適当に表示してやろう」という結論に至るのです。
もし自分が作成したウェブページがブラウザで意図した通りに表示されない場合は、doctype宣言を確認してみるのが良いでしょう。
以下は各バージョン別のdoctype宣言です。
HTML5
<!doctype html>
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.010 Transitional//EN" "http://www.w3.org/TR/html1/DTD /xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
IE9以下のバージョンに対処する私たちの姿勢
1. IE8にHTML5を理解させたい場合。
</head>タグの前に、以下のようなコードを挿入すれば良いです。
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
条件付きコメントを利用して、IE9より古いIEのみ、つまりIE 6,7,8だけがこのコードを理解し、コードが適用されるとのことです。不思議なことにテストしてみたところ、Chromeでは該当スクリプトが読み込まれませんでした。IEのみを判別しているようです。
2. IE8の互換表示および互換表示設定リストを回避する方法
以下のコードを<head>内に入れてください。
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
</head>
HTMLコードに外部スタイルシートを接続する
外部スタイルシートをウェブページに接続する方法は、<link>タグを使用することです。
以下は各バージョン別の使用方式です。
HTML5
<link rel="stylesheet" href="css/styles.css">
HTML4
<link rel="stylesheet" type="text/css" href = "css/styles.css" >
XHTML 1.0
<link rel="stylesheet" type="text/css" href="css/styles.css" />