引用した文章や単語を表す

引用した文章や単語を適切なHTMLタグに設定していく解説です。ここではcite要素、q要素、blockquote要素、mark要素の４つについて解説していきます。

引用するものによって使用するタグは違いますので注意しましょう。サイト名や、短い文章、まとまった文章などによって使い分けます。

<cite>

cite要素は引用した作品のタイトルを表すHTMLタグです。この要素で囲めるのは作品名のみとなります。またブラウザ上では、cite要素内の文字はイタリック（斜体）で表示されます

要素	解説
<cite>	作品のタイトル


<p>私の好きな映画は<cite>となりのトトロ</cite>です。</p>

ブラウザ表示例

私の好きな映画はとなりのトトロです。

q要素は短いテキストの引用を表します。またcite属性を使用して、引用元のURLを記述することもできます。

例：<q cite="http://www."></q>

q要素のあくまで短いフレーズなどを引用した場合に使用します、またq要素内のテキストはカッコで表示されます。まとまった文章の引用は下の<blockquote>を使用するのが適切です。

要素	解説
<q>	短いテキストの引用

属性	解説
cite	引用元のURL


<p>私は好きな映画の<q>めぇ～ちゃ～ん</q>というセリフが好きです。</p>

ブラウザ表示例

私は好きな映画のめぇ～ちゃ～んというセリフが好きです。

blockquote要素はまとまった文章の引用を表します。短いフレーズを引用する場合は上のq要素を使用してください。またcite属性を使用して、引用元のURLを記述することもできます。

例：<blockquote cite="http://www."></blockquote>

単に表示の設定としてblockquote要素を使用するのは正しくありません、あくまでまとまった文章を引用する際に使用しましょう。

要素	解説
<blockquote>	まとまった文章の引用

属性	解説
cite	引用元のURL

<blockquote>己の運命は誰にもわからない。自分にすらわからない。しかし、運命に逆らって生きようとするのは人間である</blockquote>

ブラウザ表示例

己の運命は誰にもわからない。自分にすらわからない。しかし、運命に逆らって生きようとするのは人間である

mark要素はHTML5からの新規要素で他のウェブサイトのページや説明文などとの関連性を示すために使用したり、他のテキストと区別する場合に使用します。mark要素で囲まれた部分は背景に色が付きます。感覚で言うならば、蛍光ペンで目立たせたいテキストをマークするような感じだと思います。

要素	解説
<mark>	マーキング

<p>mark要素は<mark>マーキング</mark>することができます。</p>

ブラウザ表示例

mark要素はマーキングすることができます。