おそらくはそれさえも平凡な日々

<br />を使ったマークアップ

Q「質問質問質問」<br />
A「回答回答回答」

前回私がやったマークアップですが、これは単に改行しただけです。

現実的なマークアップ

html

<p class="dialogue">
  <span class="utterance">Q「質問質問質問」</span>
  <span class="utterance">A「回答回答回答」</span>
</p>

CSS

.dialog span.utterance:after{
  content: "\A";
}

ただ、上記CSSだとIEなどでafter擬似クラスを解しないUAでは改行してくれないので、以下のような指定をすることになるのでしょうか。

.dialog span.utterance{
  display: block;
}

ただ、見た目改行させるためだけに、インライン要素をブロック要素にしてしまうってのは、やりすぎな感じがする。<p>タグの中に、ブロック要素を格納することになるわけだしね。それだったら素直に<br />を使えばよい気もするよ。

やりすぎなマークアップ

html

<p class="dialogue">
  <span class="utterance"><span class="speaker"><abbr title="Question">A</abbr></span><span class="voice">質問質問質問</span></span>
  <span class="utterance"><span class="speaker"><abbr title="Answer">A</abbr></span><span class="voice">回答回答回答</span></span>
</p>

CSS

.dialog span.voice:before{
  content: "「";
}
.dialog span.voice:after{
  content: "」";
}
.dialog span.utterance:after{
  content: "\A";
}

これは流石に冗長か。ちなみに、会話文の中にさらに段落や改行、二重かぎカッコでくくる要素が出てくる場合は、更に<span>でネストするのかね。うげ。

結局何が言いたいかと言うと

思うに、どうマークアップすべきかなんて、Web上で文書を公開する手段でしかないhtmlに縛られている状態は滑稽である。特に余りにも「正しい」htmlを書くことにこだわりすぎて、マークアップのためにマークアップする状態に陥ることは愚かである。もちろん、文法的に誤りの無いhtmlが書けることは必要だが。

とか言ってしまうと、身もふたもないが、結局、何のためにマークアップするのかをはっきりさせれば、自ずからどのようにマークアップすれば良いかが分かるのです。私は勿論そうなっていないが、そうなることが理想なのかな。

つまり、会話文を上に挙げた例のようにマークアップしたとして、単に見た目の改行以上の意味を持たせなくて良いと思うのなら、<br>で区切ってしまって良いのです。

ただ、細かくマークアップしておくと後々便利なことがあります。上記の会話文の例だと、たとえば、ある文章の中で、

• 何回、会話文が出てきたか
• 会話文が占める割合はどれくらいか
• とある人間がどれくらい、どれくらいの長さ発言したか

などを、DOMを使ってすばやく調べることが出来ます。そういったxhtml文書の特性をどのくらい活かしたいかによって、どのようにマークアップするかを決めればよいのではないでしょうか。