s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

HTML4とHTML5の違いとHTMLの基本的なマークアップ

はじめに

現在でもHTML4で解説しているサイトがあるようですのでこの記事を作成しました。「おや?書き方が違うぞ?」と混乱されないようにご注意ください。HTMLに種類があることを前回触れましたがHTML4とHTML5の間には大きな変化があるのです。この違いについて把握した上でHTMLの基本的なマークアップ構造を見ていきましょう。

HTML4とHTML5の違い

以下はHTML4.01の基本的なマークアップになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>タイトル</title>
<style type="text/css">/* CSS */</style>
<script type="text/javascript">/* JavaScriptコード */</script>
</head>
<body>
...
</body>
</html>

1行目に書かれるHTMLを宣言する「文書型宣言」を記述しますので種類の判断はここで出来ます。「head要素」の中にはHTMLページに関連する情報や設定が書かれます。「meta要素」を使って文字エンコーディングを指定することでこのHTMLページの文字コードを定義します。そして「style要素」にはCSSを指定したり、直接書くことも出来ます。「script要素」にはJavaScriptを記述したりするのです。CSSやJavaScriptには「type属性」をマークアップします。

はてなブログでも使用されているHTML5の基本的なマークアップはどうでしょうか?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページ・タイトル</title>
<style>/* CSS */</style>
<script>/* JavaScriptコード */</script>
</head>
<body>
...
</body>
</html>

恐ろしくシンプルですね。HTML5からこのようなマークアップへ変更になりました。HTML5をサポートしたブラウザでなければ正しく表現されないのではないかと心配してしまいますが、旧型のブラウザでも動作するよう考慮されているため勧告当時は「InternetExplorer6」でも問題はありませんでした。そこまで古いブラウザをサポートしていると考えて問題ありません。最新のブラウザのみで閲覧されればよいのですが、現在でも魑魅魍魎な多種多様のブラウザが跋扈している現状です。HTML5からはブラウザによる表示の違いというのは殆どなくなり、デザインで気を使う必要も減りました。

文書型宣言に意味はなかった

HTML4.01やXHTML1.0の文書型宣言は非常に長い記述を必要としました。この長い記述にほとんど意味がなかったのです。実際には本来の用途とは別にレンダリング・モードを振り分けるための識別文字として使われていました。XHTML1.0の文書型宣言を記述してもそのページがXMLで処理されるわけではありませんでした。レンダリング・モードとはHTMLページをどのように表示するのかを表しますが「標準モード」と「互換モード」があります。同じマークアップと同じCSSでも見た目が違ったのでした。HTML5の文書型宣言は「どのブラウザでも標準モードでレンダリング」されることを念頭に置いて考え出されました。

文字エンコーディング

meta要素に文字エンコーディングを指定しましたが、実際にはContent-Typeを指定する方式でした。HTML5で大幅に簡素化され、meta要素に「charset属性」が新たに規定されました。この値に文字エンコーディングを表す文字列を指定します。これも旧ブラウザでの文字エンコーディング指定を問題なく認識します。

CSSとScriptのtype属性

HTML4ではstyle要素とscript要素にはtype属性を指定する必要がありました。しかし殆どのサイトで「スタイルはCSS」「スクリプトならJavaScript」とはっきりしていますね。この場合にtype属性を省略できます。そしてどのブラウザでも問題なく機能します。

HTMLの書き方がわかり易くなった

HTML4の最終的な仕様はHTML4.01ですが、これは1999年に勧告されました。その後にXHTML1.0が登場していますが基本的に利用できる要素に大きな違いはありませんでした。移り変わりが早いインターネットの世界でHTML5が出てきたのは2011年も近い2010年頃です。HTMLは10年以上も進化が無く、同じ仕様でウェブページが作られてきました。HTML5は新しい機能が盛り込まれ随分と派手になりました。そして簡易的で無駄も省かれ使い易く改善されています。

まとめ

ここの知識に相違があれば初心者の方は混乱してしまいます。一部を除き、古いままのマークアップ言語でも使えますので解説にはHTML4のまま行なっているサイトがあります。おそらく名残で使っていたりするのだと思いますが、新しく覚えようとする場合には厄介です。原則禁止のタグであってもサポートされているだけで見かけ上は動作していますがいつか消える可能性のあるものです。必要ないものは必要ないでばっさり切り捨て、美しいコードを書いていきましょう。