hr 要素についておさらいしてみる

2008年8月26日 火曜日

The <hr /> Contest ていうのがあるようで、CSS の background プロパティなどで hr の視覚的に面白くしてみようという企画らしいです。でもどうなんだろうということで、hr 要素のおさらいとしていろいろ考えてみました。

hr 要素の意味

The <hr /> Contest の記事内には

In terms of semantics the tag is supposed to clearly separate content blocks.

という表記があり、hr 要素は文章の区切りを意味するセマンティックなタグという感じに解説されていますが HTML 4.01 の仕様では、

HR要素があると、視覚系ユーザエージェントは罫線をレンダリングする。

罫線とその周囲のコンテンツの間に挿入される垂直方向の空間の分量は、ユーザエージェント依存である。

とし書かれていなく、HTML 4.01 では hr 要素に文章の区切りを意味するという仕様は見当たりません。

さらに XHTML 1.1 では hr 要素は b 要素や i 要素などと同じ Presentation Module に分類されています。もし hr 要素がセマンティックな要素ならば、h1 や div と同じ Text Module か Structural Module に分類される気が…

つまり、現状の hr 要素は文章の切れ目を表すセマンティックな要素ではなく、特に意味がなく、視覚的に罫線を引くだけの要素と理解したほうがよいかもしれないです。

ただし、HTML 5 の Editor’s Draft にはしっかりと

4.4.2 The hr element

Categories

Flow content.

Contexts in which this element may be used:

Where flow content is expected.

Content model:

Empty.

Element-specific attributes:

None.

DOM interface:

Uses HTMLElement.

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

のように明記されており、文脈を区切るためのセマンティックな要素とされています。

また、XHTML 2 の 草案では hr 要素は削除される予定ですが、その代わりに Structural Module (構造モジュール) に separator 要素という文脈を区切るための要素が登場する予定です。

個人的には後方互換性を重視して XHTML 2 でも hr 要素を使いまわせれば良いのになとは思いますが…

hr 要素の見た目

The <hr /> Contest では、CSS を使って hr 要素の見た目を変えて楽しもうという感じですが、これについても考えてみました。

IE では hr 要素の枠線は消すことはできません。(Firefox などでは border : none を指定すれば枠線は消せます)

「また IE か…」と感じるかもしれないのですが、これは IE が悪いわけではないかもしれません。

繰り返しになりますが HTML 4.01 の仕様では、

HR要素があると、視覚系ユーザエージェントは罫線をレンダリングする。

罫線とその周囲のコンテンツの間に挿入される垂直方向の空間の分量は、ユーザエージェント依存である。

のようにあり、ユーザエージェント依存と明記されています。IE で hr 要素の枠が消せないのは仕様に沿っています。

そもそも hr 要素は img 要素や object 要素などと同じ置換要素で、要素自身の内容を別のものに置き換える要素です。

例えば、img 要素は自身の内容を src 属性で指定された画像に置き換えます。object 要素は自身を data 属性で指定された swf などに置き換えます。そして、置き換えられた要素は、現状の CSS では大きさ変更程度しかできません。

hr 要素も同じく、自身を罫線に置き換える要素で、CSS で操作できなくても問題ないんじゃないでしょうか。あと、Safari で input 要素の見た目を変えられないのも同じですね。

まとめ

• 現像の hr 要素は文脈の区切りを意味しないただの線
• 文脈を区切る要素は HTML 5 の hr 要素や、XHTML 2 の separator 要素
• hr 要素の見た目は UA 依存で CSS で操作できなくてもしょうがない