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

Category : HTML

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

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

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

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

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

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

<blockquote>
	引用文
</blockquote>

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

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

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

上のに citetitle の属性がある以外は一緒。

属性なし

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

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

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

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

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>

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


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

Leave a Reply