復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

HTML5 基礎知識

HTML5を書くための基礎知識をメモ

HTML5の雛形

XHTML5ではなくてHTML5マークアップについて

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 基礎知識</title>
		<meta charset="UTF-8">
	</head>

<body>
</body>


</html>

HTML5の新要素

文章構造に関するもの
section 汎用的なセクション。文章のアウトラインを構成する。
article セクションの一種で、Webページから独立したコンテンツを表す。
aside セクションの一種で、外側のセクションに対する補足情報を表す。
nav セクションの一種で、外側のセクションに対するナビゲーションメニューを表す。
footer セクションのフッター。
header セクションのヘッダー。
hgroup 複数の見出し(h1-h6)をまとめる。
外部コンテンツの埋込み
figure キャプションを伴うような内容のものを文章中に埋め込む際に使用。
video 動画プレーヤ。
audio 音声プレーヤ。
source video/audioに対して、リソースのURLやタイプを指定する。
canvas ビットマップキャンバス。
embed プラグインで実行するコンテンツの埋め込み。
フォーム
keygen 公開鍵暗号式のキーペアを作成する。
output 画面出力されるフォーム要素。
progress 進捗状況を表す(プログレスバー)。
meter メーター。
テキスト・その他
mark Webページの意図とは異なる文脈での強調。
ruby/rt/rp 感じの読みがななどを表す「ルビ」を指定する。
time 日付や時刻を表す。
command メニューから実行されるコマンド。
details ユーザーが任意で展開したり閉じたり出来るような詳細情報。
datalist オートコンプリートの候補など、データのリストを保持するのに用いられる。

HTML5で廃止された要素

Webブラウザ上ではエラーとならずに処理がされる(後方互換性のため)



























要素名説明代替手段
appletJavaアプレットの埋込代わりにembed/object要素を使用してください。
acronym略語やイニシャルを表す代わりにabbr要素を使用してください。
dirディレクトリ一覧を表す代わりにul要素を使用してください。
frameフレームiframeとCSSを使うか、サーバーサイドでコンテンツを結合してください。
framesetフレームセット
noframesフレームに対応していないブラウザ向けのコンテンツ
isindexサーバー入力するテキスト入力欄formとテキストフィールドの組み合わせを用いてください。
listing内容をそのまま出力pre要素とcode要素を代わりに使用してください
xmp内容をそのまま出力
noembedembedが使えない場合の代替要素フォールバックが必要な場合は、object要素を使用してください。
plaintest内容をそのまま出力MIMEタイプ"text/plain"を用いてください。
rbルビ対象の文字列を指定ルビ対象の文字列は、ruby要素内に直接記述してください。
basefont基準フォントを指定CSSを代わりに用いてください。
bigテキストサイズを大きく見せる
blink文字を点滅させる
center内容を中央寄せで出力する
fontフォントを指定
marquee文字をスクロールさせる
s取り消し線
spacerスペースを挿入する
strike取り消し線
tt等幅フォントを仕様
uテキストに下線を引く
bgsound効果音を鳴らすaudio要素を代わりに用いてください。

HTML5のコーディングTIPS

古いブラウザで新要素を使用するには

新しい要素が意図した通りに表示されるよう、CSSで表示を調整します。

address, article, aside, figure, footer,
header, hgroup, menu, nav, section {
	display: block;
}

以下の要素は非表示になるべきなので、CSSで調整します。

[hidden], command, datalist,
menu[type=context], rp, source{
	display: none;
}

完全にHTML5の環境として表示をリセットする場合にはHTML5レンダリング仕様に従うと良いです。

IE対応

こちらで公開されているJSを用いることでIEにもhtml5の要素の存在を覚えさせるということをします。
Google codeで公開されている
http://html5shiv.googlecode.com/svn/trunk/html5.js
を読み込みます。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML5の機能が実装されているかを調べるには

HTML5の機能はブラウザによって実装レベルがまちまちです。
そのために実装されているのか、どうかを把握しておく必要があります。

プログラムの実行中にブラウザがHTML5の機能を持っているのかを調べたい場合もあります。
例えば「Web Storageが使えるならば、ストレージに、なければクッキーに保存する」といった処理を行う場合など。
Modernizrというライブラリを用いて判定することができます。

if (Modernizr.localstorage){
  // Take advantage of local storage that is persistent
  // between tabs on the same site and can store MBs of data
} else {
  // resort to cookies as best you can
}  

使い方の詳細はこちらから。
HTML5を意識した開発をする場合には、必須のライブラリです。

現在のHTML5簡単スタート

現状HTML5をはじめようとしたらこんな感じ。

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 基礎知識</title>
		<meta charset="UTF-8">
		
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<script src="http://hebita.jp/js/modernizr-1.1.min.js"></script>
		
		<style type="text/css">
			address, article, aside, figure, footer,
			header, hgroup, menu, nav, section {
				display: block;
			}
			
			[hidden], command, datalist,
			menu[type=context], rp, source{
				display: none;
			}
		</style>
	</head>

<body>

</body>
</html>

これで、可能な限り古いブラウザをサポートしつつ、HTML5の機能を引き出すHTMLが書けることとなります。

参考書

HTML5&API入門

HTML5&API入門

リンク

  1. HTML5 canvas基礎 - canvasの基礎的な使い方
  2. HTML5 canvas関連API - canvasエントリーで取り上げているAPIの解説や使い方
  3. canvas サンプル集 - canvasのサンプル