Easy HTML5 Templateを読んで何やってるのかを調べてみた。

HTML5もやっておこうと思ってEasy HTML5 Templateのソースを眺めてみました。気になった点を調べたりしたので、メモとして残しておきます。

注意

Easy HTML5 TemplateはHTML5ビギナー向けに作られたものだそうです。他のHTML5テンプレートとして下記が紹介されてました。

HTML5 Resetの方がHTML5 Boilerplateよりシンプルで、Easy HTML5 Templateにも近いらしいです。なのでEasy HTML5 Templateから次のステップに進むにはHTML5 Resetを読んだり使ったりするのが良いかもしれません。

Easy HTML5 Templateのソース

http://www.impressivewebs.com/demo-files/easy-html5-template/

ソースをべたーと貼ると長すぎて邪魔だったので、こっちを見てください。Easy HTML5 Template自体のデモページです。

条件分岐コメント(Conditional comments)によるhtml要素

<!doctype html><!-- simplified doctype works for all previous versions of HTML as well -->
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->

IE6とそれ以外に分けています
no-jsはModernizrを使う事前提ぽい
3行目は、仕組がよく分からないけど条件分岐コメントをIEに読み込ませつつ、IE以外の条件分岐コメントを考慮しないブラウザに、中のhtml要素を読ませる仕組なんじゃないかなと思ってます

文字コードは最初

<head>
	<!-- simplified character encoding -->
	<meta charset="utf-8">

当たり前だけど、文字コードの設定はあらゆるテキストノードの前に書く。

meta keywordsはもういらない？

	<title>Easy HTML5 Template</title>
	<meta name="description" content="Easy HTML5 Template">
	<meta name="author" content="">

meta要素のdescriptionは置いてる割に、keywordsがありません。確かに、検索エンジンもかなり進化してるから、キーワードなんて書いてなくても勝手に解析するものって気はします。descriptionは検索結果のスニペットに使うから残ってるとか？まぁ真意は分からないですけど。

アイコン

	<!-- Delete these two icon references once you've placed them in the root directory with these file names -->
	<!-- favicon 16x16 -->
	<link rel="shortcut icon" href="/favicon.ico">
	<!-- apple touch icon 57x57 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">

favionは、確かクロスブラウザのために、ファイルのMIMEタイプとか、rel属性が2種類くらいあったような気がするけど、その辺は仕様が固まったのかな？
apple-touch-iconはiPhoneとかiPod touch用のアイコン。

参考

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 初代編集長ブログ―安田英久 | Web担当者Forum

css

	<!-- Main style sheet. Change version number in query string to force styles refresh -->
	<!-- Link element no longer needs type attribute -->
	<link rel="stylesheet" href="css/screen.css?v=1.0">

cssを更新したらクエリーストリングのバージョン番号を変更して、ブラウザキャッシュによる未反映を避けるみたいだけど、そこまでしなくてもって気もする。するならサーバーサイドで自動化したいなぁ。

Modernizr

	<!-- Modernizr for feature detection of CSS3 and HTML5; must be placed in the "head" -->
	<!-- Script tag no longer needs type attribute -->
	<script src="js/modernizr-1.6.min.js"></script>

まだ使ったこと無いので詳しく分からないけど、ModernizrはHTML5やCSS3など、新しい技術に対応したブラウザかどうかを判別するライブラリみたいです。

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

こんな感じでhtml要素に対応/未対応を表すclassをつけます。だからJavaScriptがオフになってたら、最初に書いておいたno-jsが残るって寸法です。他にも機能があるかもだけど。

参考

http://www.modernizr.com/
http://t32k.com/mol/2010/12/trackhtml5inga-with-modernizr/

html5shiv

	<!-- Remove the script reference below if you're using Modernizr -->
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

IE8とそれ以下のバージョンのIEは、sectionなどHTML5からの要素が上手く扱えません。JavaScriptでcreateElement()すると大丈夫になるとかで、その辺をやってくれるライブラリだったと思います。

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as
,
and without having to worry about them not working in Internet Explorer.
http://www.modernizr.com/

ただModernizrがカバーしてるので、Modernizrを使うなら不用です。

参考

GitHub - aFarkas/html5shiv: This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

body要素内は省略

	<!-- This is the main "div" that wraps the content generically; don't use "section" for this -->
	<div id="main">

		<!-- The first of two "section" elements for demo purposes; optional class added for styling (hs1 = "home section 1") -->
		<section class="hs1">
		<!-- Each section should begin with a new h1 (not h2), and optionally a header -->
		<!-- You can have more than one header/footer pair on a page -->
			<header>
			<h1>This is a Page Sub Title</h1>
			</header>

			<p>Some content...</p>

body要素の中は好みとかそれぞれのやり方とかがあると思うので、一部気になったところだけ。

1ページにsection要素が複数あって、それを囲むのにはdiv要素を使う。section要素は使わない。
section要素内に、そのセクションのヘッダーとしてheader要素を使っている。ナビゲーションなどを内包するページ全体のheader要素もあるけど、section要素内に改めてheader要素を置いても良いらしい。これは知らなかった。

jQuery

<!-- Remote jQuery with local fallback; taken from HTML5 Boilerplate http://html5boilerplate.com -->
<!-- jQuery version might not be the latest; check jquery.com -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>

jQueryに限らないけど、Google Libraries APIなどJavaScriptのCDNを使っていると、たまにネットが使えない環境で動かなくって無駄にはまったりします。なので、一手間加えてローカルにも同じjsファイルを置いて、ロードされてなければ使ってます。CDNを使うのはライブラリをダウンロードする手間が省けるというのもあるけど、どちらかといえばキャッシュが目的です。

その他のスクリプト

<!-- Below is your script file, which has a basic JavaScript design pattern that you can optionally use -->
<!-- Keep this and plugin scripts at the bottom for faster page load; combining and minifying scripts is recommended -->
<script src="js/general.js"></script>

要するにJavaScriptはbody要素の最後に書くとロードが早いというテクニックです。なぜ速くなるかは忘れました。

アクセス解析コード、そして終わり

<!-- asynchronous analytics code by Mathias Bynens; change UA-XXXXX-X to your own code; http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- this can also be placed in the <head> if you want page views to be tracked quicker -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
	var g = d.createElement(t),
		s = d.getElementsByTagName(t)[0];
	g.async = true;
	g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>

スクリプトの中でも優先度が低いアクセス解析コードが、本当にbody要素の最後になります。ただ、トラッキングをよりクイックにしたいならhead要素に書いても良いとあります。アクセス解析コードは一番最後で決定だと思っていたので、意図がちょっとよく分かりませんが。
body要素・html要素を閉じて終わりです。

最後に

body要素の中もほんとは書きたかったけど、まとまりよく書けそうに無かったのと、自分の書き方とは違ったりしたので、省略しちゃいました。header要素を1ページ内に複数回書いて良いのは知らなかったし、自分の書き方はまだxhtmlを引きずってます。なので、そういうHTML5のbody要素の中の書き方を知るのに良い情報源などあったら教えてほしいです。

環境

Easy HTML5 Template

UPDATES (Jan 11/2011)