HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。
ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやすくなるからです。もちろん、すべての新しい要素とテクニックを網羅した、夢のようなサンプルサイトを作っていくのは非現実的で手に負えないので、いくつかの機能についてはプロジェクト外として説明します。
シンプルにHTML5の骨組みから始めましょう。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>このテンプレートをベースに、マークアップの重要な部分と、HTML5より前はどのように書いていたかの違いを検証していきましょう。
Document Type宣言
はじめに、Document Type宣言、またはDOCTYPEがあります。DOCTYPEは単にブラウザーやパースにどのようなドキュメントであるかを知らせる方法です。HTML文書の場合、具体的なHTMLのバージョンや特徴のことです。DOCTYPEは必ずいつもHTML文書の冒頭に書きます。昔はDOCTYPEは覚えにくくて見難いものでした。XHTML 1.0 Strictでは、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">でした。そしてHTML4 Transitionalでは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">でした。
冒頭の長いテキストは特に大きな影響があるわけではないのですが（ビューアーに余分な数バイトのダウンロードを強要すること以外）、HTML5はこの見づらく、目障りなものを廃止してくれました。今はこれだけで済むようになりました。
<!doctype html>シンプルで簡潔。DOCTYPEは大文字でも小文字でも混ざっていても問題ありません。宣言文に、明らかに「5」がないのに気づいたと思います。現在のWebのマークアップのバージョンは「HTML5」として知られていますが、単に前のHTMLバージョンからの進化というだけで、将来の仕様も、単に今あるものの発展バージョンにすぎないからです。
ブラウザーは通常Web上の既存コンテンツすべてをサポートする必要があり、DOCTYPEでどの機能をサポートすべきか指定はできません。つまり、DOCTYPE1つで、ページをHTML5対応にすることはできません。本当にブラウザー次第なのです。実際に、古いDOCTYPEを新しいHTML5要素と合わせたページで使ったとしても、新しいDOCTYPEを使ったのと同じようにページは表示されます。
html要素
どのHTML文書でも、次はhtml要素が必要です。HTML5によって大きく変更がない要素です。以下の例では、lang属性が英語になるようにenで指定しています（日本版編注：日本語の場合はjaを指定します）。XHTMLでは、xmlns属性が必要でしたが、HTML5では不要になりました。しかも、きちんと機能するために必要だったlang属性の指定すらも不要になりました。
</html>の終了タグを含めて見てみると、次のようになります。
<!doctype html>
<html lang="en">
</html>head要素
次は<head>のセクションです。headの最初の行は、文書の文字エンコードの指定します。HTML5では、XHTMLやHTML4より簡素化され、オプション機能になりましたが使用を推奨します。過去ならば、以下のように書いていたところを、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">HTML5では<meta>タグを最小限に収められるよう、以下のように改良されています。
<meta charset="utf-8">ほとんどの場合、utf-8を使います。今回の記事では、文字エンコードについての詳細な解説は興味もないでしょうしトピック外なので省きますが、もっと掘り下げたい場合は、W3CまたはWHATWGの記事を読むと良いでしょう。
メモ：エンコード宣言
すべてのブラウザーが確実に文字エンコードを正しく読み込むようにするには、すべての文字エンコード宣言をHTML文書の最初の512文字内に含める必要があります。コンテンツベースの要素（たとえば例の<title>要素）の前に置く必要があります。
もっと詳しく説明もできますが、眠くなっちゃうと困るので、詳細はまた今度！ 今は簡素化された宣言だということだけを理解して、次のセクションに移りましょう。
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">上の部分は、HTML5も以前のHTMLもさほど変わりはありません。ページのタイトル（head要素だけが必須要素）は今まで通り宣言されていて、メタタグも単にオプション例としてどこに配置されるかを指定したのみです。ここには、いくつでも好きなだけ有効なmeta要素を書けます。
この部分のマークアップの鍵となるのは、いつものlink要素を使って指定しているスタイルシートです。hrefとrel以外、linkに必要な属性はありません。古いバージョンのHTMLではよく見られた、スタイルシートのコンテンツの種類を示すためのtype属性も必要なくなりました。
ブラウザーについて
以下の件は、解説を始める前に少々背景説明が必要です。HTML5には、articleやsectionなどの多くの新しい要素が含まれています。これは古いブラウザーで認識されず大きな問題になるのでは？ と心配になるかもしれませんが、大丈夫です。なぜなら、ほとんどのブラウザーは実際に使われているタグを優先するからです。例えば、recipeタグ（またはziggyタグ）が含まれるHTML文書で、recipeタグの要素にCSSでスタイルが設定されていたとします。ほぼ、すべてのブラウザーは、これをさも当たり前のように、指定したスタイルを適用してくれます。
もちろん、こうした仮定的なHTML5の文書は検証に失敗し、アクセシビリティーに問題が出ます。しかし、ほぼ、すべてのブラウザーで正しく表示はされるのです。例外は、古いバージョンのInternet Explorer（IE）だけ。バージョン9より前のIEは、認識されない要素はCSSのスタイルを適用しないように処理されています。謎の要素は、レンダリングエンジン側で「不明な要素」として認識さるため、その見た目や動作を調整できないのです。この例に挙げた要素だけでなく、ブラウザーが開発された当時存在しなかった要素すべて含みます。そうです、新しいHTML5の要素も。
良い知らせとしては、本記事作成時は、ほとんどのIEユーザーはバージョン9またはそれ以上のバージョンのブラウザーを使っていて、バージョン9より前のブラウザーを使っている人は本当に少ないということです。デベロッパーにとって、今は大きな問題ではなくなりました。しかしIE8またはそれ以前のブラウザー対象のサイトを作っている場合、デザインがばらばらにならないようにする必要があります。
幸いなことに、解決策があります。 もとはJohn Resigによって開発された、とてもシンプルなJavaScriptです。Sjoerd Visscherのアイデアにヒントを得たもので、新しいHTML要素のスタイルが古いバージョンのIEでも適用されるようになります。
マークアップ内に、いわゆる「HTML shiv」＊を条件コメントで囲んだscriptタグとして含めます。条件コメントはIE9より前に搭載された特有の機能で、スクリプトまたはスタイルをかける特定のブラウザーのバージョンを指定ができるようになります。以下の条件コメントは、含まれているマークアップはIE 9より前を使っているユーザーのみに適用されます。
＊HTML5 shimの名前の方が馴染みがある方もいるでしょう。違う名称でコードとしてはまったく同じものですが、本記事ではもともとの名称、HTML5 shivと呼んでおきます。
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->注意として、HTML5の機能または新しいAPIを扱うJavaScriptライブラリーを参照している場合、すでに有効なHTML5が存在している可能性があります。その場合は参照しているスクリプトを省けます。JavaScriptライブラリーで最新のHTMLとCSSの機能を検出するModernizrが、その一例です。Modernizrは、古いバージョンのIEでHTML5の要素を有効にするため、shivが重複してしまいます。
メモ：もちろん、HTML5 shivで得するユーザーもいます。JavaScriptをなんらかの理由でオフにしているユーザーと、IE8以下のブラウザーのユーザーです。Webデザイナーは、常にサイトのコンテンツはJavaScriptを使わないユーザー含むすべてのユーザーに利用可能であるべきだと教えられていますが、思っているほど悪いわけではありません。多くの統計結果で、JavaScriptをオフにしているユーザー人口は少なく、特にその中のIE8以下ユーザーを含めると、そんなに大きな懸念ではないようです。
英国政府デジタルサービスが2013年10月に公開した統計によると、政府のWebサービスの閲覧者でJavaScriptをオフにしている、または使っていないユーザーは1.1%でした。また、2010年10月に公開されたYahooデベロッパーネットワークでの調査では、JavaScriptをオフにしているユーザーは、世界中の合計トラフィックの1%でした。
あとはご存知のとおり
最初に示したHTML5テンプレートで説明してない部分は、いつものbody要素が終了タグとともに書かれていて、htmlの終了タグがあります。また、script要素でJavaScriptのファイルも参照されています。
前に説明したlinkタグと同様に、<script>タグはtype属性をわざわざ指定する必要はありません。XHTMLを書いたことがあれば、scriptタグは以下のようだったと覚えているはずです。
<script src="js/scripts.js" type="text/javascript"></script>JavaScriptはすべての実用的な目的のために作られたWebで使える言語であり、わざわざ申告しなくてもすべてのブラウザーでJavaScriptが使われている前提のため、HTML5の文書ではtype属性の指定は不要です。
<script src="js/scripts.js"></script>エンベッドされるJavaScriptの最適な実行環境を確保するため、script要素はページの一番下に配置しています。これは、ページのローディングのスピードに関係してくるためです。ブラウザーの習性として、スクリプトを読み込んだ場合、スクリプトの解析を優先しようとします。大きなスクリプトがコンテンツの冒頭にあった場合、ページのローディングスピードが遅くなります。それを避けるため、ページのローディングが終わってからスクリプト解析が始まるように、スクリプト系はコードの最後にしておきましょう。
しかし、ブラウザーがページを表示する前にスクリプトを読み込ませたい場合など、場合によっては（HTML5 shivなど）スクリプトを冒頭に置かなければならない場合もあります。
※本記事は、2013年公開、2016年4月に更新されたものです。Alexis Goldstein、Louis Lazaris、Estelle Weyl著、HTML5 & CSS3 for the Real World: 2nd Editionを基にしています。
※日本語版更新履歴：ソースコードを原文に合わせて一部修正しました。（2016年9月6日20時25分）
（原文：A Basic HTML5 Template For Any Project）
［翻訳：Eri Noda／編集：Livit］
