HTML5 - html head 基本構造

更新：2017-08-15

HTML5 の基本的な構造、主な要素。

HTML5

HTML 4.01 でサイトを作ることが多かったが、2011年5月から新しく作るページは HTML5 に変えた。過去に作ったページは修正が面倒なので、記事を更新しない限りは放置する。以下は今まで使用していた HTML 4.01 の基本的な構造。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テストサイト</title>
<meta name="description" content="テストサイト">
<meta name="keywords" content="テスト,サイト">
<link rel="stylesheet" type="text/css" href="./index.css">

<style type="text/css">
</style>

<script language="javascript" type="text/javascript">
</script>

</head>
<body>

</body>
</html>

変更後の HTML5 の基本的な構造は以下のようにした。かなりスッキリした記述になる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テストサイト</title>
<meta name="description" content="テストサイト" />
<meta name="keywords" content="テスト,サイト" />
<link rel="stylesheet" href="./index.css" />

<style></style>

<script></script>

</head>
<body>

</body>
</html>

HTML 4.01 のときは結構適当にタグを書いていたが、HTML5 から少し注意してタグを書くようにした。 HTML5 に対応していないブラウザを考慮して、HTML 4.01 の雰囲気を残しつつ HTML5 風にタグを書いている。以下に私の個人的な記述方法や方針を記す。

主な変更箇所

<!DOCTYPE html>
DOCTYPE の記述がシンプルに。
<meta charset="utf-8" />
文字コードの指定がシンプルに。
現時点で私のサイトでは動作上特に問題がなかったので導入した。
古いブラウザでの動作は不明。
Content-Script-Type の text/javascript や text/css の指定を削除。
XHTML 形式で書いた。
私は <meta> や <br> など終了タグがないものは、タグの終わりにスラッシュを書いて <br /> のように記述している。
ただし、HTML5 ではこのスラッシュは不要で、書いても書かなくても混在でも良いようだ。
li 要素など終了タグ </li> を省略して良いものもあるが、なるべく書くようにした。

HTML と XHTML どちらが主流になるか分からないため、どちらでも使える XHTML スタイルで書くことにした。主なタグとしては以下のものがある。

<meta> → <meta />
<link> → <link />
<br> → <br />
<img> → <img />
<hr> → <hr />

タグ（要素）の属性はCSSを使用する

既にCSSを使うようにしていたが、癖で旧式の属性を書いてしまうことがあった。 bgcolor、cellspacing、cellpadding、align、valign などの属性を使ってしまうことがあったが止めた。代わりにCSSで background、margin、padding、text-align、vertical-align などを使う。

img 要素

alt に何も書かないときでも alt="" と書く。
<img border="0" /> は <img style="border:none;" /> のようにCSSで書く。

廃止される主な要素

これらはもともと使用していなかったが、今後も使用しない。

新しく追加される主な要素

<header> </header>
サイトのロゴなどが表示されるページのヘッダー部分に使用するタグ。
<footer> </footer>
コピーライトなどが表示されるページのフッター部分に使用するタグ。
<nav> </nav>
ページのナビゲーション（メニュー）部分に使用するタグ。

他にもいろいろあるが、現在新しいタグは使用しないことにしている。新しいタグに対応していないブラウザでは無効となる。 IE9が広く普及したころに使用を検討したい。

構文チェック

W3C Markup Validation Service を使って、自分が書いた HTML5 の構文をチェックできる。 2011年6月現在、きちんと HTML5 で記述しても「Passed, 1 warning(s) 」と表示される。この warning は構文に誤りがあるわけではなく、「HTML5の構文チェック機能はまだ実験的なもの」という警告を出している。