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サイトには使用しません。

HTML 4.01の特徴

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

XHTML 1.0

2000年1月26日に勧告

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

XHTML 1.0の特徴

  • 文字コードがUTF-8以外の指定の場合、HTMLの1行目に下記を記述する必要がある
  • 開始タグしかないタグは、開始タグの最後に /(スラッシュ)を必ず入れる
  • タグは一部を除き、すべて半角英数の小文字しか認めない。
  • ほとんどの装飾系の要素が非推奨になっていてCSSを使用することを推奨している

HTML5

2014年10月28日に勧告

現在、最も最新の仕様です。
HTML4.01、XHTML 1.0の要素以外に新しい要素が追加されています。
古い仕様にも互換があり移行がしやすくなっています。
DOCTYPEは1種類のみです。

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

HTML5の特徴

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

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

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

HTML4.01の場合

XHTML 1.0の場合

HTML5の場合

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

広告

 - 参考資料