HTMLの仕様について
HTMLやCSSは、非営利の標準化団体、W3C（ダブリュースリーシー）によって仕様が策定されています。
各ブラウザメーカーは、この仕様にのっとって、ブラウザのHTML、CSSのレンダリングや機能を決めています。
HTML 4.01
1999年12月24日に勧告
現在、公開されているHTMLの仕様では最も古い仕様です。
DOCTYPEは下記の3種類があります。
上から、Strict, Transitional, Framesetとなります。
Strictは非推奨の要素、属性を含めることができません。
3つの中でもTransitionalが最も多く使われました。
Framesetは一般的なWEBサイトには使用しません。
HTML 4.01の特徴
- タグは半角英数の大文字、小文字どちらでも良い
- 装飾系の要素、属性を使用するかCSSを使用するかは任意
XHTML 1.0
2000年1月26日に勧告
HTML4.01で曖昧な部分を徹底的に厳格化した仕様。
装飾は、すべてCSSで設計することを前提にした仕様です。
DOCTYPEは、HTML4.01と同じで3種類あります。
XHTML 1.0の特徴
- 文字コードがUTF-8以外の指定の場合、HTMLの1行目に下記を記述する必要がある
<?xml version="1.0" encoding="UTF-8"?> - 開始タグしかないタグは、開始タグの最後に /（スラッシュ）を必ず入れる
<br> <img src="sample.jpg" alt="サンプル"> - タグは一部を除き、すべて半角英数の小文字しか認めない。
- ほとんどの装飾系の要素が非推奨になっていてCSSを使用することを推奨している
HTML5
2014年10月28日に勧告
現在、最も最新の仕様です。
HTML4.01、XHTML 1.0の要素以外に新しい要素が追加されています。
古い仕様にも互換があり移行がしやすくなっています。
DOCTYPEは1種類のみです。
HTML5では大文字、小文字を区別しませんので下記のDOCTYPEでも使用できます。
HTML5の特徴
結論-どの仕様がいいのか-
下記は、HTML4.01、XHTML 1.0、HTML5 それぞれの仕様でHTMLの基本構造と外部ファイルをリンクした場合の記述例です。
HTML4.01の場合
<meta https-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<meta https-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta https-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="script.js"></script>
<body>
<p>XHTML 1.0の場合</p>
<pre class="html"><code>
<?xml version="1.0" encoding="UTF-8"?>
<meta https-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<meta https-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta https-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="script.js"></script>
HTML5の場合
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
比較してみると分かりますがタグも少なく、属性も最小限で記述されいるHTML5がシンプルな構造です。
HTML5のDOCTYPEは、HTML5が策定される前の古いIE（6～8）でも使用できます。
他の仕様を使う明確な理由がない限りは、HTML5の仕様で作成していくのが一番良い選択肢ではないでしょうか。