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

2011年6月18日、神戸の兵庫県立大学大学院応用情報科学研究科で開催された「第7回 HTML5読書会 in 神戸」に参加してきました。すっかりリピーターになりました。

以下の教科書を参加者が順番に音読し、補足情報や関連情報の解説してもらったり、質問や疑問をぶつけたりすることができるタイプの読書会です。

羽田野太巳
秀和システム
発売日:2010-02-27

講師は@bathtimefish さん。今回は、p.186「10.6 ol要素(順序付きリスト)」からp.223「11.1 a要素(ハイパーリンク)」まで読み進めることが出来ました。

それでは今回の読書会の内容を簡単にまとめてみようと思います。

内容まとめ

印象にのこっている部分だけピックアップしますね。

10.6 ol要素(順序付きリスト)

「順序に意味を持つリスト」表すときに使うol要素についての解説。

HTML5では、数字の順番を降順にする新属性「reversedコンテンツ属性」が追加されました。これにより、降順のリストを表す目的で、全てのli要素のvalue属性に対して個別に値をセットする必要がなくなりました。

関連情報としては、「CSS3 Lists」という仕様が取り上げられていました。この仕様はリストのスタイルを指定するもので、利用することで例えば順序の表記を漢数字で表すことも可能になるようです。

ol要素では「負」の順番を表すこともできるのですが、漢数字の場合に負の数をどう表すかについて仕様策定グループで議論が起こった、ということについても紹介がありました。うーん、難しいですね。

10.9 dl要素(記述リスト)

「名前と値がセットになったリスト」を表すときに使うdl要素の解説。

HTML4では「定義リスト」を表す要素でしたが、微妙に変化があったようです。より用途が汎用的になったイメージ。連想配列のような使い方を想定しているのではないか、という意見もありました。

ちなみに、従来の定義リストを表す場合は、dfn要素を使って以下のようにマークアップすればいいみたい。

10.10 dt要素(用語)

dl要素の中で「用語の説明」を表すときに使われるdd要素の解説。

“該当のdd要素の次に別のdt要素またはdd要素が続く場合、または、該当のdd要素が、その親要素の最後の子要素となる場合に、省略することが出来ます”という記述に関して質問がありました。

dd要素では、終了タグが省略されても文書構造が一意に決まるような場合は終了タグを省略してもよい事になっています。これは、li要素やdt要素、option要素にも同じことが言えます。なので以下は正しいマークアップということになります。

XHTMLでは終了タグの省略は許されていませんが、より昔のHTMLでは省略してもよかったそうです。

講師の村岡さんがHTML5についての活動を始められた頃、「省略したほうがいいんですか?」のような質問が出てきたことがあったみたい。結論から言うと「どちらでもいい、ただしひとつのソースに二種類の書き方が混在しなければ」とのこと。ただ、option要素の終了タグが省略されていると違和感を感じる人が多い、という意見もありました。

10.12 figure要素(キャプション付き図画)【新要素】

「キャプション付き図画」を表すfigure要素と、figure要素の中で「コンテンツのキャプションや説明」を表すfigcaption要素に関する解説。どちらもHTML5で追加された新要素です。

「img要素のalt属性」と「figcaption要素」にそれぞれどのような情報を含めるべきかという、非常に興味深い議論が行われました。

例えば、ある農園のWebサイトがあったとして、ページ内にリンゴが実った木の写真(img要素)とそれに対するキャプション(figcaption要素)が含まれていたとします。

このような場合、以下のようにマークアップすることで、音声ブラウザがページの内容をより正確に読み上げることができるようになるとのこと。「alt属性には画像が描写している内容をきちんと言葉で表したものを含める」というのが、マークアップするときのひとつの判断基準になりそうです。

「じゃあゴッホの自画像のような絵画や、シュールすぎる絵などのalt属性はどうすればいいんだろう」という疑問がわきますが、わからないときは空白にしておくというのもひとつの手であるとのこと。「写真の内容を文章化する」という今までとは違ったスキルがマークアップに必要になってきそうですね。

10.14 div要素(一般的なコンテナ)

セマンティクス上区別したい領域やグルーピングのために使用するdiv要素についての解説。

「HTML5が普及することでdiv要素を使わなくてもよくなる」という声をところどころで聞くことができるようですが、それは完全に間違いであるとのことでした。

例えばsection要素はアウトライン・アルゴリズムによって章や節を形成してしまうため、div要素を何でもかんでもsection要素に変えてしまうと、ページの文章構造がぐちゃぐちゃになってしまいます。実際にそういうことをしているサイトもあるみたい(どきっ)。

なので、divはこれからも無くならないし、必要なところでは遠慮無く使っていきましょう、ということになりそうです。

11.1 a要素

ハイパーリンクを表すa要素についての解説。

今まではページ内アンカーとしてa要素のname属性を使ってきましたが、HTML5では各要素のid属性をアンカーとして使うようになりました。また、href属性がないa要素がプレースホルダーリンクを表すようになりました。

例えば、ナビゲーションメニューなどで「閲覧中ページへのリンクを外しておく」といったことがよく行われますが、プレースホルダーリンクを使うことで以下のようにマークアップできるようになります。

このようにマークアップすることで、「プロフィール」という項目がリンクを想定して用紙されたコンテンツであるということを、明示的に表現することができます。

まとめ

今回の読書会も、HTML5のマークアップを正しく理解する上で非常に役に立つ内容でした。参加を重ねていくにつれて、HTML5で一番キャッチアップしておかなければいけない部分は「マークアップ」である、という気持ちが強くなってきますね。

次回もきっと素晴らしい読書会になること間違いなしだと思うので、今から楽しみにしておこうと思います。
それでは!