HTML & CSS - cite タグ

基本的な使い方

cite タグは、引用した作品名を表します。作品名の他に、書籍、曲、絵画、脚本、ゲーム、テレビ番組、イベントなど、公的なドキュメントに対しても使用することができます。

cite タグは、引用文を表す blockquote タグと合わせてよく使われます。

<blockquote>
    <p>天は人の上に人を造らず人の下に人を造らず</p>
    <p><cite>学問のすゝめ</cite> 福沢諭吉 著 より引用</p>
</blockquote>
cite タグの基本的な書き方

天は人の上に人を造らず人の下に人を造らず

学問のすゝめ 福沢諭吉 著 より引用

ブラウザ表示

より厳密な書き方

より厳密な書き方をするには blockquote タグ、figure タグ、figcaption タグを組み合わせて記述します。

blockquote タグ
他ページからの引用・転載したテキストであることを表します。
figure タグ
その部分だけで意味が成り立つ独立したコンテンツを表します。
figcaption タグ
figure タグのキャプション(注釈)を付けるために使用します。
<figure>
    <blockquote cite="https://www.aozora.gr.jp/cards/000296/files/47061_29420.html">
        <p>天は人の上に人を造らず人の下に人を造らず</p>
    </blockquote>
    <figcaption>
        引用元: <cite>学問のすゝめ</cite>
    <figcaption>
</figure>
cite タグの厳密な書き方

上記の書き方は、全体を figure タグで囲み独立したセクションにしています。その中に、引用文を表す blockquote タグと、脚注を表す figcaption タグ、そして作品名を表す cite タグで構成しています。

使用上の注意

cite タグには引用文そのものを含めたり、人名をマークアップするために使用してはいけません。cite タグには、作品名のみを入れるようにします。

<!-- NG な書き方 -->
<blockquote>
    <p><cite>天は人の上に人を造らず人の下に人を造らず</cite></p>
    <p><cite>学問のすゝめ 福沢諭吉</cite> 著 より引用</p>
</blockquote>
cite タグには引用文そのものを含めてはいけません

外部リンク