「第6回 HTML5読書会 in 神戸」に参加してきました。 #html5rdkb

Web Designer Magazine with HTML5 Logo Cover
Creative Commons License photo credit: sethladd

2011年4月23日に、兵庫県立大学大学院応用情報科学研究科にて開催された、「第6回 HTML5読書会 in 神戸」に参加してきました。京都GTUG主催。皆勤賞ではありませんが、数回目の参加です。

読書会の雰囲気

「徹底解説HTML5マークアップガイドブック」を教科書として、セクションごとに参加者が交代で「音読」しながら、教科書の内容に対する理解を深めていく、珍しいタイプ(?)の読書会です。

徹底解説HTML5マークアップガイドブック 徹底解説HTML5マークアップガイドブック
羽田野太巳

秀和システム 2010-02-27
売り上げランキング : 3502

Amazonで詳しく見る by G-Tools

この教科書は、ニュースサイトなどで比較的大きく取り上げられている各種APIに関してではなく、HTML5のマークアップに対して焦点があてられている本です。

講師の村岡さん( @bathtimefish )が、教科書に書かれている内容やその周辺知識を丁寧に掘り下げて解説してくださるので、一人で本を読んで勉強するよりも内容が身につきやすいと思います。参加者のみなさんが疑問に思った部分について、積極的に質問できるような雰囲気になっているのもいい感じ。

今回の内容

今回は、「9.6 h1〜h6要素(見出し)」から「10.5 blockquote要素(ブロック引用)」まで読み進めました。

マルチメディア系のAPIなど、華やかな部分ばかりが注目されがちなHTML5ですが、ページ製作者にとってそれ以上に重要なのがマークアップの変化です。HTML5では、文章の構造や意味をより忠実にマークアップできるように、要素の定義が変更されていたり、新しい要素が追加されていたりします。

h1〜h6要素による文章の階層構造(アウトライン)の形成もそのひとつ。HTML5には、「アウトライン・アルゴリズム」が見出し要素の並び方から文章のアウトラインを判別するための「アウトライン・アルゴリズム」というものが存在します。今回の勉強会では、見出し要素並び方によってアウトラインがどのように変化するのかについて、重点的に時間をかけて説明されていました。

アウトライン・アルゴリズムはとても複雑ですが、以下のようなページのアウトライン構造を解析して表示してくれる便利なサービスもあるようなので、ぜひとも活用していきたいところです。

他にも、新しく追加された要素としてhgroup, header, footer要素、定義が変更された要素としてaddress要素やhr要素などが登場しました。いずれも記述できる場所は意味合いが細かく定義されているのですが、勉強になったのはaddress要素。

address要素の用途は該当ページのウェブ管理者や、記事の著者への連絡先情報に限られるとのこと。例えば、グルメ系ブログなどで、記事で紹介している店舗の住所を情報をかたっぱしからaddress要素でマークアップするのは間違い。これはHTML4でも同様に間違いなのですが、僕自身はっきりわかっていなかったのでとても勉強になりました。

まとめ

HTML5読書会に参加するたびに毎回思うのが、「正しいマークアップの理解に一歩近づけたかも」ということです。

「アウトラインとか、そんなの適当でいいんじゃね?」とか、「とりあえずページに表示されればいいんでしょ?」と思われる方もいるかもしれません。でも、HTMLドキュメントは人間だけではなく、検索ロボットや、目が不自由な方のためのスクリーンリーダーなどのコンピュータソフトウェアからも利用されるものです。そういったソフトウェアが正しく文章構造を把握し、それらを介して情報を得ようとする人達に正確な情報が伝わるようにするためにも、ページ製作者が正しいマークアップを理解して実行することが大事だと思いました。

どこまで完璧にマークアップするのかについては、コストとの折り合いをどこかでつける必要があると思いますが、少なくとも「間違ったマークアップ」をすることはないように、これからもこの読書会に参加してマークアップに関する理解を深めていきたいです!

講師の村岡さん、参加者のみなさま、ありがとうございました & おつかれさまでした!
また次回も参加させていただきます!