第7回HTML5読書会 トピックメモ
- 投稿日
- 作成者
2011年6月18日（土）に開催された「第7回HTML5読書会」に参加しました。HTML5-WEST.JPの村岡正和氏が主催されている会で、第一回目に参加してから全く参加できず、久しぶりの参加となりました。
羽田野太巳氏の「徹底解説HTML5マークアップガイドブック」をひたすら音読で読み進める会なのですが、それぞれの項目を深く掘り下げていくので、新しいタグ・既存のタグ問わず、理解が深まります。
HTML5になると、タグの種類だけではなく、タグを使用する意味や使用するための細かい規定など、より正しいマークアップの知識が必要になります。
既存のタグでも微妙に意味が変わっているものもあり、驚かされます。
今回の読書会で気になったトピックをメモしておきます。
場所はポートアイランドにある兵庫県立大学大学院応用情報科学研究科
ol要素
お馴染みの順序付きリストですが、降順・昇順を表すreversed属性や最初の項目の順番を表すstart属性があることは知りませんでした。
アジア圏では漢数字をどのように対応するかで議論があるようです。
例えばマイナスの表現はどうするのかという議論で、
- 単純に「-」をつける（-一、-二・・・）←微妙
- 「負」をつける（負一、負二・・・）←き・・・気持ちは分かるw
- 会計っぽく「△」（△一、△二・・・）←おさまりはいいけど馴染まない
村岡氏はこの中なら△かなという感想でした。そもそも漢数字にマイナス表記が必要なのでしょうか。
あとは、どこまで単位を持たせるのかという議論もあったそうです。
京まで持たせると「一二三京四五六七億八九一二万三四五六」とかになってしまいます。
冗談のような真面目な議論です。（9999で落ち着きそうな雰囲気らしいですが。）
disブログで紹介した「tategumi.js」は京の単位まで計算できるそうです。やっぱりこれすげー。
ul要素
こちらもお馴染みです。項目の順序を入れ替えても意味が通る場合はulを使用します。
グローバルナビゲーションで良く使用しますが、ナビゲーションの並び順に優先性が発生する場合はolでコーディングすることも念頭に入れる必要があるようです。
li要素
真新しい情報はなかったのですが、Webアプリケーション用のナビゲーションに使用するmenu要素でも使用されます。あとはol要素で使用する際には、value属性を使って数字をコントロールできます。
CSS3「counter-style」について
リスト周りの話から、CSS3で策定が進んでいる「counter-style」の話が出ました。
@counter-styleというルールを使って、リストマークとして使用する記号や画像を指定することができるようになるかもしれません。
http://www.w3.org/TR/css3-lists/#counter-style
終了タグについて
HTML5では「li」や「option」など要素によっては終了タグを省略することが許されています。
閉じるか閉じないかは制作者の好みの問題になってくるようですが、同一サイト内ではルールを統一する方が良さそうです。共同でプロジェクトにあたる場合は、マークアップの仕様を共有しておくことが必要ですね。
dl要素 dt要素 dd要素
これまで「定義リスト」として使用されていたdl要素は「記述リスト」となっています。
対応付けられた「dt」「dd」を使用しないといけません。用語定義に使用する場合は、dt要素内でdfn要素を使ってマークアップします。
定義リストよりも使用範囲が広がった印象があります。
figure要素 figucaption要素
キャプション付の図画を表す際に図画をfigure要素で括ります。図画のキャプションはfigucaption要素でマークアップします。図画の代わりに画像やコードなども表現できます。
本の中で紹介されていたマークアップ例で使用されていたaltコンテンツ属性についてとてもおもしろい議論がありました。これに関しては、disブログで別途触れたいと思っています。
div要素
一般的なコンテナを表す要素です。今も頻繁に使用されています。
HTML5になり、article要素やsection要素などをdivの代替として使用する例がありますが、これは誤った考え方だそうです。
article要素やsection要素は文章のアウトラインをとるための要素なので、それ以外の場所で使用することができません。何でもsection要素で囲めばいいという訳ではないのです。
なのでdiv要素はこれからもガンガン使われることになるでしょう。
ここでもやはり要素を理解していないことで誤った使用をしないことが肝心です。
a要素
a要素はこれまで、インラインのみで使用されてきましたが、HTML5ではブロックをハイパーリンクにすることができるようになります。極端な話、コンテンツ全体をリンクすることもできるということですね。
また、ping属性など固有のコンテンツ属性が増えています。特にクリック計測などで活用できるping属性はめちゃくちゃ便利です。実際のリンクとは別にpingを受け取るためのURLを指定できます。（残念ながら実装されているブラウザがなさそうですが。）
href属性を指定しないa要素が認められている点は注目です。
グローバルナビゲーションなどで、該当ページにいるときにリンクを設定しない場合は、これまではa要素自体を外していました。
HTML5ではa要素は残し、href属性を設定しないということが可能になります。セマンティクス上、より正しい表現になるからなのだと思います。
target属性で独自の名前が設定できることは知りませんでした。勉強不足。。。
以上、内容を簡単に纏めました。改めて纏めてみると結構重要なことが何気なく散りばめられてますね。次回以降も楽しみです。
