- 2009-07-08 (水) 21:03
- HTML&XHTML
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
Sectionsの使いどころがイマイチよく分からない。
ブログの場合だと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]);
-
}
これは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">
参考リンク
