HTML5　SEMANTICS　HTML5テンプレート　コピペで簡単　【入門編　第７回】

お手軽HTML5テンプレート

これからHTML5を始めたいという方のためのHTML5のテンプレートを用意しました。
コピー＆ペーストですぐに始めたい方必見です。

コピペでいこう！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sakc.jp staff blog</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section {display: block;}
</style>
<link rel="stylesheet" href="css/style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>

新規追加タグに対するブロック指定

要素を大別するとブロック要素、インライン要素の2つに分類されてきました。
HTML5では対象となるコンテンツごとに分類するコンテンツモデルという概念に変わりました。

HTML5で新しく追加された要素は、その新要素に未対応のブラウザの場合、インライン要素のように表示されます。
ですので、あらかじめスタイルを指定する必要があります。
このテンプレートでは、displayの値（デフォルトはinline）をblockに指定しています。

linkタグも用意してありますので、css/配下にstyle.cssというファイルを作成して下さい。

googleapisのjQueryを指定

jQueryをダウンロードして、サイトに設置するのも良いのですが、最近はgoogleへの直接リンクがはやっているようです。
このテンプレートでは、var1.8.1にリンクしています。

jQueryの最新を調べたい場合は以下をご覧ください。
GoogleライブラリAPI#jQuery

javascriptファイルの指定もあり、js/配下にscript.jsというファイルを作成して下さい。

IE対応

HTML5の規格策定に参加していなくて対応も遅いIEの対応用のスクリプトファイルも読み込んでいます。
IEに関してはかなり見た目が変わりますが、inlineからblockに指定してある新規追加タグもこれで対応できます。
IEはヴァージョン１０より対応するようですが、果たしてどこまで対応するのか不安が残ります。
現在は９よりも下のバージョンに対するタグが記述されています。