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

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

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

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

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

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

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

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

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

3db462aaf8d814ed3494b8f7bc90bd30-640x236

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて