CSS Nite LP 9, HTML5 マークアップのセッションの資料と補足など

2010年4月18日 日曜日

2010 年 4 月 17 日に開催された CSS Nite LP9 の HTML5 マークアップのセッションに登壇いたしました。当日使用した一部の資料を以下に公開し、あわせて補足などをまとめました。

• サンプルサイト (XHTML1.0)
• サンプルサイト (HTML5 に書き換えた後)

おさらいと補足

HTML5 では従来の XHTML1.0 で存在した要素型に加え、28 の新しい要素型が増える予定です。また、いくつかの既存の要素型は意味がかわります。

セクション関連の要素

セクショニング系の要素型として、section, article, aside, nav が新たに登場予定です。これらの要素型を利用することで、HTML の構造をより明確にすることができます。セクショニング系の要素型は基本的に見出しの影響範囲を包含するように利用します。

例えば、今回利用したサンプルのページでは、

• body : なぞの野菜市場
  • nav : (見出しなし)
  • article : 取り扱う野菜について
    • section : 生産者について
      • aside : (見出しなし)
    • section : 農場について
  • nav : 商品一覧
  • aside : (見出しなし)

のような、章の入れ子構造と、役割を取得できます。この仕組みはアウトラインと呼ばれ、HTML5 の 4.4.11.1 Creating an outline に明記されています。nav : (見出しなし) の箇所のように、アウトラインに出現させるために見出しがないブロックをセクションとしてマークアップすることもできます。

HTML5 が安定した規格となり広く利用されるようになれば、検索エンジンや支援技術 (アクセシビリティ用の機器など)、や Web サービスなどが Web ページから取得できるアウトラインを有効に利用するかもしれません。

time 要素型

time 要素型は特定の日時をの日付や時刻を正確に示すための要素型です。CSS Nite LP では

<time datetime="1957-12-24">18歳の誕生日</time>

のように例を紹介しましたが、時間までを正確に示すこともできます。例えば

<time datetime="2010-04-17T06:30:00+09:00">昨日の6時半</time>

のように記述します。属性値末尾の +09:00 は日本のタイムゾーン (世界時からの時差) です。

また、記事の投稿日を意味する pubdate 属性をあわせて指定することもでき、その場合は

<time datetime="2010-04-17T06:30:00+09:00" pubdate="pubdate">2010月4月17日</time>

のよう記述します。これにより記事がどれくらい古いのかがわかるので、Web から 2010 年 4 月以降に投稿されたドキュメントを検索、などといったことができるようになるかもしれません。

video 要素型

video 要素型は動画を埋め込むことができる要素型です。羽田野さんのセッションでも紹介されていましたが、以下のようにブラウザーによってサポートしている形式が違います。そのため、今回ご紹介した作例のように複数のリソースを参照します。

<video width="320" height="240" controls="controls">
<source src="images/video_01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt
<source src="images/video_01.ogg" type='video/ogg; codecs="theora, vorbis"' />
<p>畑の様子。冬なので作物は少なめ</p>
</video>

各ブラウザーがサポートする形式は以下のとおりです。

動画形式としては、MP4 などの H.264 が一般的ですが、H.264 は Apple や Microsoft など、一部の企業のみがライセンスを持つコーデックです(AVC/H.264 Licensors)。H.264 について、現在は無料で利用することができますが将来的にどうなるかは不明なため、Mozilla や Opera はオープンなライセンスの Theora のみをサポートしています。最近では Google が VP8 というコーデックをオープンソース化しましたする計画のようです。。各ブラウザーによる対応コーデックに関しては今後まだ変化してきそうなので、その動向には敏感になっておくとよさそうです。

なお、MP4 などの形式から Ogg Theora に変換する対応にはシンプルな MiniCoder や多機能な SUPER c が便利です。

最後に

CSS Nite LP 9 でのご清聴、ありがとうございました。

導入編のような位置づけだったために、あまり深い内容にならず、深く掘り下げた情報を期待していた参加者さんには満足いただけないであろう内容となってしまいましたが、今後別の機会やこのブログにもうすこし濃い情報 (たぶん SVG ばかりですが…) をまとめていきたいと思います。