構造と見栄え

構造と見栄えの分離って良く言われるけど、なんでもかんでも text-indent +背景画像などの置換テクニックを使えば良いって訳ではないなと思ってみたり。当該部分に img 要素で画像を使うのか、もしくは text-indent +背景画像で見せるのか。例えば、企業であれば企業ロゴがある訳で、ではサイトのトップに img 要素で画像をリンクするのが妥当なのかどうか考えてみる。

img 要素とは

そもそも 仕様書では img 要素について下記の様に記述されています。

The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content

img 要素に内容は無く、当該部分に画像を埋め込むための要素であると定義されています。

どう言った意味付けをするのか

企業ロゴってのは、言わばその会社を表すサインな訳です。果たしてその企業ロゴは、見栄えなのか否か。当該部分にどう言った意味付けでマークアップするかによって見解が変わるのだろう。

まず一つは、企業名を表すと言う意味でのマークアップ。テキストで企業名をマークアップし、テキスト置換テクニックで企業ロゴを背景に使えば、構造としては正しいのではと思う。この場合は、企業ロゴの画像は正に見栄えのためだと判断できる。

もう一つは、それが企業ロゴであることを示すと言う意味でのマークアップ。構造としてそれをテキストで記述するってのは、むしろ違くね?ってなる。画像を使う方が目的としては正しい訳だ。そう言った意味では、alt 属性に記述する代替テキストとして、何が相応しいのかが問題になってくる。alt 属性に企業名を記述したとすると、意味付けが変わってしまう。どちらかというと、「企業ロゴ」のような代替テキストが理に適っているように思う。

どう言った意識で実際にマークアップするのか、そこにどういった意味付けをしたいのかによって、テキスト置換テクニックを使うのか、img 要素を使うのかを選択すれば良いのだろう。構造内に於いて、テキストと画像は等価であって、目的に合わせた使い方であれあば何も問題ないって事ですね。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/206

Comments