HTML5によるブログのマークアップ

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

現在使われている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>


新しいHTML5でのマークアップ方法

<header>
    <!-- タイトルなどのヘッダー -->
</header>
<nav>
    <!-- ナビゲーション(サイドバー) -->
</nav>
<section id="content">
    <!-- コンテンツ関連の記述(省略) -->
</section>
<footer>
    <!-- フッター -->
</footer>

HTML4からHTML5の変化を図解する


注:左側が今までのHTML4の図解。右側が新しいHTML5の図解

HTML5による個別記事のマークアップ方法

当然、HTML5になると、ブログの個別記事のマークアップ方法も新しいタグを用いてマークアップすることが可能になります。そのために重要になるタグは、<section>タグと<article>タグの2つです。sectionタグは、一般的な文書やアプリケーションの領域を表しています。このsectionタグ1つは、ある文書やあるアプリケーションに対して1つを割り当てるようになります。また、articleタグは、文書やサイト、ページ内の独立した形の複合体の1つ1つを表します。具体的には、ブログのエントリーや、雑誌・新聞の記事、ユーザの各コメントなどです。

ブログ記事の構成要素

ブログ記事のマークアップ方法の前に、ブログ記事がどのような要素で構成されているのかを確認します。

本ブログを例にしても、ほかのブログなどを見てみても、ほとんどのブログ記事は以下の要素から構成されています。

  • ブログのタイトル(見出し)
  • 投稿日時
  • ブログ記事本文
  • フッター(メタデータを含む)
  • コメント

HTML5ではこれらを区別してマークアップします。具体的には以下の
ような形でマークアップします。

ここでも、headerタグやfooterタグ, navタグが活用されています。また各ブログのエントリーを構成するarticleタグの内部に、コメントを記述するためにarticleタグを入れ子状にして記述することにも注意しておくといいでしょう。

まとめ

ブログは通常のサイトに比べてHTML5への移行が早いと思われます。理由としては、大手ブログ運営サイト(例:アメブロやYahooブログ、ココログなど)の提供するブログは、運営サイト側でテンプレートを修正するだけで移行が完了する点があります。また、WordPressやMovableTypeに代表されるサーバー・インストール型のブログを利用している方は、多くがこのような情報には敏感に思われるので、適切な段階でHTML5に移行するのではないかと思います。(重要なことはブラウザ側の対応でしょうか?)移行のタイミングがいつであったとしても、必ずその時期はやってきます。早い時期からHTML5を用いた適切なマークアップを勉強してみてはいかがでしょうか?

参考サイト

関連記事

人気ブログランキングへ

[PR]

トラックバック

http://yamablo.com/2010/01/07-001358.php/trackback

コメント