ブログをリニューアル予定。過去記事は削除するかもです。

HTMLで引用タグを正しく使う方法【長文・一部・引用元の書き方を解説】

HTMLで引用タグを正しく使う方法【長文・一部・引用元の書き方を解説】

ブログで他のサイトの文章を引用したいけど、どうやって書いたら良いんだろう?

引用タグの使い方を間違えると、SEOペナルティがあるって本当?

HTML引用タグの書き方を、初心者の僕にも分かりやすく教えてください。

 

こんな不安や疑問を解決します。

本記事を読めば、①長文を引用する方法、②一部を引用する方法、③引用元を明記する方法がわかるので、今後二度と引用の書き方について迷うことはありません。

HTMLの引用タグの使い方について、初心者にもわかりやすく基礎から解説します。

 

スポンサードサーチ

引用に関するHTMLタグは3つ

引用に関するHTMLタグは3つ

HTMLで引用を使いたい場合に使うタグは下記の3つです。

 

  • <blockquote>:長文をブロックとして引用する
  • <q>:文章の中に引用文を書く
  • <cite>:引用元を明記する

 

引用は記事の信ぴょう性を高めるので、効果的に使えばSEOにも好影響があります。

しかし、必要な場面で引用タグを正しく使えていないと、著作権に関わる問題にも繋がりかねません。

プログラミング知識としてだけでなく、ネットビジネスのリテラシーとしてもしっかり覚えておきましょう。

 

【blockquoteタグとは】基本情報と正しい使い方

<blockquote>は長文をまとまりとして引用するときに使います。

 

blockquoteタグで引用する方法
<blockquote>
  <p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>

 

“リンゴ”について、Wikipediaから長文を引用してみました。

上記のように、<blockquote>を使うときは、その中に<p>の段落を入れるのが一般的です。

 

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

<blockquote>は、ブロックレベル要素です。

そのため、<blockquote>〜〜</blockquote>で囲った部分の上下には改行が入った状態で表示されます。

 

blockquoteタグは改行される
<h1>リンゴとは</h1>
<p>リンゴについて、Wikipediaには次のように書かれています。</p>
<blockquote>
<p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>
<p>リンゴが紀元前から栽培されているなんて、少し驚きですよね。</p>

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

 

【quoteタグとは】基本情報と正しい使い方

<q>は、一部を引用するときに使われます。

ブロックレベル要素で前後に改行が入った<blockquote>と違い、<q>はインライン要素になります。

そのため、前後に改行が入りません。

 

quoteタグで引用する方法
<p>リンゴはバラ科リンゴ属の落葉高木樹で、一般的にはその果実のことを指します。上から見たら五角形に近いことから現代日本の美術界隈では、<q>リンゴは五角形</q>の愛称で親しまれています。</p>

 

このように<q>で一部を引用する場合、<p>で作った段落の中の一部に使います。

 

quoteタグはインライン要素

<q>はインライン要素です。もう説明不要かもしれませんが、インライン要素のタグで囲った部分には改行が入らず、前後の要素と同列で表示されます。

 

quoteタグは改行されない
<h1>リンゴとは</h1>
<p>リンゴはバラ科リンゴ属の落葉高木樹で、一般的にはその果実のことを指します。上から見たら五角形に近いことから現代日本の美術界隈では、<q>リンゴは五角形</q>の愛称で親しまれています。</p>

quoteタグはインライン要素

 

<q>で囲った部分は「””(ダブルクオテーション)」で挟まれて表示されます。

HTMLの言語設定を<html lang="ja">として、日本語設定にすることで「””」の代わりに、かぎ括弧「()」で表示させることが可能です。

 

【citeタグとは】基本情報と正しい使い方

<cite>は引用元のタイトルや題名を表すHTMLタグです。

 

citeタグで引用元を示す
<h1>リンゴとは</h1>
<p>リンゴについて、<cite>Wikipedia</cite>には次のように書かれています。</p>
<blockquote>
<p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>
<p>リンゴが紀元前から栽培されているなんて、少し驚きですよね。</p>

