HTML5 Quick Start

html5

※※※すみません、全然クイックスタートになってないです※※※


ご存知だとは思いますが、HTML5とはHTMLの次期バージョンです。
これまでのHTMLがWebドキュメントを記載するためのマークアップ言語だとすると、HTML5はWebアプリのためのプラットフォームと捉えることができると思います。

など、様々な要素が追加されました。

  • HTML5で廃止された要素
    • frame
    • frameset
    • center
    • strike

など、廃止となった要素が数多くありますが、使用してもブラウザでエラーにならずに処理されます。

  • HTML5のバリデーション

記述したHTMLがHTML5に準拠しているか、以下のサイトで検証できます。

html5shivを利用します。

  • HTML5の機能が実装されているか確認する

現状のHTML5の実装状況はブラウザによって異なります。
使用するHTML5の機能が、そのブラウザで実装されているかは、Modernizr: the feature detection library for HTML5/CSS3を使って確認します。


以下、簡単なHTML5のコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">h1 { font-size: 50px; }</style>
    // Modernizrの読み込み
    // ダウンロードしてきて、適当なディレクトリに設置
    <script src="./js/modernizr-1.1.min.js"></script>
    <script type="text/javascript">
    <!--
	if (Modernizr.inputtype.range) {
	  // レンジが使える場合
	} else {
	  // レンジが使えない場合
	}
    //-->
    </script>
    // ブラウザがIEの場合は、html5shivを読み込む
    <!-- [if IE] >
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <! [endif] -->
    <title>HTML5 Quick Start</title>
  </head>
  <body>
    <h1>HTML5 Sample</h1>
  </body>
</html>