Category : XHTML/CSS

previous entry Google Ajax Feed API | CSSデザインカタログ next entry

idの命名に迷ったら

Date2007-10-19 Trackback0 Comment0 CategoryXHTML/CSS Tags,

以前こんなエントリーを書きました。

id,class名をどうふるとよいか,しばしば悩みます。いくつかのパターンがあって,そのどれかを使うのですが,明確な基準というものはありませんでした。

XHTML Role 属性モジュール

先日W3Cから,「XHTML Role 属性モジュール」の最終草案が出されました。

部分的に引用してみます。

概要

この仕様で定義される XHTML Role 属性は、作成者が要素に役割を与えるための属性です。機械で抽出可能な意味情報を要素に与えることで、XML を用いた言語に注釈を与えることができるようになります。ユースケースとして、アクセシビリティやデバイスアダプテーション、サーバサイド処理、複雑なデータの説明が挙げられます。(略)

作成者は次に挙げる、標準 role を用いることができます。定義に含まれる慣習的な解釈も参考にしてください。これらの role はユーザーの判断を助けるため、文書の領域を定義することを目的としています。

banner
バナーとは通常、Web ページの上部に現れる広告を示します。バナーの内容として Web サイトや企業のロゴ、またはその他の重要な宣伝要素が含まれます。
contentinfo
文章の内容に関する情報を表します。例えば脚注や著作権の情報、プライバシーに関する説明へのリンクなどが属します。
definition
関連する要素の内容は、用語や概念などの定義を表します。内容の中に dfn 要素 ([XHTMLMOD] にて定義) が存在する場合、その要素は定義される用語を表します。
main
文書内の主要な内容である部分を定義します。
navigation
文書内での誘導や、関連する文書へのリンクをまとめたものを表すのに適します。
note
文書内の主要な内容を表すリソースに対して、その挿入句や補助的な情報などを表します。
search
Web 文書にある検索セクションを表します。通常は Web サイト内の検索や、または一般的な検索サービスに使われる検索フォームを指します。
secondary
文書内にある独自のセクションを表します。ポータルサイトを例に取れば、時計や天気、株価情報などの部分が当てはまります。
seealso
ページの主要な内容に関連する内容を表します。

この「標準role」なら,多くの人が共通して使える命名となります。まちまちに命名されていたものが,ある法則性を持って統一されれば,XHTMLのデータが様々な場面で利用しやすくなるはずです。

文書の領域を定義する

概要のところに「文書の領域を定義することを目的としています」と書かれています。

ページをレイアウトするとき,まず,空間をいくつかの領域に分け,そこにうまく収まるように文書を割り振っていく。という方法をとりがちです。ひとつのブロックの中に,いろいろな内容が脈絡なく混在していることもあります。「ここ,空いてて寂しいから何か入れよう」みたいな...。

アクセシビリティを考えると,脈絡のない情報の混在はあまりよいこととは言えません。まず最初に,文書を組み立てに基づいていくつかの領域に分け,それをページの空間に割り振っていく。というのが望ましいと思います。

role属性は,マークアップする際に文書の領域とその役割を明確にしてくれそうです。

id属性の値として使ってみる

モジュールはXHTML1.1以降でないと使えません。

XHTML1.0,HTML4.01では,次のように,id属性の値として使ってみようと思います。将来,これをrole属性に書き換えることを見越して。

<div id="banner">
  (サイトタイトル・ロゴ / ブログタイトル)
</div>

<div id="main">
  (メインの内容 / エントリ)
</div>

<div id="seealso">
  (関連する内容 / コメント・トラックバック)
</div>

<div id="search">
  (検索)
</div>

<div id="navigation">
  (メニュー)
</div>

<div id="contentinfo">
  (クレジット・連絡先)
</div>

idにどんな名前をつけるか悩んだとき,参考にするとよいかもしれません。

参考

モジュールについては神崎さんが書かれた

が参考になると思います。

Trackback (0)

Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29

Comments (0)

Add Comment

Search

RSS feed

あわせて読みたい

あわせて読みたいブログパーツ

Contact me

  • My status Skype : webmugi

Technorati

Validation

  • Valid XHTML 1.0 Strict
  • Valid CSS!

Top