2006-12-05

dd/li要素と段落

dd/li要素内とかに段落らしき文字列があってもp要素でマークアップしない人が多過ぎると思う。

dd要素の場合、段落一つをdd要素でマークアップして其れを並べる事が多いが、其れは本当にdd要素で良いのだろうか、そういう書き方をしている人達には少し考えて欲しい。

[引用: 2006年11月の日記: dd/li要素と段落 -- pi8027のウェブサイト より]

一般的に用いらている [XHTMLMOD] 定義で構築されたXHTMLファミリ文書や旧来の [HTML401] などにて定義されているdd/li両要素ともに、文書型宣言(DTD)における両要素の要素型宣言(<!ELEMENT)では、内容モデルはパラメータ実体%flow;ということになっています。ちなみに、XHTML1.1厳密型のスキーマでは、xs:extension要素のxs:base属性値がFlowです。

文書型宣言における%flow;とは、ブロックレベル要素(%block;)とインライン要素(%inline;)の全てを含みます。つまり、dd/li両要素の内容は、次の例の様にインライン要素(p要素で段落を示さない内容)であっても良いのです。

<dl>
  <dt>定義リスト</dt>
  <dd>定義リストは、他の形式のリストとは少しだけ異なり、<em>リスト項目が
<dfn>用語</dfn>と<dfn>記述</dfn>という2つの部分から構成される</em>。
用語は<code>dt</code>要素で示され、行内内容に制限される。
記述は、ブロックレベル内容を取る<code>dd</code>要素で示される。</dd>
</dl>

%flow;とは、概ね木構造によってブロックレベル要素かインライン要素のどちらかを内容とします。

次の例を見て下さい。

<dl>
  <dt>定義リスト</dt>
  <dd>定義リストは、他の形式のリストとは少しだけ異なり、<em>リスト項目が
<dfn>用語</dfn>と<dfn>記述</dfn>という2つの部分から構成される</em>。
    <ol>
      <li>用語は<code>dt</code>要素で示され、行内内容に制限される。</li>
      <li>記述は、ブロックレベル内容を取る<code>dd</code>要素で示される。</li>
    </ol>
  </dd>
</dl>

上記例の様に、ブロックレベル要素とインライン要素が混同する構造は、マーク付けとして不適切だと思われる。文書型定義の内容では混同が認められていても、はたまた検証サービスを通過したとしても、果たしてそれはそれを意図して設計されたものなのだろうか?即ち、dd/li両要素に限らずdiv要素やobject要素などでも%flow;という内容モデルには注意を払う必要性がありそうだ。

上記例は、適切には、次の様にマーク付けを行わなければならないことだろう。

<dl>
  <dt>定義リスト</dt>
  <dd>
    <p>定義リストは、他の形式のリストとは少しだけ異なり、<em>リスト項目が
      <dfn>用語</dfn>と<dfn>記述</dfn>という2つの部分から構成される</em>。</p>
    <ol>
      <li>用語は<code>dt</code>要素で示され、行内内容に制限される。</li>
      <li>記述は、ブロックレベル内容を取る<code>dd</code>要素で示される。</li>
    </ol>
  </dd>
</dl>

では次に、段落一つをdd要素でマークアップして其れを並べる事が多いが、其れは本当にdd要素で良いのだろうか [引用: 2006年11月の日記: dd/li要素と段落 -- pi8027のウェブサイト より] という事について考えてみよう。・・・って、なんだか講座じみてきたぞ・・・。

例えば、これまで何度か用いた例は、次の様にも表すことができるだろう。

<dl>
  <dt>定義リスト</dt>
  <dd>定義リストは、他の形式のリストとは少しだけ異なり、<em>リスト項目が
<dfn>用語</dfn>と<dfn>記述</dfn>という2つの部分から構成される</em>。</dd>
  <dd>
    <ol>
      <li>用語は<code>dt</code>要素で示され、行内内容に制限される。</li>
      <li>記述は、ブロックレベル内容を取る<code>dd</code>要素で示される。</li>
    </ol>
  </dd>
</dl>

上記例では、dt要素で「定義リスト」という用語を提示し、dd要素の1つ目がその説明、2つ目がその構成要素についてを説明している。例えば、並列するdd要素にclass属性を付与する時、その属性値は、1つ目はdescription、2つ目はstructureとでもすると良いだろう。

例えが悪くてわかり辛いかも知れないので、更に、W3Cによる各仕様の定義リストについての項目で度々用いられている例を用いて解説しよう。

<dl>
   <dt>Center</dt>
   <dt>Centre</dt>
   <dd> A point equidistant from all points
              on the surface of a sphere.</dd>
   <dd> In some field sports, the player who
              holds the middle position on the field, court,
              or forward line.</dd>
</dl>
        

[引用: 11. XHTML List Module: 11.1. Definition lists: the dl , di , dt , and dd elements -- XHTML 2.0 より]

CenterCentre(英)という綴りの単語には、2つの意味がある。これをマーク付けで表現すると、用語をdt要素で、記述(用語の解説)をdd要素でマーク付けできる。この時、単語には2つの意味があるので、dd要素を並列(それぞれをdd要素で包括)できる。

分って頂けない方は、次の例を見て頂けると、直感的に理解が容易なことだろう。なんて投げやりな・・・。

<用語集>
  <用語>センター</用語>
  <意味>球体において、表面のあらゆる点から等距離にある点。</意味>
  <意味>フィールド競技で、フィールドの中央、コートの中程、
フォワードの中心等に位置するプレイヤー。</意味>
</用語集>

ところで、定義リストは仕様の解説にもあるように様々なマーク付けに応用でます。例えば、dt要素が話者を示し、dd要素が話の内容を示す対話マーク付けなどです。私が思うには、dd要素の並列に関する誤用は、この応用利用の時に多くは生じている(見受けられる)のではないでしょうか?

並列するdd要素は、各dd要素がdt要素に対する内容でなければならない。つまり、ひとつのdd要素で包括すべき内容である場合、ただ単に段落要素を省略することが目的の並列マーク付けとでは、構造上の意味合いが全く違ってくることだろう。安易な考えでdd要素を並列して用いるのは誤用の疑いが強いと肝に銘ずるべきである。つまりそれは、所謂、表レイアウトと呼ばれる類のもの(言わば、悪風、悪疫なマーク付け)と同様に注意を払う必要があるということである。

序でになるが、WAIの指針では、要素の内容がimg要素だけであってはならない(同等の役割を果たすテキストが必要)としているので、これも併せて覚えておいて欲しい。

最後に、ひとつ忘れていたことを付け加える。一番最初の例は、下記例と同等のマーク付けである。

<p><dfn>定義リスト</dfn>は、他の形式のリストとは少しだけ異なり、<em>リスト項目が
<dfn>用語</dfn>と<dfn>記述</dfn>という2つの部分から構成される</em>。
用語は<code>dt</code>要素で示され、行内内容に制限される。
記述は、ブロックレベル内容を取る<code>dd</code>要素で示される。</p>