HTML5の最小構成サンプルとその説明

SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Kevin Yank氏がSitePointにおいてA Minimal HTML Document (HTML5 Edition)のタイトルのもと、HTML5を使った場合の最小限のHTML記述の例とその意味を紹介している。同氏は以前、同じくSitePointにHTML 4.01およびXHTML 1.0の最小構成紹介を掲載しており、今回掲載された記事はその流れにつながるものとなる。掲載されているHTML5の最小構成例は次のとおり。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

A Minimal HTML Document (HTML5 Edition)では各行について説明が行われている。ここではHTML4との違いで特に興味深い部分を次に取り上げる。

<!DOCTYPE html>

HTML5で最低限必要とされるDOCTYPE指定。HTML4よりも短い。HTML5をサポートしていないブラウザに対してHTML4として処理させることができるようにこのような指定になっている。

<meta charset="utf-8">

head要素最初の要素にはページの文字エンコーディングを指定するためのmeta要素を配置する。従来よりも短く指定可能。

<link rel="stylesheet" href="style.css">

CSSを指定するにあたってHTML4で必要とされたtype="text/css"指定はHTML5ではオプション扱いになっている。

<script src="script.js"></script>

JavaScriptを指定するにあたってHTML4で必要とされたtype="text/javascript"指定はHTML5ではオプション扱いになっている。また、ここで利用するscript要素はlink要素と違い必ずで閉じる必要がある。

紹介されている記述方法はHTML5のショートカットの記述を駆使したもので、現在の主要ブラウザのどれを使っても問題なくレンダリングできるように工夫されているという。IE6などの古いブラウザをサポートからはずしても問題ないくらいまでシェアが下落すれば、もっとHTML5らしい記述もできるようになるが、現状はまだ時期尚早。ここで紹介されている記述方法はそれまでの過渡期的な書き方として興味深いサンプルといえる。