掲載当初の"クォート"、"div要素"、"aside要素"の説明に、誤りおよび正確さを欠いた表現がありましたので、該当個所を訂正させていただきました。ご迷惑をおかけしました読者の皆様ならびに関係者様には深くお詫び申し上げます。

secretGeek

HTML5の仕様策定がある程度進んできたこと、IEを除く最新のブラウザがHTML5機能の実装を順次はじめたこと、MicrosoftのチームがHTML5の策定に積極的に参加をはじめたこと、Webアプリケーション開発者やWebデザイナの関心が高まってきたことなどを受け、HTML5の新機能を紹介したり、HTML4とHTML5の違いを紹介する記事やブログが増えている。

そうした紹介記事のひとつに、secretGeekに掲載されたHTML5, a 3 minute guideがある。HTML5の新機能を紹介する記事では、HTML5が生まれる経緯を簡単に説明したあとで、新しく追加される要素について紹介するスタイルをとることが多いが、この記事では従来の記述例をHTML5にしたらどうなるかという違いを視覚的に示したあとで、その違いを説明している。

HTML5, a 3 minute guideではHTML5について解説した文書としてMark Pilgrim氏のDive Into HTML5を紹介。特にHTML5の主要な要素を紹介した第3章のWhat Does It All Mean?を読むに値するものだとコメントしているものの、40ページほどあるため忙しい人がチェックするには長すぎるとしている。

そこで、HTML5, a 3 minute guideではWhat Does It All Mean?に掲載されているサンプルの差分をまとめて紹介している。SourceGear DiffMergeを使って違いをグラフィカルに表示しており、HTML5で実際にどのように記述方法が変わるのかが視覚的に説明されている。

既存のHTMLとHTML5との記述比較例その1 - secretGeek, HTML5, a 3 minute guideより抜粋	既存のHTMLとHTML5との記述比較例その2 - secretGeek, HTML5, a 3 minute guideより抜粋

従来の記述方法と比べてHTML5では表記すべき項目が簡略化されていること、省略表記が使われていること、新しい要素を使って記述が構造化されすっきりしていることなのどを確認できる。HTML5, a 3 minute guideではこの比較の内容を簡単に次のようにまとめている。

• すべての属性値をクォートで囲う必要はなくなった。例えば、スペースが入っておらず、英字だけで構成された属性値などには、クォートを省略できる
• 冗長な状況ではタグを閉じる必要はない
• 従来はdiv要素で代用されていた部分に使える論理的な意味をもつ要素が新しく用意された
  • header要素 (以前は<div id='header'>のように記述していた部分)
  • hgroup要素 (サブセクションを作る必要がない部分でのヘッダをグルーピングする指定)
  • nav要素 (以前は<div id='navigation'>のように記述していた部分)
  • article要素 (以前は<div id='content'>のように記述していた部分。それ単体で独立してまとまった文章を意味している)
  • aside要素 (Pull quoteなど、本文から逸れたテキストであることを意味する)
  • time要素 (プログラム的に処理できる時間データを属性で指定)
  • footer要素 (以前は<div id='footer'>のように記述していた部分)