[html] HTML5のサンプルソースと仕様メモ

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5 demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。(MIMEをXHTMLのにすればおkらしい
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性ping (aarea要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性id, tabindex, hidden
  • 廃止された要素center, font, strike
Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle=各記事という扱いになるらしいが…。

HTML5にはいち早くFirefox、Opera、Chrome、Safarが対応しているもののサポートしている要素等はまちまち。
IEはJavascript(createElement)によるフォローが必要で、レンダリングも他の4ブラウザと違う。
デモがIEだけ明らかにレンダリングが違っているのは非対応からです。

<!--&#91;if IE&#93;>
<script type="text/javascript">
 document.createElement("header");
 document.createElement("footer");
 document.createElement("nav");
 document.createElement("article");
 document.createElement("section");
</script>
<!&#91;endif&#93;-->

上記のように使いたい要素を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">

参考リンク

Leave a Comment.