HTML/CSS

意外と知らない?引用(blockquote)する時のHTMLタグの書き方

読了時間: 約31
HTML

時々、質の高い記事を作成するために、他のブログ記事や参考資料からテキストを引用(blockquote)することがありますよね?

引用をする際には、そのテキストが引用されたものであるということを明記するために引用タグを使います。
引用タグには、blockquoteタグとqタグがあります。
そして、citeタグは引用元や出典を明記する時に使用します。

ところで、あなたはこれらの引用タグを正しく使えていますか?
もし間違えた使い方をしていると、重複コンテンツとみなされて表示順位が落ちる可能性がありますよ。
この機会にぜひ使い方を確認してみましょう。

引用タグの種類

引用タグには、blockquoteタグとqタグがあります。
それぞれ使い方がちょっと違いますので、一度確認してみます。

blockquoteタグ

blockquoteタグは、一般的な引用をする場合に使われるタグです。
通常、ウェブブラウザで見るとインデントされて表示されます。
具体的な見た目は、CSSの設定で変わります。

qタグ

qタグは、改行が不要な短い文章を引用する場合に使用するタグです。
通常、引用する場合には長めの文章になることが多いので、やや使いにくい印象です。
そのため、基本的には上述したblockquoteタグを使うのが普通です。

citeタグ

citeタグは、引用元や出典を明記するために使用するタグです。
一般的なウェブブラウザでは、イタリック体で表示されることが多いです。
インターネット上の記事からの引用の場合、出典元へリンクを貼るのがマナーです。

引用タグの使い方

それでは、それぞれのタグの概要が分かったところで、具体的な使い方を確認してみましょう。

blockquoteタグ

blockquoteタグを使った引用の雛形は、例えば以下のようになります。

<blockquote cite="引用元URL">
<p>〜引用文〜</p>
<p>出典: <cite><a href="引用元URL" target="_blank">引用元のタイトル</a></cite></p>
</blockquote>

この雛形を元にして、実際に引用してみた例が以下になります。
このブログのCSS設定では、このように表示されるのですね。

PageLinkerというのは、今見ているページへのリンクタグを一発で作成してくれるブックマークレットです。
このPageLinkerを使うことで、リンクを貼る作業を楽々行えるようになります。

出典: PageLinker: ページリンクタグ作成ブックマークレット|スズシンラボ オフィシャルブログ

qタグ

あまり使われませんが、qタグの場合も見てみます。
qタグを使う場合の雛形は、例えば以下のようになります。

<p>文章の途中で<q>引用</q>しています。</p>

この雛形を使って引用した例がこちら。
「名前はまだ無い」の部分をqタグで囲んでいるのですが…。
引用した部分がカギカッコで表示されています。

「吾輩は猫である」では、猫の名前については名前はまだ無いと書かれています。

注意点

blockquoteタグは、引用をする時に使用するタグですので…。
それ以外の目的(主にインデント)をするためだけに、このタグを使わないでください。
本来の使い方とは違ってしまいますからね。
もし、インデントをしたいのなら、インデント用のCSSをあらかじめ用意しておくと良いですよ。

まとめ

今回の記事では、引用タグ(blockquote/q/cite)の使い方について確認してみました。
qタグについてはあまり使いませんので、基本的にはblockquoteタグとciteタグを覚えておけば良いですね。
いかがでしょうか?
理解していただけたでしょうか?

これであなたも、ばっちり引用の仕方を覚えましたよね!
今後、引用をする際には、正しいマークアップの書き方をしていきましょう。

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。

大学卒業後、公務員を目指していたが失敗。
その後、仕事をしようとするも全て不採用に。
そのうち、心を病んで統合失調症を発症。
入退院を繰り返す。

「仕事をもらえないなら自分で作ればいい」「自分の好きな仕事だけをやろう!」と思うようになり、フリーランスに転身。
現在は、ブログの更新やアプリ開発を主な仕事にしている。

趣味は音楽鑑賞・読書・カラオケ・オセロ。
特に好きな歌手は水樹奈々で、ファンクラブにも所属している。
最近ハマっている曲は「恋想花火」。

フィードを登録していただくと、ブログの更新を把握しやすくなります。
あなたからの登録をお待ちしています!

Feedly
RSS

Twitter: @suzushin7

コメントを残す

%d人のブロガーが「いいね」をつけました。