引用や注釈のマークアップについて

質問

引用や注釈の仕方には色々あると思いますが、下記のような引用や注釈を (X)HTML でマークアップする場合はどうするのが良い方法でしょう？

-------------------- 引用　その１　ここから --------------------
「桃太郎は鬼が島へ向かいました」（著作者　2008　12p）と書かれている。
-------------------- 引用　その１　ここまで --------------------

-------------------- 注釈　その１　ここから --------------------
桃太郎は鬼が島（鬼が棲む島）へ向かいました。
-------------------- 注釈　その１　ここまで --------------------

-------------------- 注釈　その２　ここから --------------------
桃太郎は鬼が島（注１）へ向かいました。

注１：鬼が棲む島。
注２：ダミーテキスト。
-------------------- 注釈　その２　ここまで --------------------

以下のような「引用　その１」のマークアップをとりあえず考えてみました。

　　<q title="著作者　『ももたろう』　2008 12p">「桃太郎は鬼が島へ向かいました」</q><cite>（著作者　2008　12p）</cite>

この場合、括弧が q 要素、cite 要素の内側に入っていますが、括弧は出典ではありません。かといって、 q 要素、cite 要素の外側に出すのも、本文ではないのでおかしいのではないかと感じます。

また、CSS で丸括弧を付けた場合（:after など）、文章的に以下のようになって、音声ブラウザなどで問題が出るのではないかと思います（未確認）。もし、そうであれば括弧があった方がまだ理解しやすいように思えます。

　　<q title="著作者　『ももたろう』　2008 12p">桃太郎は鬼が島へ向かいました</q><cite>著作者　2008　12p</cite>

　　桃太郎は鬼が島へ向かいました著作者　2008　12p

そもそも、 (X)HTML 的には括弧などの約物はどう扱えばいいのでしょう…。

それと、本文中（原稿など）に元々表記されている出典は q 要素の、cite 属性や title 属性（+ CSS）のみで表せばいいのでしょうか？個人的には、冗長ですが cite 要素でも記述するべきだと思っていますが…。

みなさんはどのようにマークアップしますか、また正しいマークアップの仕方や参考になるURLがあれば教えてください。

よろしくお願いいたします。

回答No.1

noname#66720 · ベストアンサー

＞ q 要素、cite 要素の外側に出すのも、本文ではないのでおかしいのではないかと感じます。

別に外に出したからといって本文と解釈する必要はないと思いますし、マークアップ的に考えても外に出すほうが良いと思います。

＞また、CSS で丸括弧を付けた場合（:after など）、文章的に以下のようになって、音声ブラウザなどで問題が出るのではないかと思います

私であればqとcite要素の間にスペースまたは改行を入れます。
音声ブラウザではスペースがちゃんと認識されるため、スペースの位置で間をとってから次を読んでくれます。
()の有無に関わらず、この場合は間にスペースは必要だと思いますよ。

()をマークアップするかしないかで悩んでいらっしゃるようですが、実際にHTMLでマークアップしてあっても問題はないと思います。
マークアップ的には無いほうが親切なのは変わらないですが、javascriptで無理に挿入しても結局意味ないですし、CSSでやるにしてもIEが対応していませんし、実際のところまだ環境が整っていないというのが現状だと思います。
CSSの背景画像で対応することもできますが、まめにメンテナンスする必要性が出てくる可能性もあります。

マークアップに関してですが、
注釈１は私なら

<p>桃太郎は鬼が島（<em>鬼が棲む島</em>）へ向かいました。</p>

とします。
emは強調ですが、strongとはニュアンスの違う強調で重要度ではなく普通の文章との違いを強調する要素として、私は扱っています。

注釈2は

<p>桃太郎は鬼が島^{（<a href="#CAUTION01">注１</a>）}へ向かいました。</p>

<dl>
<dt id="CAUTION01">注１：</dt>
<dd>鬼が棲む島。</dd>
<dt id="CAUTION02">注２：</dt>
<dd>ダミーテキスト。</dd>
</dl>

のようにすると思います。

q要素内の引用についてはcite要素を利用したほうがよさそうです。
少し調べてみましたが、cite属性はURIを指定する属性のようです。

補足

回答ありがとうございます。

http://oshiete1.goo.ne.jp/qa3712420.html?ans_count_asc=1

この記事の回答３に良い情報がありました。やはり約物は装飾用のようなので、CSS（現状では Javascript） で記述するのが良いのかなと思いました。

音声ブラウザは、

　　<q>桃太郎は鬼が島へ向かいました</q><cite>著作者　2008　12p</cite>

これをどのように読み上げるのでしょうか。「引用、桃太郎は鬼が島へ向かいました。出典、著作者　2008　12p」と読んでくれるなら、それこそ CSS で記述したいと思うのですが。

マークアップ参考になります。em 要素を使うのはおもしろいと感じました。

回答No.2

noname#66720

実際に何と読むかはブラウザの仕様ごとに異なるので不明ですが、例えばheadline要素を音で知らせてくれる仕様の音声ブラウザ等もあるようですし、開始タグあたりで何かしらのアクションを起こしてくれることは期待しても良いと思います。
ただし必ずしも言葉であるとは限らないので、文章を繋げるのはあまり得策だとは思えません。

Firefoxの拡張で音声ブラウザ化するようなものもあったと思いますし一度試されてはいかがでしょう？
今のCSSで対応度の低いIEの仕様にあわせなければならないように、音声ブラウザでも機能が豊富で無いものを基準にされた方が良いと思います。

かなりアクセシビリティを考慮されているようですので、質問とは関係ないですが参考までに
http://www.aoikuma.com/wacheck100.htm

お礼

回答ありがとうございます。

またちょっと括弧のことで悩んでみたのですが、

　　<p>桃太郎は鬼が島（<em>鬼が棲む島</em>）へ向かいました。</p>

これで全然オッケーだなと思いました。この場合、括弧も含めて1段落ですもんね（当たり前ですが）。納得のいく形に収まりそうです。

やっぱり音声ブラウザでも異なりますよね。表示用のブラウザでも全然異なるのですから。そうなると、また色々対応していかないといけなくなってキリがない…。ちゃんと考えるって大変ですね。

URLありがとうございます。参考にさせて頂きました。