2012年10月14日 category : Web tags :

HTML5のテンプレートひな形(IE対応、CSS、JS、role属性付き)

このエントリーをはてなブックマークに追加

html5-template

HTML5のサイトを作るにあたってまずはテンプレートを用意したので備忘録としてブログに投稿

HTML5でサイトを構築する際に毎回手書きするのも面倒なのでテンプレートを作成しました。このテンプレートを使うとお洒落なサイトになりますよ的なものではなく、あくまで自分でマークアップしていく人向けのひな形です。

スタイルシート、ファビコン、JavaScriptの他にもHTML5で新たに加わったrole属性に対応させています。id、class名などは付加していませんので用途に合わせて追加してもらえればと思います。ファイルのパスなども環境にあわせて変更が必要になると思います。

01 . HTML5テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/xxxx.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<header role="banner">
</header>
<nav></nav>
<div role="main">
</div>
<footer role="contentinfo">
</footer>
</body>
</html>

02 . 解説:ドキュメント宣言からヘッダー情報

まずはドキュメントタイプ宣言です。かなりシンプルになりました。次にhtmlタグでHTML文書であることを書き、属性にて言語を指定しています。(jaは日本語)

<!DOCTYPE html>
<html lang="ja">

次にくるのはヘッダー情報です。charsetで文字コードの指定を行います。文字コードの指定のあとにタイトルタグを持ってきます。次の行からはスタイルシートやファビコンへのパスを指定しています。ここは環境にあわせてパスを変更してください。

最近SEO対策に効果が薄いとよく耳にするようになりましたが、description、keywordsもひな形として残してあります。descriptionにはサイト概要にあたる文書を、keywordsには関連語句をカンマ区切りにて「content=””」に指定します。

<head>
<meta charset="UTF-8" />
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/xxxx.js"></script>

次にIE8以下はHTML5に対応していないので、HTML5でも表示できるようにGoogleCodeから提供されているおまじないを入れておきます。ここでは直接参照していますが、ローカル環境にhtml5.jsをダウンロードして使用してもOKです。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>

03 . 解説:ボディ部分

このテンプレートはあくまでHTML5のひな形としてHTML5で新たに加わったheaderタグ、navタグ、footerタグとその間に入るメインコンテンツ部分という1カラム構成を想定しています。2カラムなどに変更する場合は文書構造の追加やCSSにて変更が必要です。

<body>
<header role="banner">
</header>
<nav></nav>
<div role="main">
</div>
<footer role="contentinfo">
</footer>
</body>

HTML5で追加になっているrole属性を各要素に指定してあります。role属性については過去記事にて触れていますので宜しければあわせてお読みください。(他にも種類があります)

HTML5のrole属性を考える!マークアップ時に意識したいこと | ごすてっぷ
HTML5にて新たに追加されたrole属性ですが、Webアクセシビリティの観点から考えてみました。 WordPressをインストールした時点で入っているテーマに「twentyeleven」というテー …

HTML5はまだW3C勧告前ではありますが、基本的なアウトライン部分は大きな変更はないと思っています。HTML5で書かれたサイトやブログも最近よく見ますしね。

HOME >>  Web > HTML5のテンプレートひな形(IE対応、CSS、JS、role属性付き)