HTML5によるブログのマークアップ
木曜日, 1月 7th, 2010現在使われているWEBのマークアップ言語HTMLの新バージョン5の仕様がいろいろなところで公開されています。このHTML5では、今までのバージョン4と比べ、非常に多くのタグを利用可能になっております。これらのHTML5で新しく使えるようになったタグの多くは、セマンティック・ウェブの実現、インタラクティブなウェブページの開発を容易にすることに目を向けたタグになっています。では、このHTML5を使った場合、ブログはどのようにマークアップするべきなのかについて、書いてみようと思います。
なお、当記事は、<html>5 doctor::Designing a blog with html5の記事を、自分なりに和訳して理解したものを書いています。場合によっては和訳が間違っており、正しくないことを書いてしまっている場合もあります。もし、おかしな点などございましたら、上記サイトから、該当箇所を確認していただくか、コメント欄やtwitter(@1987yama3)までご連絡いただけたらと思います。
全体的なマークアップ方法
ここで書くことは、ブログのみに適用できることではなく、ブログ以外の一般サイトにも適用させることができる内容となっています。/p>
まず、HTML5では、<header>タグや<nav>タグ、<footer>タグが利用可能になっています。これらのタグはそれぞれヘッダー、ナビゲーション、フッターを表します。今までは、それぞれを<div id=”header”>, <div id=”navigation”> , <div id=”footer”>などのように記述することが多かったのですが、HTML5では新しいタグを用いることによって、それぞれ<header>, <nav>, <footer>タグによって行います。
次のソースは具体的な例になります。
今までのマークアップ方法
<div id="header">
<!-- タイトルなどのヘッダー -->
</div>
<div id="navigation">
<!-- ナビゲーション（サイドバー） -->
</div>
<div id="content">
<!-- コンテンツ関連の記述（省略） -->
</div>
<div id="footer">
<!-- フッター -->
</div>
