blockquote と cite と code と pre

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>

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

blockquote要素とpre要素とcode要素

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

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

つまり、

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

とするか、

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

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

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

“blockquote と cite と code と pre” への 2 件のフィードバック

  1. 引用について深く考えるきっかけになりました。
    引用される側とする側mそれから読む人
    検索エンジンにとっても正しく分かりやすくしなければいけないと気付かせて頂きました。

    古い記事にコメント失礼しました。

    デザインもシンプルで左のメニューがスクロールしてもちょうどいい所に追いかけて来てくれるし

    今後の記事の方も楽しみにしています。

  2. >maxさん

    いえいえ、コメントありがとうございます!
    なにかしらmaxさんご参考になったのであれば幸いです。^^

    ありがとうございます。
    本当にマイペースな更新ですが、どうぞこれからもよろしくおねがいしまっすm(__)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA