コンテンツを引用する前に正しいHTMLマークアップをおさえておこう

最近コンテンツの盗用問題が目立っておりますが、コンテンツのパクリというのは以前から問題視されておりました。

引用と盗用は紙一重であるということもあるので判断が難しいところです。これは引用する側のモラルの問題でもあったりしますが、そもそもコンテンツ引用の方法を知らない方も多いのではないでしょうか。

そこで今回は、引用に関する正しいHTMLマークアップについてご紹介していきます。

引用に必要なHTMLタグ

コンテンツを引用する際は、以下の4つのHTMLタグを使用します。

<blockquote></blockquote>: 段落単位で引用する際に使用します。<p></p>を合わせてマークアップし段落を記述します。

<q></q>: 一文を引用する際に使用します。

<cite></cite>: 引用元を記述する際に使用します。ウェブサイトからの引用であればURLやタイトルを記載し、書籍からの引用であれば書籍タイトルや掲載ページを明記しておきます。

<footer></footer>: <blockquote></blockquote>内に引用元の詳細情報を掲載する場合に使用します。

<blockquote>や<q>は一般的なものでありますが、HTML5では<footer>も併せて記述することで、引用元をより明確に記述することができます。

では、実際のマークアップパターンをご紹介してみます。

一文を引用する

<q title="Bruno[ブルーノ]">
	引用する際は、引用文であることをしっかり明記しましょう。
</q>

<q cite="https://web-bruno.com">
	引用する際は、引用文であることをしっかり明記しましょう。
</q>

<p>
	<cite>Bruno[ブルーノ]</cite>の記事で記載があったのですが、
	<q cite="Bruno[ブルーノ]">引用する際は、引用文であることをしっかり明記しましょう。</q>
</p>

一文単位の引用では、<q></q>を使用します。<cite></cite>と併せてマークアップすることにより、引用元を明確に記述することができます。

段落単位で引用する

<blockquote cite="https://web-bruno.com">
	<p>引用する際は、引用文であることをしっかり明記しましょう。引用符で囲むことだけではなく、適切なマークアップをしてGoogleにも引用文であることを伝えることも大切です。</p>
	<p>これは、サイトを継続していくためにも大切なことです。情報を伝えるサイトであればクリーンな更新は必要ですからね。</p>
	<p>
		<cite><a href="https://web-bruno.com" target="_blank">Bruno[ブルーノ]</a></cite>
		からの引用
	</p>
</blockquote>

<blockquote cite="https://web-bruno.com">
	<p>引用する際は、引用文であることをしっかり明記しましょう。引用符で囲むことだけではなく、適切なマークアップをしてGoogleにも引用文であることを伝えることも大切です。</p>
	<p>これは、サイトを継続していくためにも大切なことです。情報を伝えるサイトであればクリーンな更新は必要ですからね。</p>
	<footer>
		<p>
			<cite>Bruno[ブルーノ]</cite>からの引用
			<cite>
				<a href="https://web-bruno.com" target="_blank">
					記事タイトル
				</a>
			</cite>
		</p>
	</footer>
</blockquote>

引用を段落として認識させる際に<blockquote>にてマークアップします。ほとんどが段落単位での引用だと思いますので、<blockquote>は確実に覚えておいた方が良いです。

引用元を記載するために<cite></cite>も併せてマークアップしておきましょう。また、引用元の詳細情報を掲載する場合には<footer></footer>にまとめて記載することで、より明確になります。

ただし、<cite></cite>や、<footer></footer>は、確実にマークアップしなければいけないものではありません。引用元のリンクを記述しておくだけでも問題はないのです。