HTML5

HTML5ならではの機能
Canvas：JavaScriptを使ってグラフィックを描く機能
CSS3：CSS3 Animation

google拡張

・HTML5 Outliner
　アウトライン構造が見えるようになる

「IE対策記述」

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style> article,aside,dialog,figure,footer,header,hgroup,menu,nav,section {display: block;}
</style>

divはアウトライン構造に関係がない

section,article,aside,navを使った構造

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>base</title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style> article,aside,dialog,figure,footer,header,hgroup,menu,nav,section {display: block;}
</style>
</head>
<body>
<header>
<h1>サイトタイトル</h1>
</header>
<nav>
  <ul>
    <li><a href="#">メニュー1</a></li>
     <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー1</a></li>
       <li><a href="#">メニュー1</a></li>
  </ul>
</nav>

<section>
<h1>章見出し</h1>
<p>本文</p>
<section>
<h2>節見出し</h2>
<p>本文</p>
<section>
<h3>項目見出し</h3>
<p>本文</p>
<div class="note">
デザイン上の都合でsection要素は使用しません
</div>
</section>
<section>
<h3>項目見出し2</h3>
<p>本文</p>
</section>
<section>
<h1>新着記事</h1>
<article>
<h1>記事その１</h1>
<p>記事の本文</p>
</article>
<article>
<h2>記事その2</h2>
<p>記事の本文</p>
</article>
</section>
</section><!-- 節 -->
</section><!-- 章 -->
<aside>
<h1>リンク集</h1>
 <ul>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
 </ul>
</aside>
<footer>
<small>Copyright webDesign</small>
</footer>
</body>
</html>

footerには住所でない限りaddressを使用しない。