■準備
DOCTYPE宣言
以下のように記述する。
<!DOCTYPE html>
エンコード
以下のように記述する。
<meta charset="UTF-8" />
もしくは以下のように記述する。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
どっちかだけ書くように(o^-‘)b
■時代遅れのブラウザで使う準備
block要素として認識してほしいものをcssで指定。
section, header, footer, nav, aside, article, address, figure, hgroup, menu { display: block; } [hidden], menu[type="context"], command, datalist, rp, source { display: none; }
IE6~8
面倒なので以下のスクリプトを書いて終わりにする。m(。・ε・。)m
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
中身が気になる。「(゚ペ)
// html5shiv MIT @rem remysharp.com/html5-enabling-script // iepp v1.5.1 MIT @jon_neal iecss.com/print-protector (function (p, e) { var q = e.createElement("div"); q.innerHTML = "<z>i</z>"; q.childNodes.length !== 1 && function () { function r(a, b) { if (g[a]) { g[a].styleSheet.cssText += b; } else { var c = s[l], d = e[j]("style"); d.media = a; c.insertBefore(d, c[l]); g[a] = d; r(a, b) } } function t(a, b) { for (var c = new RegExp("\\b(" + m + ")\\b(?!.*[;}])", "gi"), d = function (k) { return ".iepp_" + k; }, h =- 1; ++h < a.length; ) { b = a[h].media || b; t(a[h].imports, b); r(b, a[h].cssText.replace(c, d)) } } for (var s = e.documentElement, i = e.createDocumentFragment(), g = {}, m = "abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".replace(/ /g, '|'), n = m.split("|"), f = [], o =- 1, l = "firstChild", j = "createElement"; ++o < n.length; ) { e[j](n[o]); i[j](n[o]) } i = i.appendChild(e[j]("div")); p.attachEvent("onbeforeprint", function () { for (var a, b = e.getElementsByTagName("*"), c, d, h = new RegExp("^" + m + "$", "i"), k =- 1; ++k < b.length; ) { if ((a = b[k]) && (d = a.nodeName.match(h))) { c = new RegExp("^\\s*<" + d + "(.*)\\/" + d + ">\\s*$", "i"); i.innerHTML = a.outerHTML.replace(/\r|\n/g, " ").replace(c, a.currentStyle.display == "block" ? "<div$1/div>" : "<span$1/span>"); c = i.childNodes[0]; c.className += " iepp_" + d; c = f[f.length] = [a, c]; a.parentNode.replaceChild(c[1], c[0]) } t(e.styleSheets, "all"); } }); p.attachEvent("onafterprint", function () { for (var a =- 1, b; ++a < f.length; ) { f[a][1].parentNode.replaceChild(f[a][0], f[a][1]); } for (b in g) { s[l].removeChild(g[b]); } g = {}; f = []; }) } () })(this, document);
古いIEって大変だね。ヾ(・・;)
■その他
- タグは省略できるが、個人的にはチャント書く。
- 場合によっては無くても良いが、個人的に属性値はチャント”で括る。
バリデート
こいつを使う。o(^o^)o
新要素
ほんの一部をピックアップ。
section | 文章のアウトライン |
---|---|
header | セクションのヘッダー |
footer | セクションのフッター |
nav | 外側のセクションに対するナビゲーション |
aside | 外側のセクションに対する補足情報 |
article | セクションみたいな感じで、独立したコンテンツ |
hgroup | h1~h6をまとめる |
menu | コマンドのリスト |
figure | キャプションとセットの要素を埋め込む際に使用 |
video | 動画 |
audio | 音声 |
source | videoやaudioで使う |
canvas | キャンバス |