読者です 読者をやめる 読者になる 読者になる

HTML5概略 -- 雛形

 大体の内容はDOCTYPE宣言、<head>内の記述方法となります。

 さて、HTML4.01でCSSJavascriptを使用するときの雛形は以下のようになります。HTML 4.01でCSSJavascriptを使用するとき必要最低限記述する必要のあるもののみ記述しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<title>title</title>
	<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body></body>
</html>

 一般的なコードですね。これをHTML5仕様に直すと以下のようになります。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body></body>
</html>

 大幅に短くなりました。ひとつひとつ解説していきます。

 まずDOCTYPE宣言から。

<!DOCTYPE html>

 HTML5ではDOCTYPE宣言に大した意味は持たしていません。精々意味はこの文書はHTML5で書かれているという程度です。じゃあ書く意味ないんじゃないの?という方もいますが、DOCTYPE宣言はブラウザ(や人間)にHTMLのバージョンを明示的に伝えるためにも記述しましょう。

 lang属性の指定に関しては変更はないので省略します。

 続いて<meta>。

	<meta charset="UTF-8">

 これもまた大幅に短くなりました。
 文字コードの指定については<meta>を使ってcharset属性で指定するだけな単純な構造になりました。ちなみに、HTML4.01と同じ記法でも問題はありませんが、わざわざ冗長なものを使う必要性もないでしょう。
 HTML5ではスタイルシート言語、スクリプト言語の指定をそれぞれCSSJavascriptを使う場合はしないようになりました。これはデフォルトの言語のMIMEタイプがそれぞれtext/css及びtext/javascriptとなっているためです。参考までにWhatwgより一節を引用。

The type attribute gives the styling language. If the attribute is present, its value must be a valid MIME type that designates a styling language. The charset parameter must not be specified. The default value for the type attribute, which is used if the attribute is absent, is "text/css". *1

 さて、以下の2文。

	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">

 これらについては上記の通り記述をしてはいけないので注意しましょう。現在のW3Cの勧告では、http-equiv属性にContent-Style-Type、Content-Script-Typeは存在しない(悪い値)とされます。参考までにW3Cマークアップ検証サービス(HTMLがW3Cの基準に準拠してるか判断してくれる)を用いて、http-equiv属性にContent-Style-Typeを指定したときのエラーを記します。

Bad value Content-Style-Type for attribute http-equiv on element meta.

 <title>の指定に関しては変更はないので省略します。

 続いて<link>

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

 type属性が省略されています。HTML5ではscript要素やlink要素においてtype属性を指定する必要がなくなりました。


 以上、HTML4.01とHTML5の雛形の違い(と言うよりはDOCTYPE宣言とhead要素内の記述法の違い)についてでした。

 以下小話。
 lang属性は言語-地域または言語で指定します。これ、日本語だとjaだけでいいんですよね。jaで日本語であることを示すので。ja-JPと書くと日本の日本語という意味になりますけど、日本語を公用語にしてるのは日本だけなので必要はないと。英語を指定するときは国名をちゃんと書く必要がありそうですけどね。en-US(アメリカ英語)とかen-UK(イギリス英語)とか。と、まあ話はそれましたが、日本語を使う場合はjaでいいです。ja-JPと書くのは個人的な好みです。正直どうでもいいです。
 タグの書き方について。細かな節に分けて説明すると思いますがその要素がその節のメインであれば<TAG>という記法にしようかなと。メインでなければTAG要素と。たぶんそのほうがぱっとわかりやすいかなーと思ったりだとかなんだとか。

*1:http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html