html5でのマークアップで重要なのはセマンティクスの概念。
section、articleの使い方が重要になってくるのでは。
rssフィードを書くのに近い気がする。
様々なデバイスで最適な形で使用できるように、sectionなどを用いた階層構造をいかに使いやすい構造にするか、というところ。
section、article、aside
header nav footer address
manifestファイル（キャッシュマニフェスト）
について。sectionとarticle
section
文書やアプリケーションの一般的なセクションを明示。 見出しがあるひとつのまとまった文章を指すが、その文章が独立して扱えるような場合はsectionではなく、article要素が推奨されている。 なお、sectionはコンテナ要素的な使い方をするものでなく、そのような場合は今まで通りdivを使う。
<div id="container">
<section id="maincontents">
<h1>昔話</h1>
<p>むかーしむかーし．．．なのだった。</p>
</section>
</div>
は、
<div id="container">
<div id="maincontents">
<section>
<h1>昔話</h1>
<p>むかーしむかーし．．．なのだった。</p>
</section>
</div>
article
前述の通りそれひとつでひとつの独立した文章になるものをarticleとする。 artilceは入れ子が可能で、以下のような感じになる。
<article>
<article>
<h1>思い出話大全</h1>
<p>思い出話を網羅しちゃうよ。</p>
<section>
<h2>思い出話1</h2>
<p>1000年前のこと．．．．でした。</p>
</section>
<section>
<h2>思い出話2</h2>
<p>500年前のこと．．．．でした。</p>
</section>
</article>
<article>
<h1>コメント</h1>
<p>大変興味深いうんちゃらかんちゃら。</p>
</article>
</article>
aside
asideは前後の要素と関連があるけど、aside部分だけでも分離可能と考えられる補足的な情報に対して使う。 上記例にasideを追加したのが以下の例。
<article>
<article>
<h1>思い出話大全</h1>
<p>思い出話を網羅しちゃうよ。</p>
<section>
<h2>思い出話1</h2>
<p>1000年前のこと．．．．でした。</p>
</section>
<section>
<h2>思い出話2</h2>
<p>500年前のこと．．．．でした。</p>
</section>
<aside>
<h3>関連リンク</h3>
<ul>
<li><a href="">著者ウェブサイト</a></li>
<li><a href="">思い出話大全レビューページ</a></li>
</ul>
</aside>
</article>
<article>
<h1>コメント</h1>
<p>大変興味深いうんちゃらかんちゃら。</p>
</article>
</article>
header nav footer address
header nav footerはこれまで<div id-"header"></div>
としていたところを
<header></header>
とできるという、html5の目玉のひとつじゃあないかしら。
それぞれ字の如くヘッダー・フッター・ナビゲーションという括りで使う。
．．．といった捉え方が多いけど、以下のような使い方もある。
<header>
<h1>本日の訓告</h1>
</header>
<p>なせばなるなさねばならぬなにごともこもごも。</p>
<footer>
<p>カテゴリー：訓告</p>
<p><time datetime="2012-01-25">2012年1月25日</time></p>
</footer>
さて今回は次で最後。
manifestファイル（キャッシュマニフェスト）
html5ではで実装されたもので、強制的にキャッシュさせてロード時間短縮を狙えるもの。
<html manifest="cache.manifest">
.manifestファイルを作成し、こんな感じの記載。
.manifestの書き方は詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編、HTML5的にmanifestファイルをゴニョったによるとこんな感じか。
CACHE MANIFEST# 「#」で始まる行はコメント
# ファイルの先頭はCACHE MANIFESTで始まる必要がある# マニフェストファイルにはバージョンを記述しておくのが通例
# マニフェストが更新されたかどうかはファイル内容の厳密な比較で行われるため、
# リソースの内容が変化したらバージョン番号を変更する、という運用が一般的
# 例：Version: 200907211108Version: 20120125-01
############################################################
## キャッシュ対象のコンテンツ
CACHE:js/hoge.js
css/hoge.css
images/hoge.png############################################################
## 「NETWORK:」で始まるセクションは「オンラインホワイトリスト」と呼ばれる
# ここに記述したリソースはキャッシュの対象にならず、必ずネットワークアクセスされる
# この例では、「/api」で始まるURLは全てネットワークアクセスを行う
# NETWORK:
# /api# 大雑把にルートの諸々
/index.php
/index.js
/favicon.ico
/archives
/themes
/js# 外部リソース
http://www.google-analytics.com
http://b.hatena.ne.jp
http://farm3.static.flickr.com
さらに、
.htaccessなどで.manifestがContent-Type: text/cache-manifestでヘッダー送出されるようにする
AddType text/cache-manifest .manifest
とのこと。
HTML5的にmanifestファイルをゴニョったの記事がわかりやすく、追記のmanifestファイルとかの続きも読むのをおススメ。
なお、manifestの記述はhtmlタグ、つまり最初に登場するため、以下のような書き方はできない。
<html manifest="cache.manifest">
<base href="http://hogehoge.jp>"baseがあとにくると相対パス前が認識されない、当たり前か。
