PR

【HTML】引用時に!qタグ、blockquoteタグの違い、使い方のご紹介!サンプル付き!

WEB制作技術系

WEBサイト上で、他人の著作を引用したいシーンありますよね?

そんな時、HTMLでは、qタグblockquoteタグを使用します。

今回は、qタグ、blockquoteタグの違いや使い方について解説していきます。

qタグ、blockquoteタグとは?

qタグ、blockquoteタグは、他人の著作を引用する場合に使うタグです。qタグは「クォート」、blockquoteタグは「ブロッククォート」と読みます。

<q cite="引用元URL">引用するコンテンツが入ります</q>

<blockquote cite="引用元URL">引用するコンテンツが入ります</blockquote>

上記のサンプルのように、引用したいコンテンツを挟む形で使用します。コンテンツには、引用文が入ると考えてください。

また、cite属性は、引用コンテンツの引用元のURLを指定します。指定できる値は、URLのみとなります。

2つのタグの違いとは?

この2つの違いは、引用するコンテンツの量です。比較的短い引用であればqタグ、比較的長い引用であればblockquoteタグを使います

お悩みさん
お悩みさん

比較的短い?比較的長い?具体的には?

実は、結構定義が曖昧なタグで、何文字以上ならこのタグを使うと言った決まりがありません。

比較的短い引用とは、一般的に1行で収まるような短文、改行を必要としないシンプルなものという解釈で問題ありません。これに当てはまらないものは、比較的長い引用として考えていただいて大丈夫です。

お助け猫
お助け猫

qタグを使用するケースは、感覚的に稀で、blockquoteタグを使うことが殆どです。

併せて覚えたい、citeタグについて

引用元の作品名、WEBサイトのタイトル等を記載する場合は、citeタグを使います。

<!-- 例1 -->
<p>私の好きな書籍は<cite>作品名</cite>です。</p>

<!-- 例2 -->
<blockquote cite="引用元URL">AI技術の発達は、人類滅亡を加速させる。便利なものが出来ればそれを悪用する人間が必ず現れる。
<cite>AI技術未来の書</cite>
</blockquote>

例1のように、作品名を囲む時に使用する場合もあれば、例2のようにblockquoteタグの中に含めて使用する場合があります。

引用文、人名を含める事は出来ないので、ご注意ください。

このタグも併せて覚えておきましょう。

qタグ・blockquoteタグ、citeタグの使い分けは?

お悩みさん
お悩みさん

この3つのタグ、使い分けがイマイチピンとこないです。混乱してきました。

では、一度整理しましょう。

qタグ比較的短い文章を引用するタグ
blockquoteタグ比較的長い文章を引用するタグ
citeタグ作品名サイトタイトルを表す

使い分けに悩んでしまった方は、上記の表を参考に使い分けをしていただければと思います。

SEOに影響は?

SEOイメージ画像

今回ご紹介した引用タグを使ったからと言って、特別効果があるとは言いづらいです。

ただ、これらのタグを使わずに、検索エンジンからコピーコンテンツとして認識されてしまうのは勿体ない事です。

しっかりとこのようなタグが用意されているのですから、使わないに越した事はないでしょう。

まとめ

今回ご紹介したタグは、使用頻度はそれほど高くなく、初心者向けのHTMLの参考書にはおそらく載っていないであろうタグです。

調べたら、こんなタグがあったと、日々発見があるのがHTMLタグです。

こんなタグもあるんだと覚えておいていただければ幸いです。

タイトルとURLをコピーしました