
作品や文献(サイト)のタイトルは、cite要素でマークアップしましょう。
cite要素の基本的な使い方
まずは、以下のプログラムと、ブラウザでの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
<p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。
p要素の中には、『名作吾輩は猫であるは、夏目漱石の代表作です。』と書かれた文章があります。
そして、「吾輩は猫である」と書かれたフレーズは、cite要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「吾輩は猫である」は、斜体文字として表示されています。
英語(英文)ではどうなる?
では、英語(英文)について、cite要素でマークアップしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
<p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
<p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「I am a Cat」について、cite要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「I am a Cat」は、斜体文字として表示されています。
cite要素は、カタカナにマークアップできるか?
さらに、カタカナ(全角、半角)について、cite要素でマークアップを行いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
<p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
<p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
<p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
<p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
</body>
</html>

先ほどのプログラムに、カタカナのテキストを含む文章を追加しました。
追加した文章では、「走れメロス」、「走れメロス」について、cite要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。
cite要素は、数字にもマークアップできるか?
数字についても、cite要素でマークアップしてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cite要素</title>
</head>
<body>
<p>名作<cite>吾輩は猫である</cite>は、夏目漱石の代表作です。</p>
<p>The masterpiece <cite>I am a Cat</cite> is one of Soseki Natsume's most famous works.</p>
<p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
<p>太宰治の<cite>走れメロス</cite>は、熱き友情の物語である。</p>
<p>映画<cite>2001年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したSF映画である。</p>
<p>映画<cite>2001年宇宙の旅</cite>は、スタンリー・キューブリックが製作・監督したSF映画である。</p>
</body>
</html>

先ほどのプログラムに、数字(全角数字、半角数字)のテキストを含む文を追加しました。
追加した文章では、「2001年宇宙の旅」、「2001年宇宙の旅」について、cite要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。
以上から、cite要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ(全角及び半角)」に対して、マークアップできることが確認できました。
各種ブラウザでの表示結果
また、cite要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
cite要素 | ○ | △ | △ | ○ | ○ | △ |
以上、cite要素の使い方について、ご参考になさってくださいねー。