■準備
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 | キャンバス |