yellowmikan’s diary

気になったこと、いろいろ自由に書いてます

会話・対話をHTMLで正しく表す方法

問題発生:Lineの会話をHTMLで表したい

以下のようなLineとかの対話を、セマンティックにHTMLで表したい。

女:こんにちわ♪
犬:こんにちワン
女:ありがとう♪
兎:ありがとウサギ

どう表すのが文法的に正しいのだろう。

対応検討

解決案1:定義リストを使う

定義リストは、定義以外にも使っても良いとされているので、それを活用する。以下のような感じ。まあまあ良さげ。

<dl>
<dt></dt><dd>こんにちわ♪</dd>
<dt></dt><dd>こんにちワン</dd>
<dt></dt><dd>ありがとう♪</dd>
<dt></dt><dd>ありがとウサギ</dd>
</dl>
参考

解決案2:表にする

まあまあ?ウェブ業界にはテーブルレイアウトの黒歴史があるので、極力テーブルは使いたくないなぁ。一応、コメント化している部分があると考えればセマンティック?

<tbody>
<!--
<tr><th>話者</th><th>発言内容</th></tr>
-->
<tr><th></th><td>こんにちわ♪</td></tr>
<tr><th></th><td>こんにちワン</td></tr>
<tr><th></th><td>ありがとう♪</td></tr>
<tr><th></th><td>ありがとウサギ</td></tr>
</tbody>

その他の解決案

(順序に意味があるので)ol使うのもありかな?あとはqとかblockquoteとか?でも必ずしも引用ではないしなあ。

解決策:正解があった

ぐぐると同じことで悩んでるお方が。

stackoverflow.com

そこのリンク辿って仕様書見てたらちゃんとHTML5の仕様に正解がありました。以下引用。

This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogs in screenplays, instant message logs, and other situations where different players take turns in discourse.

Instead, authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b.

抄訳:この仕様書では会話や議事録などを表す要素を定めていません。pを使って表しましょう。話者をスタイリングする必要がある場合は、spanとかb使ってください。

ええっ。全くセマンティックじゃなくね…?でも以下が正解。

<p>女:こんにちわ♪</p>
<p>犬:こんにちワン</p>
<p>女:ありがとう♪</p>
<p>兎:ありがとウサギ</p>

結論

HTML堕ちたWHATWG死ね