citeタグで引用元を示す

 

先ほどのリンゴに関する引用元はWikipediaなので、その部分を<cite>で囲ってみました。標準ブラウザでは、イタリック(斜体)で表示されるのが特徴です。

 

citeタグで囲める物

<cite>で囲める要素には次のようなものがあります。

 

  • 書籍、論文、エッセイ、脚本
  • 楽譜、楽曲、歌詞
  • 映画、テレビ番組、ラジオ番組、YouTubeチャンネル
  • Webサイト
  • ゲーム
  • 彫刻、絵画、その他アート

など…。

 

blockquoteタグ、quoteタグとの属性としても使用可能

<cite>は、<blockquote> <q>の属性として使うこともできます。

細かいことを言えば、HTMLタグとしての<cite>と属性の"cite"は別物なんですが、、、別にそこは重要じゃないので、citeはHTMLタグとしても属性としても使えると覚えておけばOKかと思います。

 

属性としてciteを使う
<blockquote cite="https://en.wikipedia.org/wiki/Apple">
  <p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
</blockquote>
<p><q cite="https://en.wikipedia.org/wiki/Apple">リンゴ(林檎、学名:Malus domestica, Malus pumila)</q>は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>

属性としてciteを使う

 

このように、属性でciteを使用した場合、ブラウザ表示上の見た目に変化はありません。

ですが、引用基がしっかり明記されていると検索エンジンのクローラーには好影響を与えるので、<blockquote> <q>を使うときは、cite属性を加えて、引用元の明記までしておくと良いと思います。

 

複数の引用を並列したい場合

複数の引用を並列すると、HTMLコードが読みづらくなることがあります。

 

複数の引用が並ぶと読みにくい
<blockquote cite="https://en.wikipedia.org/wiki/Apple">
  <p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
</blockquote>
<cite>Wikipedia</cite>
<blockquote cite="https://en.wikipedia.org/wiki/Citrus_unshiu">
 <p>ウンシュウミカン(温州蜜柑、学名:Citrus unshiu)は、ミカン科の常緑低木またはその果実のこと。様々な栽培品種があり、果実が食用にされる。</p>
</blockquote>
<cite>Wikipedia</cite>

 

解決方法

こんなときの解決方法が、<figure>です。

 

figureタグでまとまりを作る
<figure>
 <blockquote cite="https://en.wikipedia.org/wiki/Apple">
   <p>リンゴ(林檎、学名:Malus domestica, Malus pumila)は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
 </blockquote>
 <figcaption>
  参照:<cite>Wikipedia</cite>
 </figcaption>
</figure>
<figure>
 <blockquote cite="https://en.wikipedia.org/wiki/Citrus_unshiu">
  <p>ウンシュウミカン(温州蜜柑、学名:Citrus unshiu)は、ミカン科の常緑低木またはその果実のこと。様々な栽培品種があり、果実が食用にされる。</p>
 </blockquote>
 <figcaption>
  参照:<cite>Wikipedia</cite>
 </figcaption>
<figure>

 

<figure>は独立したコンテンツを示す時に使われるHTMLタグでして、使用頻度は低いものの、使い方を覚えておくととでも便利なので、ついでに覚えておきましょう。

詳しくは下記の記事をどうぞ。

»【figureタグとは】使い方がイマイチわからないHTMLタグを解説

 

スポンサードサーチ

まとめ:HTMLで引用元の明記は大切です

まとめ

本記事は以上です。

HTMLで引用タグをしっかり使うことは、SEO的にもネットマナー的にもとても重要です。

SEOではコピーコンテンツとしてみなされないための防止策、記事の信ぴょう性を高める効果があるし、ネットで発信するなら無断で他者の著作物を記載してはいけないのは最低限のマナーです。

<blockquote> <q> <cite>をしっかり使って、HTMLの引用をマスターしましょう。

おわり。