Unformed Building

最近見かけた引用文のマークアップいろいろ

公開：

パーマリンク

普通、引用するときにはblockquote要素やq要素でマークアップすると思うんですけど、人様のページのソースを眺めていると色々な使い方してるなーと思ったので、良し悪しにかかわらず紹介してみようと思います。
（q要素については今回はやりません）

blockquote要素については以前から解釈の違いからの議論が多いようですけど、それらは検索すれば山ほど出てくるのでそちらをどうぞ。

まず、引用文の基本マークアップ。
当たり前かもしれませんが、調べた範囲ではこうやってる人が一番多かったですね。

<blockquote cite="URI" title="引用元のタイトルや情報">
  <p>引用文</p>
</blockquote>

blockquote単体でマークアップしているタイプ

属性なし、blockquote要素の子要素がテキスト

<blockquote>
  引用文
</blockquote>

引用文だと分かるだけで、どこからの引用かは不明になってしまいます。同じコンテンツ内にリンクがあれば見ている人には分かるかもしれません。
あと、blockquote要素は基本的にインライン要素とテキストは子要素にできないので、微妙な感じ。Transitionalでは一応OKみたいですけど……。

blockquote要素の子要素がテキスト

<blockquote cite="URI" title="引用元のタイトルや情報">
  引用文
</blockquote>

上のにciteとtitleの属性がある以外は一緒。

属性なし

<blockquote>
  <p>引用文</p>
</blockquote>

同一文書内に参照リンクがある場合が多かった。見ている人にはどこからの引用か予測できると思ういますが、やっぱりcite属性はあった方がいいと思います。

blockquote要素とcite要素を使用しているタイプ

このタイプの人は「この引用はこのURIを参照していますよ」と見てすぐ分かるように書いているのだと思います。
cite要素は引用文の前または後のどちらも見かけましたが、後につける人が多かった印象。

blockquote要素の中にcite要素

<blockquote cite="URI" title="引用元のタイトルや情報">
  <p>引用文</p>
  <p><cite>URI</cite></p>
</blockquote>

cite要素内は

<cite><a href="URI">引用元のタイトルや情報</a></cite>

になっている場合も多いです。
これは以下の例でも一緒。

よく議論されていますが、cite要素をblockquote要素内に入れるのはどうなんでしょうね。

blockquote要素の外にcite要素

<blockquote cite="URI" title="引用元のタイトルや情報">
  <p>引用文</p>
</blockquote>
<p><cite>URI</cite></p>

cite要素がblockquote要素の外にありますね。
citeの中身は引用元にはないのだから、こちらの方がしっくりくるかと。

blockquote要素とcite要素を結び付けようとしているタイプ

class名は色々あったのでこっちで適当につけました。

blockquote要素とcite要素をdiv要素でひとまとめに

<div class="quote">
  <blockquote cite="URI" title="引用元のタイトルや情報">
    <p>引用文</p>
  </blockquote>
  <p class="cite"><cite>URI</cite></p>
</div>

このタイプでは一番多く見かけました。
1つのブロックとして扱うことで関連性を持たせようとしているのじゃないかと思います。

blockquote要素とcite要素を定義リストでマークアップ

<dl class="quote">
  <dd>
    <blockquote cite="URI" title="引用元のタイトルや情報">
      <p>引用文</p>
    </blockquote>
  </dd>
  <dt><cite>URI</cite></dt>
</dl>

dt要素が上に来ている場合もあります。
これを発展させたものが以下。

<dl class="quote">
  <dt><cite>引用元のタイトル</cite></dt>
  <dd>
    <blockquote cite="URI" title="引用元のタイトルや情報">
      <p>引用文</p>
    </blockquote>
  </dd>
  <dt class="cite"><a href="URI">引用元の情報</a></dt>
</dl>

これらはdiv要素を使う場合よりも明確に関係が分かるようにと考案されたもの。

cite要素をul要素でマークアップ

<blockquote cite="URI" title="引用元のタイトルや情報">
  <p>引用文</p>
</blockquote>
<ul class="cite">
  <li><cite>URI</cite></li>
</ul>

定義リストでマークアップするのがありならこれもありなんじゃないか、という趣旨で提案されていました。提案者は使用していませんでした。
が、実際に使っている人も見かけました。

blockquote要素を使わないタイプ

リンクもあるし「引用」って書いてあるし、見た目（インデントとか）と文脈で分かるからいいだろ、的なもの。
確かに、人が見る分には判断できると思いますけど……。

p要素でいいだろ

<p class="quote">引用文</p>

恐ろしくシンプル。
引用したいテキストが2段落に渡って書かれていたりしたらどうするんだろうとか考えてしまいます。

fieldset要素&legend要素

<fieldset>
  <legend>引用元のタイトルや情報</legend>
  引用文
</fieldset>

そんなに最近ではないですけど、一部で話題になったもの。
考え出した人は使うのを諦めたようです。

他にもありそうですが、とりあえずこんなところで。
初めにも書いた通り、引用のマークアップについては色々な意見があるので読んでおくと勉強になるかもしれません。