引用元を表すタグ <cite>要素とcite=”URL”属性の違いと使い分け方

引用元を意味するciteタグの属性と要素のでの違い・使い分け方

blockquote や q など、HTMLにおける引用タグ。

サイト訪問者だけでなくGoogleなど検索エンジンに引用であることを示し、ペナルティを回避するためのSEO対策的な一面も持つHTMLタグでもあります。

ややこしいことに、引用タグと対となり引用元を示す cite タグには要素形式のlt;cite>と属性形式のcite=”URL”の2種類が存在しています。

引用タグの解説をしているサイトでもciteの使い方はどちらか一方しか解説していないことも多く、初心者にはよくわからないタグのひとつとなっています。

2種類あるcite、どちらが正しい?

引用タグの使い方を調べていると、引用元を表す cite の使い方でどちらか一方しか解説されていないことが多々あります。その両方をまとめるとこんな感じ。

<!-- 属性としてのciteタグ -->
<blockquote cite="https://example.com">
<p>新垣結衣さんマジ天使。</p>
<p>結婚してください。</p>
</blockquote>

<!-- 要素としてのciteタグ -->
<blockquote>
<p>新垣結衣さんマジ天使。</p>
<p>結婚してください。</p>
<cite><a href="https://example.com">私の心の声</a>より</cite>
</blockquote>

要は cite が引用タグ要素としてマークアップするか属性としてマークアップするかですね。

<cite>引用元URLなど</cite>形式で独立したタグとして存在する場合が要素

<blockquote cite=”引用元URL”>形式で blockquoteタグやqタグの中に入る場合は属性です。

で、どちらを使っていいのか混乱している方も多いのではないでしょうか。

実のところ、引用元を表すciteタグ使い方としては属性でも要素でも間違っていません

ただ、表示のされ方などが変わりますし、多少なりとも違いがあるのでうまく使い分けると良いでしょう。

なお、上記例ではblockquoteに使っていますが、<q cite=”https://example.com”></q>形式で1文引用タグであるqタグに cite 属性をつけることも可能です。

cite属性とcite要素の違い

cite属性とcite要素の一番の差はページ上に表示されるかされないかの違いです。

citeを要素として<cite>引用元URLなど</cite>と書いた場合はページ上に表示されます。

反対にblockquoteタグやpタグにcite属性として付与した場合はHTML上に表示されない仕様。

先ほど例として出したタグを実際に表示させると下記のようになります。

cite属性の表示例

新垣結衣さんマジ天使。

結婚してください。

<blockquote>内に cite=”https://example.com” を記載しています。

が、実際にページ上では表示されません。

cite要素の表示例

新垣結衣さんマジ天使。

結婚してください。

私の心の声より

私の心の声にURLはありませんが、もし引用元にURLがあるとしたら上記のようにアンカータグでリンクを張ることも可能です。

ちなみに上記のURLはクリックしても私のTwitterに飛ぶだけです。よかったらフォローしてください。基本的にフォロバします。

いつか私のゴーストがネットの大海原に進出した暁にはちゃんとしたURLを張っておきますね。

どっちを使うのがいい?使い分け方は?

どちらを使っても問題はありませんが、本来であればページ上に表示されないcite属性で十分です。

しかし、引用元が必ずしもネット上にあるコンテンツとは限りません。たとえば新聞や書籍など紙媒体だとネット上に存在しないコンテンツもあるのです。

こうした引用元としてのURLは存在しない場合、引用元を記載するためにはcite要素を使うしかありません。

<blockquote>
<p>新垣結衣さんマジ天使。</p>
<cite>世の男どもの心の声より</cite>
</blockquote>

本来世の男どもの心の声にはURLは存在しないので、引用元をcite要素するしかありません。

しかし アンカータグ(aタグ)でリンクをつけることもできるので、URLが存在していて訪問者を引用元へ案内したい場合にも使うことが可能です。

逆に言えば、引用元にURLは存在するけれどわざわざリンクを張りたくない属性を使うと良いでしょう。

まとめ:引用元を表す<cite>要素とcite属性タグの違いと使い分け方

  • 引用元を意味するHTMLタグciteには要素と属性があるが、どちらを使っても構わない。
  • cite属性はページ表示されないので、引用元のURLを表示させたくない場合に使う。
  • cite要素は引用元のURLが存在しない新聞や書籍などの場合に使う。
  • また、cite要素はページ上に表示されリンクをつけることも可能なので、引用元へのリンクを張りたい場合に使える。