サイト内検索

HTML5 の雛形

この記事は、html5doctor に掲載されている記事「HTML5 Boilerplates」を日本語訳したものです。この記事では、今すぐに、HTML5 でページを作るために、まず最初に必要な情報が簡潔にまとめられています。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

HTML5 の雛形

なぜ HTML5 が 2022 年ではなく今日から使えるのかという話は置いておいて、この記事では、あなたがプロジェクトで今すぐにでも使える一連の HTML5 の雛形を提示しよう。

5 秒でできる HTML5

HTML5 として妥当なマークアップにするのは、ホントに簡単だ。DOCTYPE をこれに変えるんだ:

<!DOCTYPE html>

たったこれだけだ。これ以上何もいらない。

Google はもうそうしている。Google のホームページをチェックしてくれ。こんな感じに 1 行で書かれている:

<!doctype html><head><title>HTML 5 - Google Search</title><script>...

皮肉なことに、Google の検索ページとその一覧は、妥当なものになってない。なぜなら、不正なタグを使っているからだ。例えば <font> だ。それに、他にもたくさんエラーがある。しかし、それは問題ではない。なぜなら、その doctype を使って HTML5 のパース規則をうまく活かすことができるからだ(例:script 要素に type 属性は不要)。

小さくした HTML5

もし、すぐに試したい、もしくは、スタイリングしなくてもいい、というのであれば、HTML5 のミニ・ドキュメントに興味を持つだろう:

<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>

こんなのでも、完全に妥当な HTML5 だ。

面白いことに、もう少しいろいろなパターンで試すと、バリデーションで相違が出る。<title> タグを取り除くと、Hixie’s DOM viewer では良好と出る。同じく、W3C バリデータでも、そのマークアップは良好と出る。しかし、手動で入れなければいけない。

一方、Henri Sivonen’s validatorでは、それは妥当でないと出る(<title> タグなし)。W3C バリデータでも、URL を指定する場合では、それは妥当でないと出る。

HTML 5 complete & compatible

もっと完全な雛形にするには、メタ・キャラクター・セットを入れるべきだろう。そうしないと、適切にレンダリングできない文字が出てくるだろう(過去に、なぜそうなるのかを解き明かそうと、とても多くの時間を費やしたことがある)。

私たちは、IE で要素をスタイルできるよう、HTML5 shiv も入れている(バックサイドで、ちょっとした JavaScript をキックする必要があるからだ)。

最後に、正しいコンテンツ・フローとなるよう、新ブロック・レベル要素を認識させるために、デフォルトの CSS スタイルを加えている(ブラウザーは、もともと、それらについて知っているわけではないからだ) – このスクリプトは <head> 要素の中に入れなければいけないことに注意すること

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

HTML5 で遊んだり経験してみたい人のために、私は JS Bin でテンプレートを作ったのでどうぞ:http://jsbin.com/new/html5