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ブラウザ上ではエラーとならずに処理がされる(後方互換性のため)

要素名	説明	代替手段
applet	Java アプレットの埋込	代わりにembed/object要素を使用してください。
acronym	略語やイニシャルを表す	代わりにabbr要素を使用してください。
dir	ディレクトリ一覧を表す	代わりにul要素を使用してください。
frame	フレーム	iframeとCSSを使うか、サーバーサイドでコンテンツを結合してください。
frameset	フレームセット
noframes	フレームに対応していないブラウザ向けのコンテンツ
isindex	サーバー入力するテキスト入力欄	formとテキストフィールドの組み合わせを用いてください。
listing	内容をそのまま出力	pre要素とcode要素を代わりに使用してください
xmp	内容をそのまま出力	pre要素とcode要素を代わりに使用してください
noembed	embedが使えない場合の代替要素	フォールバックが必要な場合は、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のレンダリング仕様に従うと良いです。

HTML5 (including next generation additions still in development) - whatwgのドラフト

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

CSS3も含め、ブラウザごとに機能が使えるのかどうかのリファレンスになっています - http://a.deveria.com/caniuse/
HTML5と関連APIについて詳しく記述してあります - Comparison_of_layout_engines

プログラムの実行中にブラウザが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>