<section>
<h2>nav要素</h2>
<p>主要なナビゲーションをあらわします。</p>
<aside>
<p>海外では「navi」よりも「nav」の方が多いみたいです。</p>
</aside>
</section>
<header>...</header>
<div class=wrap>
<div class=main>
あああ
</div>
<aside class=sidebar>
あああ
</aside>
</div>
<footer>...</footer>
<article class="entry" id="vol40">
<h2> CSS nite in Ginza, Vol.40</h2>
<p>4周年記念となるVol.40では...</p>
<section>
<h3>事前登録について</h3>
あああ
</section>
あああ
</article>
フィードの<item>や
<entry>などをイメージ。
<nav>主要なナビゲーション
<nav class="global">
<ul>
<li> <a ...>ホーム</a>
<li> <a ...>お知らせ</a>
<li> <a ...>HTML5 Niteって？</a>
<li> <a ...>これまでのNite</a>
<li> <a ...>お問い合わせ</a>
</ul>
</nav>
UAが<nav>を利用することで
アクセシビリティも高まる？
●ＨＴＭＬ５のセクション
文書構造をより明示的に表せる。
<section> 章や説などの、ひとまとまり
<section>
<h3>section要素</h3>
<p>章や説などをあらわす。</p>
</section>
<section>
<h3>nav要素</h3>
<p>主要なナビゲーションをあらわす。</p>
</section>
<section>
<h3>article要素</h3>
<p>自己完結するセクションをあらわす。</p>
<section>
<h4>サンプル</h4>
</section>
</section>
HTML5はXMLとして扱うことも可能。（XHTML5）
HTML5のHTML構文でも「XMLっぽく」書けるように。
<img> ←今までのHTML
<img /> ←こっちもOKに！
1.ブラウザーの互換性
Webアプリの開発にはJavascriptやDOMが不可欠。
●クロスブラウザー対応は厄介。互換性に問題がある。
●非互換を生む２つの「ない」
実装がない。→対応状況が異なる。
仕様がない。→実装に違いが生まれる。
●HTML5では詳細な処理規則を定義。
2.既存の実装との互換性
今のブラウザーやサイトとも
互換性をある程度は保つ。
大きな変更はできないが今の環境を捨てずに済む。
互換性を持つことでWebを段階的に進化させられる。
●HTML5の新機能
APIの追加やマークアップの拡張など。
<canvas>
スクリプトから画像を扱う。応用はさまざま。
http://bespin.mozilla.com/ ： <canvas>で作られたエディタ。
http://www.chromeexperiments.com/ ： Chrome Experiments 最新技術のショーケース。
<video> & <audio>
<img>みたく、簡単に動画・音声を扱えるように。
<video src ="intro_html5.vid">
<a …>ダウンロード </a>
</video>
プラグインじゃないのでCSSやSVGと組み合わせが可能。
●マークアップ
マークアップにも数多くの拡張や変更が。
<canvas> <audio> <video> <header>
<footer> <section> <article> <nav>
<aside> <hgroup> <figure> <details>
<datalist> <meter> <progress>
<time> <mark> <ruby> etc…
よく使われる class/id を要素として採用する。
<div id="header"> → <header>
<div class="section"> → <section>
定型句はよりシンプルに。
<!DOCTYPE html>
<meta charset="UTF-8">
古いブラウザーでも機能する。
フォームの拡張も。
<input type=text ...>
<input type=password ...>
<input type=email ...>
<input type=range ...>
<input type=color ...>
<input type=datetime ...>
名前（必須）：□入力フォーム
メール（必須）：□入力フォーム
<input type="text" ... required>
<input type="email" ... required>
サイト名検索：キーワードを入力フォーム
<input type="search" placeholder="キーワードを入力">
