20Sep2006

blockquote と cite と code と pre

Article entry published at 13:19 | 2 | 0

HTMLのタグであるblockquoteやciteは、ブログが流行し始めてから頻繁に使われるようになったタグではないでしょうか。

でも実際どういうマークアップが正しいのか色々な情報があるし、自分の頭はそれでしっかり混乱してるみたいなので、今回は頭を整理することもかねてエントリしてます。

blockquote要素とcite要素

当サイトでは、以前までblockquote要素の中に引用元サイトのリンクを配置し、しかもblockquote要素のcite属性とcite要素は未使用であるといういい加減な記述をしていました。
かなり前から直したかったんですが、めんどくさくて・・・。今回やっと記事の一部ですが修正しました。

blockquote要素にcite要素を包括するかの是非は色々な記事があります。以下に僕が参考にした記事を紹介します。

上記の記事にあるように、blockquote要素とcite要素の持つ役割を考えると、blockquote要素の外にcite要素で括った引用元リンク（a要素）を配置し、このcite要素をp要素で括る、という手法がよりよいと判断しました。

<blockquote cite="引用元URI" title="引用元タイトル">
引用文
</blockquote>
<p><cite>引用元へのリンク</cite></p>

つまり、こういうことになりますかね。

上にいきなり出てきてますが、当サイトではソースコードはcode属性で括ったのちblockquote要素で括ってます。

これを上記のように考え出すと、「blockquote要素で括っていいの！？」とか「pre要素じゃないの！？」とか「blockquoteなの？preなの？どっちなの！？」」とかなりそうです。
この件については以下の記事が参考になると思います。

つまり、

<blockquote><code>ソースコード</code></blockquote>

とするか、

<pre><code>ソースコード</code></pre>

~~とするか、ということなんですかね？うーん、ちょっと僕にはどちらがいいのかわかんないです。。汗~~
~~でも、まぁ、今のとこは~~また直すのめんどくさいし、~~現状維持で。有識者の方、ご意見あればぜひご教授ください。m(__)m~~
pre要素で括る方に順次変更しています。

つまり、blockquote属性を単にインデントさせるためだとか、他の文章より目立たせるために使用するのは、このタグが本来持つ役割を無視してる、ということなんでしょうか。