スキップしてメイン コンテンツに移動

些細な日常

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

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

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

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

参考サイト

コメント

最近の投稿

日付: 

Bardの事実認識の2023年9月の更新の実力の確認

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...