html5でマークアップするときの最小設定
wrote2011.10.17
1ファイルにまとめると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
section{display:block;}
</style>
<script type="text/javascript">
(function(){
if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');
for(var i=0;i<e.length;i++){document.createElement(e[i]);}
})();
</script>
</head>
<body>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
section{display:block;}
</style>
<script type="text/javascript">
(function(){
if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');
for(var i=0;i<e.length;i++){document.createElement(e[i]);}
})();
</script>
</head>
<body>
</body>
</html>
html
- html5は、xhtml1とhtml4から派生してできたので、書式はどちらでも可（例：<img /> でも <img> でもよい）。
（管理上どちらかに統一すべき。個人的にはxhtmlに慣れているので、特別な理由がない限りxhtmlの書式で書いていくかな。 - styleやscriptのtype属性も、html5では、CSS、JavaScriptであれば不要。
ただ、念のため指定しておく。
CSS
- html5で追加されたタグは、display、margin、paddingの設定をする。
とりあえず、sectionしか指定していないが、html5の要素を使う場合は、都度。
※ブラウザによって、インラインレベル要素として認識するため。
※ブラウザによって、デフォルトmargin, paddingが設定されるため。
※html5では、inline、blockの概念がなくなったため、aタグ要素の中に pタグ要素 という書き方もvalid。
JavaScript
- ゆくゆくは不要となるだろうが、現時点でクロスブラウザ対応させるためのJavaScript。
※タグ要素にCSSを充てても有効にならない場合、ここにそのタグ要素があるか確認するといいかも。
参考：http://remysharp.com/2009/01/07/html5-enabling-script/
CSSとJavaScirptを外部化すれば
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="xxx.css" />
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="xxx.css" />
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>
※外部CSSとJSは省略
DOCTYPE宣言とか書く必要もなくなり、かなりすっきり！
上記を踏まえれば、すべてのブラウザで、html5で追加された要素を使ってマークアップすることができる。
ここに関しては、ターゲットブラウザをしっかり確認して、そのブラウザ内での動作検証はしっかりする必要がある。またプログレッシブ・エンハンスメントの適用に同意をもらうことも大事ですね。
ただ、プログレッシブ・エンハンスメントの適用の同意は、角丸を例に、表示速度と閲覧機会損失が比例することを説明することで得やすいのではないでしょうか。