HTML5を意識したマークアップ
最近はHTML5にわくわくしてます。
とりあえずDOCTYPEがすごく好き。
<!DOCTYPE html>
ワオ!シンプル!IE6から標準になるので、もはやDOCTYPEはこれで良いんじゃないかと思ってきた。
あとは仕様的な部分でタグが増えました。
- header
- footer
- nav
- section
- article
このあたりは構造に関するタグなので現状のHTMLにとりいれたい。
ただ、まだ色々なブラウザで非対応のタグだったりするのでXHTMLの仕様に準拠させておくのがベターかと。
そこで以下のようなコーディングにしようかなと。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
</head>
<body>
<div id="gHeader" class="header">
<h1 class="siteTitle">タイトル</h1>
</div><!-- / #gHeader -->
<div id="content" class="article">
<div class="section">
<ol id="entries">
<li class="entry">
<h2 class="title">エントリータイトル</h2>
<div class="date>2009.06.25</div>
<div class="body">本文</div>
</li>
</ol>
</div>
</div><!-- / #content -->
<div id="menu" class="nav">
<ul>
<li>list</li>
</ul>
</div><!-- / #menu -->
<div id="gFooter" class="footer">
<address>COPYRIGHT © HOKYPOKY.</address>
</div><!-- / #gFooter -->
</body>
</html>
まだ色々考え中なんだけど、divにクラスにいれてHTML5タグの代わりとする。
要は.head, .header, .topなどクラス名がレギュレーションとしてまちまちになりがちな部分をHTML5を意識して名前をつけていくと後々便利かな。なんて。
動画はボクの好きなデンマークのバンドMewの新曲。

