MEMORVA

HTML5 - html head 基本構造

更新:

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で書く。

廃止される主な要素

<font>、 <center>、 <basefont>、 <big>、 <strike>、 <tt>、 <u>、 <frame>、 <frameset>、 <noframes>、 <acronym>、 <applet>、 <isindex>、 <dir>

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

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

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

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

構文チェック

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