HTML 引用と出典の要素
このセクションでは、<blockquote>、<q>、<abbr>、<address>、<cite>、および <bdo> というHTML要素について解説します。
1. HTML <blockquote> (長文の引用)
HTMLの <blockquote> 要素は、別のソースから引用されたセクションを定義します。
ブラウザは通常、<blockquote> 要素の内容をインデント(字下げ)して表示します。
<p>以下は、WWFのウェブサイトからの引用です:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
50年以上にわたり、WWFは自然の未来を守ってきました。
世界をリードする保全団体であるWWFは、100カ国近くで活動し、
600万人近い会員に支えられています。
</blockquote>2. HTML <q> (短文のインライン引用)
HTMLの <q> タグは、短文のインライン(行内)引用を定義します。
ブラウザは通常、引用文の周囲にクォーテーションマーク(引用符)を自動的に挿入します。
<p>WWFの目標は:<q>自然環境の劣化を食い止めること</q>です。</p>3. HTML <abbr> (略語)
HTMLの <abbr> タグは、「HTML」、「CSS」、「Mr.」、「Dr.」などの略語や頭字語を定義します。
略語をマークアップすることで、ブラウザ、翻訳システム、検索エンジンに有用な情報を提供できます。
title 属性を使用すると、要素の上にマウスを置いたときに、略語の正式名称(フル記述)をツールチップとして表示させることができます。
<p><abbr title="World Health Organization">WHO</abbr> は1948年に設立されました。</p>4. HTML <address> (連絡先情報)
HTMLの <address> タグは、ドキュメントや記事の作成者/所有者の連絡先情報を定義します。
連絡先情報には、メールアドレス、URL、物理的な住所、電話番号、SNSのハンドルネームなどを含めることができます。
<address> 要素内のテキストは、通常イタリック(斜体)でレンダリングされ、ブラウザは常に要素の前後に改行を挿入します。
<address>
作成者:田中 太郎<br>
ウェブサイト:<a href="https://example.com">example.com</a><br>
住所:<br>
東京都千代田区1-2-3<br>
日本
</address>5. HTML <cite> (作品のタイトル)
HTMLの <cite> タグは、クリエイティブな作品(例:書籍、論文、曲、映画、絵画、彫刻など)のタイトルを定義します。
[!NOTE]
人の名前は作品のタイトルではないため、<cite>に含めるべきではありません。
<cite> 要素内のテキストは、通常ブラウザによってイタリックで表示されます。
<p><cite>叫び (The Scream)</cite> エドヴァルド・ムンク作。1893年。</p>6. HTML <bdo> (文字方向の上書き)
HTMLの <bdo> は「Bi-Directional Override」の略です。
<bdo> タグは、現在のテキストの方向を強制的に上書きするために使用されます。dir 属性に rtl (Right-to-Left) を指定すると、テキストが右から左へ逆向きに表示されます。
<bdo dir="rtl">この文章は右から左へと表示されます</bdo>7. HTML 引用・出典要素のまとめ
| タグ | 説明 |
|---|---|
<abbr> | 略語または頭字語を定義します。 |
<address> | 作成者/所有者の連絡先情報を定義します。 |
<blockquote> | 別のソースから引用されたセクションを定義します。 |
<bdo> | テキストの方向を上書きします。 |
<cite> | 作品のタイトルを定義します。 |
<q> | 短いインライン引用を定義します。 |