HTML/CSS

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

読了時間: 約232
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タグを覚えておけば良いですね。
いかがでしょうか?
理解していただけたでしょうか?

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

プロフィール
読了時間: 約018

鈴木俊吾(すずしん)

経験無し・実績無し・コネ無しの状態から、人生大逆転を目指してフリーランスに。
「好きなことで生きる」をモットーに、現在は主にブログで情報を発信。
茨城県常総市を拠点に活動。
仕事は随時募集中。

Twitterでは、ブログ更新通知をしています。
フォローしていただけると、最新記事をすばやく読むことができます。
また、仕事に関するお問い合わせもDMにて受け付けています。
ぜひフォローをよろしくおねがいします。

@suzushin7をフォローする

お問い合わせ

COMMENT

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

CAPTCHA