HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。
この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。
HTML4・XHTML1.0からの主な違い
- 新しく追加された要素 –
section,article,footer,audio,video,progress,nav,meter,time,aside,canvas,datagrid
※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。（MIMEをXHTMLのにすればおｋらしい）
※IEではjavascriptによるフォローが必要。 - 新しいフォームのコントロールタイプ – dates と times,
email,url,search
※フルサポートしているのは今のところopera9.6だけらしい。
※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。 - 新しい属性 –
ping(a、area要素),charset(meta要素),async(script要素) - 全ての要素で使用可能なグローバル属性–
id,tabindex,hidden - 廃止された要素 –
center,font,strike
ブログの場合だとarticle＝各記事という扱いになるらしいが…。
HTML5にはいち早くFirefox、Opera、Chrome、Safarが対応しているもののサポートしている要素等はまちまち。
IEはJavascript（createElement）によるフォローが必要で、レンダリングも他の4ブラウザと違う。
デモがIEだけ明らかにレンダリングが違っているのは非対応からです。
<!--[if IE]>
<script type="text/javascript">
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
上記のように使いたい要素をcleateElementすれば表示はされる。
var html5elm = array(“header”,”footer”,”nav”,”article”,”section”);
for(i=0; i < html5elm.length; i++){
document.createElement(html5elm[i]);
}
[/js]
これはIE向けのJavaScriptライブラリを使うのが楽だと思う。
ドキュメントタイプとエンコードについて
HTML5のDOCTYPE宣言はかなりシンプル
<!DOCTYPE html>
これはドキュメントタイプがMIMEタイプに依存するようになったため。
XHTMLの場合はDOCTYPEは非推奨らしい。
MIMEタイプ は HTMLが[text/html]、XHTMLは[application/xhtml+xml]または[application/xml]
で、XHTMLをtext/htmlとしてはならない。
HTMLにした場合は、XHTMLで空(void)要素の最後に付けてるスラッシュは必要ない。（付けた場合は無視）
文字エンコードはHTTPの Content-Type ヘッダを使ってエンコードすることが強く推奨されているが、
サーバーの設定が出来ない場合はmeta要素のcharset属性で指定する。
位置はファイルの先頭から512バイト以内。Content-Typeと同じくhead開始タグとtitleタグの間に置いてるソースが多かった。
<meta charset="UTF-8">
contet-typeを指定するmeta要素は引き続き使用可。
HTMLの場合
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
XHTMLの場合
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
でもこれバリデータではエラーになる。
.htaccessの場合
- HTML
- AddType “text/html; charset=UTF-8” html htm
- XHTML
- AddType “application/xhtml+xml; charset=UTF-8” html htm
XHTMLの名前空間
<html xmlns="http://www.w3.org/1999/xhtml">