HTML 速習チュートリアル

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>短いインライン引用を定義します。