サイト作成の引用のための三つのHTMLタグ／blockquoteとqとciteについて

ホームページやブログで何かの作品を他から引用する場合にHTMLで専用のマークアップを行うとデザインが付け易いし、訪問者と検索エンジンに分かり易く表現できるので、喜びながらアクセスアップにも繋がるのではないかといつも使うようにしているんだ。

引用のためのHTMLタグは三つあってblockquoteとqとciteという。

blockquoteとqが作品を対象として使い方は段落を取るか取らないかで分けられて内容的には長いか短いに等しい。本文で独立して作品を長めに引用したい場合にblockquoteが適している。個々の段落に埋め込むように短めに引用したい場合にはqが適しているとなる。

citeは作品名に使うのがHTML5の基本になっている。バージョンがHTML4だと作品名と作者名にも使っていたらしい。仕様変更で細かく区別されてHTML5で作者名の引用タグは特に定められてない。

blockquoteタグについて

マークアップ

<blockquote>内容</blockquote>

デザイン

引用文。
引用文。
引用文。

blockquoteタグを使うとブラウザで一般的には数文字分のインデントが挿入される。

付加的な機能

HTMLの属性としてciteを追加すると出典のURLか情報を検索エンジンに示すことができる。要素の引用のためのciteと表記が同じだけれども機能は違うから紛らわしいし、注意しなくてはならない。

<blockquote cite="出典のURLか情報">引用文</blockquote>

HTML5ではblockquoteタグの内側にfooterタグで作品名や作者名を囲っておくと引用文と関連付けて出典として検索エンジンに示すこともできる。

<blockquote>引用文<footer>出典</footer></blockquote>

footerタグは必ずしも引用文の下に置かなければならないわけではなくて引用文の上でも構わない。

追記：2021年にHTMLの標準がHTML5からHTML Living Standardに変更されてからfooterタグがblockquoteタグの出典に使えなくなり、代わりにfigureタグでblockquoteタグを囲った前後にfigcaptionタグを使って記載しなくてはならなくなった。

qタグについて

マークアップ

<q>内容</q>

デザイン

調べると引用文と見付かった。

qタグを使うとブラウザで一般的には二重引用符が付けられるけれどもサイトのHTML要素にlang="ja"と日本語が指定されていると鉤括弧に変わる。

付加的な機能

blockquoteタグと同じようにcite属性によって検索エンジンに出典のURLを示すことができる。

<q cite="出典のURL">引用文</q>

citeタグについて

マークアップ

<cite>内容</cite>

デザイン

作者の作品を考えてみたい。

citeタグを使うとブラウザで一般的には斜体で表示される。

付加的な機能

HTML5ではblockquoteタグの内側でfooter要素を使うのと同じように出典を引用文と関連付けて検索エンジンに示すことができる。

<blockquote>引用文<cite>出典</cite></blockquote>

繰り返しになるけれどもHTML5では作品名にしかciteタグは使用しない。それ以前のバージョンのHTML4では作者名にも使われていたし、サイトが採用しているマークアップそのものによって許容範囲が変わるので、気を付けておきたい。

引用のためのHTMLタグは別に使わなくても大丈夫だと思うし、サイト作成で行空けや括弧付きや斜体などはデザインから表示してもおよそ変わらないので、マークアップを正確に纏めるかどうか、コンテンツに必要な部分が数多く出て来るとタグ付けの作業も大変になってしまうし、好みで取り入れれば良いのではないか。

参考サイト

• HTMLで引用タグを使う方法【初心者向け】