引用元を表すタグ <cite>要素とcite=”URL”属性の違いと使い分け方
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>引用元表記</cite>形式で独立したタグとして存在する場合が要素。
<blockquote cite="引用元URL">形式でblockquoteタグやqタグの中に入る場合は属性です。
で、どちらを使っていいのか混乱している方も多いのではないでしょうか。
実のところ、引用元を表すciteタグ使い方としては属性でも要素でも間違っていません。
ただ、表示のされ方など多少なりとも違いがあるので、解説しておきます。
なお、上記例ではblockquoteに使っていますが、<q cite="https://example.com"></q>形式で1文引用タグであるqタグに cite 属性をつけることも可能です。ただ、現在ではそもそもqタグ自体、あまり使われていませんけれど。
cite属性とcite要素の違い
cite属性とcite要素の一番の差はページ上に表示されるかされないかの違いです。
citeを要素として<cite>引用元URLなど</cite>と書いた場合はページ上に表示されます。
反対にblockquoteタグやpタグにcite属性として付与した場合はHTML上に表示されない仕様。
先ほど例として出したタグを実際に表示させると下記のようになります。
cite属性の表示例
新垣結衣さんマジ天使。
結婚してください。
<blockquote>内に cite="https://example.com" を記載しています。
が、 あくまでも内部情報として含まれるだけで実際にページ上では表示されません。
なお、cite属性に入れられるのはWEB上のURLだけでなく、書籍のISBNコードも入力可能です。
<blockquote cite="urn:isbn:123-4-5678-9123-4″>といった具合で、urn:isbn:のあとにISBNコードを入れればOKです。
書籍からの引用でURLがない場合はISBNコードを入れるといいでしょう。
cite要素の表示例
新垣結衣さんマジ天使。
結婚してください。
私の心の声より
こちらは<cite>要素を使って私の心の声から引用した形にしてみました。私の心ににURLはありませんが、もし引用元にURLがあるとしたら上記のようにアンカータグでリンクを張ることも可能です。
ちなみに上記のURLはクリックしても私のTwitterに飛ぶだけです。よかったらフォローしてください。基本的にフォロバします。
いつか私のゴーストがネットの大海原に進出した暁には、ちゃんとしたURLを張っておきますね。
どっちを使うのがいい？ 使い分け方は？
結論からいえば、両方使っても両方とも使わなくてもHTMLマークアップとしては問題ありません。
下記のように両方入れてもOKですし、なんなら<cite>要素は<blockquote>要素の外にあっても構いません。
<blockquote cite="https://example.com">
<p>新垣結衣さんマジ天使。</p>
</blockquote>
<cite><a href="https://example.com">世の男どもの心の声</a></cite>よりあくまでも引用であることを示すタグなので、気にしないようなら<cite>要素で囲わずとも<span>タグや<p>タグを使って引用元を表示させてもOKです。
著作物からの引用なら引用元の表記は必須
先述の通り、必ずしも<cite>要素やcite属性を使ってする必要はありません。
ただし、たとえば書籍やほかのサイトなどから文章を引用する場合は引用元を明記する必要があります。
著作物から引用する場合、無断転載ではなく引用として扱われる要件のひとつが引用元の記載です。
引用元を明記すればなんでも無断転載OKってわけではありませんが、明記しなければ確実に無断転載として著作権侵害となります。
引用元の表記を忘れないよう注意したいところ。
まとめ：引用元を表す<cite>要素とcite属性タグの違いと使い分け方
- 引用元を意味するHTMLタグciteには要素と属性があるが、どちらを使っても構わない。
- cite属性はページ表示されないので、引用元のURLを表示させたくない場合に使う。
- cite要素は引用元のURLが存在しない新聞や書籍などの場合に使う。
- また、cite要素はページ上に表示されリンクをつけることも可能なので、引用元へのリンクを張りたい場合にも使える。
- cite要素もcite属性も必須ではないが、著作物からの引用の場合は引用元の明記は必須なので注意。