HTMLを学び始めた人に、注意してほしいのがHTMLバージョンによる違いです。バージョンによって使えない機能があり、DOCTYPE宣言の記述方法も変わります。
そこで今回は、HTMLバージョンの違いについて、解説していきたいと思います。また、HTMLと関係の深いCSSのバージョンについても紹介していきます。
目次
HTMLのバージョンの違いとは
HTMLには、いくつかバージョンがあります。各バージョンによって使用可能な要素や属性、記述ルールに違いがあります。
まずは、主に利用されているHTMLのバージョンを紹介します。
- HTML4.01：CSSを推奨し、文章構造のみを記す目的に沿ったバージョン
- XHTML1.0：XMLの仕様に定義しなおしたバージョン
- HTML5：Webアプリ開発に対応した最新バージョン
HTMLの有名なバージョンを紹介しましたが、最新のバージョンはHTML5です。
基本はHTML5を使う
これからサイト制作を始めたい場合、学ぶべきバージョンは、基本HTML5の一択です。
もし、古いHTMLのテキストを使って勉強を始めようとしているのであれば、そのテキストがHTML5対応かを確認しましょう。
現在のWebサイトのスタンダードは、間違いなくHTML5で、サイト制作で使用する各プラグインやアプリの実行環境は、HTML5を基準に作られています。また、HTML5は人間だけでなく、機械にも理解しやすい言語として開発されたので、検索結果の上位にも表示されやすくなります。
ただし、古いWebサイトの管理を行うのであれば、サイトが作られているバージョンのHTMLを知識が必要になります。理由は、HTML5では数多くのタグが廃止されたためです。廃止されたタグの中には、多くのサイトで頻繁に使われているタグも含まれています。
DOCTYPE宣言でのHTMLバージョンの書き方
HTMLでは「WebサイトがどのバージョンのHTML仕様に基づいて記述しているか」を宣言する必要があります。その宣言のことを、DOCTYPE宣言といいます。
しかし、実はDOCTYPE宣言もHTMLのバージョンによって書き方に違いがあります。
そこで、各HTMLバージョンでのDOCTYPE宣言の書き方について紹介していきます。
なお、書き方が変わる境界は最新バージョンであるHTML5です。
HTML5以降のDOCTYPE宣言
実は、HTML5ではDOCTYPE宣言は不要です。DOCTYPE宣言をしない場合、ブラウザは表示モードを「互換モード」で認識します。
しかし、互換モードでは古いWebサイトと認識され、HTML5で設定したレイアウトとは違う表示になってしまう場合があります。そのため、HTML5以降でもDOCTYPE宣言をして、ブラウザの表示モードを「標準準拠モード」にしましょう。
HTML5以降のDOCTYPE宣言の書き方は、次の通りです。
|
1 |
<!DOCTYPE html> |
なお、DOCTYPE宣言は大文字小文字を区別しません。設定値などを書く必要もないので、とても簡単に書くことができますね。
HTML5以前のDOCTYPE宣言
HTML5以前のDOCTYPE宣言には3種類のDTDがあります。その3種類とは「Strict」、「Transitional」、「Frameset」です。
各DTDの違いは次の通りです。
- Strict：W3C非推奨の機能を使用できない厳格なDTD
- Transitional：W3C非推奨の機能も使えるDTD（フレームは使用不可）
- Frameset：W3C非推奨の機能も使えるDTD（フレームも使用可能）
次に、各DTDでのDOCTYPE宣言の書き方を紹介していきます。
まずは、厳格なDTD「Strict」での各バージョンのDOCTYPE宣言の書き方は、次の通りです。
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
次に、少しゆるいDTD「Transitional」での各バージョンのDOCTYPE宣言の書き方は、次の通りです。
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
最後に、一番ゆるいDTD「Frameset」での各バージョンのDOCTYPE宣言の書き方は、次の通りです。
|
1 2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
古いサイトに手を加える際には、DOCTYPE宣言をチェックして、HTMLバージョンとDTDの確認をするようにしましょう。
CSSのバージョンの違いと書き方とは
HTMLと密接な関係にあるCSSですが、CSSにもバージョンがあります。まずは、CSSの各バージョンの違いについて紹介します。
- CSS1：基本的な機能に対応した最初のバージョン
- CSS2：音声ブラウザや印刷媒体などに対応したバージョン
- CSS3：全体がモジュール化されたバージョン
CSSにもHTML同様、バージョンが存在します。しかし、CSSの場合HTMLのDOCTYPE宣言のようにバージョンを宣言する必要はありません。
CSSの新しいバージョンには、従来のCSSと互換性があり、新しいCSSではなく機能が増えたCSSだと解釈した方がわかりやすいでしょう。
また、CSSの最新バージョンであるCSS3とHTMLの最新バージョンであるHTML5を一緒に使う必要はありません。CSS3とHTML4.01の組み合わせでも問題ありません。
使用可能かどうかは、ブラウザなどの実行環境に左右されます。そのため、改めて古いバージョンのCSSを勉強する必要はありません。
まとめ
いかがでしたでしょうか？今回はHTMLとCSSのバージョンの違いと記述方法について解説しました。
HTML5では、廃止されたタグがあるので古いテキストで勉強している人などは注意が必要です。特別な事情がない限りこれから学ぶのであれば、HTML5を学ぶと良いでしょう。
