HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

3つのHTMLの仕様(DOCTYPE)の比較

      2018/02/22   hatano

HTMLの仕様について

HTMLやCSSは、非営利の標準化団体、W3C(ダブリュースリーシー)によって仕様が策定されています。
各ブラウザメーカーは、この仕様にのっとって、ブラウザのHTML、CSSのレンダリングや機能を決めています。

HTML 4.01

1999年12月24日に勧告

現在、公開されているHTMLの仕様では最も古い仕様です。
DOCTYPEは下記の3種類があります。
上から、Strict, Transitional, Framesetとなります。
Strictは非推奨の要素、属性を含めることができません。
3つの中でもTransitionalが最も多く使われました。
Framesetは一般的なWEBサイトには使用しません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01の特徴

  • タグは半角英数の大文字、小文字どちらでも良い
  • 装飾系の要素、属性を使用するかCSSを使用するかは任意

XHTML 1.0

2000年1月26日に勧告

HTML4.01で曖昧な部分を徹底的に厳格化した仕様。
装飾は、すべてCSSで設計することを前提にした仕様です。
DOCTYPEは、HTML4.01と同じで3種類あります。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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種類のみです。


<!DOCTYPE html>

HTML5では大文字、小文字を区別しませんので下記のDOCTYPEでも使用できます。


<!doctype html>


<!DOCTYPE HTML>

HTML5の特徴

  • タグは半角英数の大文字、小文字どちらでも良い(でも小文字で記述が一般的)
  • 開始タグしかないタグは /(スラッシュ)を入れるかどうかは任意。混在しても良い。
  • 新しい要素が追加されている(header, footer, nav, article, section, asideなど)
  • html4.01, xhtml1.0で非推奨になっていた要素が、一部復活。(small, iなど)
    意味づけが変更されているものがある(hr, emなど)

結論-どの仕様がいいのか-

下記は、HTML4.01、XHTML 1.0、HTML5 それぞれの仕様でHTMLの基本構造と外部ファイルをリンクした場合の記述例です。

HTML4.01の場合


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<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>
	</head>
	<body>
	</body>
</html>

XHTML 1.0の場合


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<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>
	</head>
	<body>
	</body>
</html>

HTML5の場合


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>タイトル</title>
		<link rel="stylesheet" href="style.css">
		<script src="script.js"></script>
	</head>
	<body>
	</body>
</html>

比較してみると分かりますがタグも少なく、属性も最小限で記述されいるHTML5がシンプルな構造です。
HTML5のDOCTYPEは、HTML5が策定される前の古いIE(6~8)でも使用できます。
他の仕様を使う明確な理由がない限りは、HTML5の仕様で作成していくのが一番良い選択肢ではないでしょうか。