HTML5における<cite>タグの使い方

citeタグは、webサイトなどで何らかのコンテンツを引用した際に、作品のタイトルを表すものです。今回は、HTML5におけるciteタグの使い方をご紹介します。

HTML5における<cite>タグの使い方

<cite>では、人の名前などに使うことはできず、作品のタイトルにだけ使うことができます。基本的な使い方は以下の通りです。

<cite>
作品のタイトル
</cite>

サンプルコードを見てみましょう。

<p>
  テストです。通常のテキストです。
  <cite>
    作品のタイトルです。
  </cite>
  通常のテキストです。
</p>

スクリーンショット 2016-05-19 18.11.24

上記のサンプルコードの表示サンプルです。<cite>要素の部分が斜体(イタリック)になっているのが確認できると思います。このように、<cite>要素は斜体で表示されます。

任意属性で使うciteについて

また、あくまで引用元のURLを表記するためのもので、引用自体には利用しません。引用をする際は<blockquote><q>タグを使用しますが、このタグ内にcite属性を使うと、引用元のURLを表示することができます。

<p>
オリジナルの文章です。オリジナルの文章です。
</p>
<blockquote>
  <p>親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。
  </p>
<q cite="sample.html”>引用元名前</q>
</blockquote>

3db462aaf8d814ed3494b8f7bc90bd30-640x236

また、作品の内容を引用する場合には、 上記のようにせず、<blockquote><q>を使用してください。<blockquote><q>のcite属性には引用元のURLを指定します。 作品のタイトルを表すcite要素と混同しないように注意してください

HTML4.01からHTML5へのバージョンアップによる<cite>の変更点

HTML4.01では出典先を表すという要素で、作品名だけではなく作者名や著者名などにも使うことができました。けれども、 HTML5では作品名だけを表す要素となり、使用範囲が狭くなったので気をつけて使っていきましょう。


イベント

2017/12/05(火)
Design Thinking Square