HTMLのblockquote要素の使い方を徹底解説

他サイトから自分のページに、コンテンツを引用をしたい、なんてことはありませんか？

HTML文書の中で、この部分は引用であることをきちんと示した方が、サイトの信頼も上がりますよね。

今回は、他サイトから引用の仕方を間違えたくない、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLのblockquote要素とq要素を使った、引用の方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

blockquote要素はブロックレベル要素

適所に引用文を使うことで、コンテンツの質を高めることができます。

ただし、他サイトから文章を引用した場合、その箇所が引用文であることを示した方が良いことになっています。

引用であることを示していない場合、コピーコンテンツとみなされ、評価が下がる恐れがあるからです。

ページ内で引用する場合、HTMLのblockquote要素を使います。

<blockquote>
<p>引用した文章</p>
</blockquote>

こちらは、段落などの長い文章をまるごと引用するときに利用します。

短い文章の場合は、後述するq要素を使いましょう。

このblockquote要素はブロックレベル要素であるため、前後のコンテンツは縦に並びます。

ブラウザによって異なりますが、通常はインデント（字下げ）をされた状態で表示されます。

引用ではなく、インデントなどのデザインを目的にこの要素を使うのはNGとなっていますよ。

要素内の文章の位置を調整したい場合は、CSSのmarginやpaddingなどを使ってくださいね。

cite属性

<blockquote cite="引用元のURL">
<p>引用した文章</p>
</blockquote>

cite属性を用いると、引用元のURLを示すことができます。

こちらは、ブラウザ上には表示されず、プログラムが情報を判断する際に使われます。

cite要素

cite要素は、タイトルや出典についての説明を示すことができます。

<blockquote>
<p>メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。</p>
<cite>「走れメロス」冒頭より</cite>
</blockquote>

cite属性とは異なり、ブラウザ上に要素内の情報が表示されます。

blockquote要素のような引用がなかったとしても、作品のタイトルを記述する際に使うことができます。

引用元のリンクを貼りたいときには、下記のように記述します。

<cite><a href="引用元のURL">「作品のタイトル」</a>より</cite>

q要素はインライン要素

blockquote要素の説明をした際に、短い文章の引用には、q要素を用いることを伝えました。

q要素はインライン要素なので、内側にブロックレベル要素を含むことはできません。

<p>太宰治の<cite>走れメロス</cite>冒頭の<q>メロスは激怒した</q>という文章は、有名である。<p>

q要素で引用文を囲うと、自動的に両端に、引用符のかぎ括弧が追加されて表示されます。

かぎ括弧は日本語に対応したもので、HTML内で言語を英語に指定した場合には、ダブルクォーテーション「””」が追加されます。

q要素でもblockquote要素と同様に、cite属性とcite要素を利用することができます。

quotesとcontentを使った引用符

q要素で引用文を囲ったときに、両端に引用符が追加されると説明しましたが、この引用符は独自のものに書き換えることが可能です。

CSSプロパティのquotesとcontentを組み合わせて、指定します。

q {quotes: "<" ">" "(" ")"; }
q:before {content: open-quote; }
q:after {content: close-quote; }

先頭と末尾の引用符をペアで指定します。

ペアを複数指定することで、入れ子の引用符を追加できます。

まとめ：Webページ内の引用文はほどほどに

今回は、HTMLのblockquote要素とq要素を使った引用文の指定方法を紹介しました。

引用はコンテンツを充実させるメリットがありますが、Webページのメインコンテンツは、あくまで引用文以外の本文です。

引用文は、本文を補完するために利用し、ページ内で使いすぎないように注意しましょう。

Webページを作成する際に、今回の記事が少しでも参考になれば幸いです。