HTMLの引用タグ完全ガイド――blockquote・q・citeなどの正しい使い方

HTMLには、出典を引用したり、引用文を周囲のテキストと区別したりするための専用要素がいくつか用意されています。本記事では、HTMLの引用関連要素である<blockquote>、<q>、<abbr>、<address>、<bdo>、<cite>の6つを取り上げ、それぞれの特徴と適切な使い分け方を、具体的なコード例とともに解説します。

blockquote:長い引用文に使う

<blockquote>要素は、複数行にわたる長い引用テキストに使用します。この要素を使うことで、引用部分そのものを、前後の段落や他のHTML要素から明確に区別できます。以下は、ある有名な劇作家の有名な独白を使った例です。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   blockquote p {
     width: 80%;
     margin: 0px 20px;
     text-align: right;
   }
 </style>
 
</head>
 <body>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore.</p>
   <blockquote>
     "To be, or not to be: that is the question:
     Whether 'tis nobler in the mind to suffer
     The slings and arrows of outrageous fortune,
     Or to take arms against a sea of troubles,
     And by opposing end them?..."
     <p>&mdash;<em>Hamlet</em>, Act III, Scene I</p>
   </blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore.</p>
 </body>
</html>

q:短い引用文に使う

<q>要素は、短い引用文を引用符(" ")で囲んで表示します。<span>や<strong>と同様のインライン要素で、いわば「引用専用のタグ」です。引用文が複数行にわたる場合は、<q>ではなく<blockquote>を使用してください。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
 </style>
 
</head>
 <body>
    <p>
     The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q>
   </p>
 
 </body>
</html>

abbr:略語の定義に使う

文章の流れを妨げることなく略語の意味を定義したい場合に便利なのが、<abbr>タグです。これも<span>や<em>、<q>と同様のインライン要素です。略語の正式名称は、<abbr>タグのtitle属性内に記述します。多くのブラウザでは、マウスカーソルを要素に重ねると、定義がツールチップとして表示されます。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
 </style>
 
</head>
 <body>
   <abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China.
 </body>
</html>

address:連絡先情報の定義に使う

address要素は、個人または企業など、コンテンツ作成者の連絡先情報を定義します。具体的には、住所、メールアドレス、SNSのリンク、電話番号、個人サイトなど、連絡先に関わる情報全般が含まれます。

address要素内のテキストはイタリック体で表示され、要素の前後には自動的に改行が挿入されます。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
 </style>
 
</head>
 <body>
   <address>
     Written for Career Karma by Christina Kopecky<br />
     Other Articles:  <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/>
     Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br />
     Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br />
   </address>
 </body>
</html>

bdo:テキストの表示方向を制御する

右から左に読む言語(アラビア語やヘブライ語など)を扱う場合、手動で調整するよりも、テキストを自動的に右から左へ表示してくれるタグを使う方がはるかに簡単です。テキストの表示方向を上書き(双方向オーバーライド)するには、<bdo>要素を使用します。この要素は方向を指定するdir属性を持ち、デフォルト値は"ltr"(左から右)です。"rtl"を指定すると、テキストは右から左に表示されます。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
 </style>
 
</head>
 <body>
   <bdo dir="rtl">This renders Right-to-Left</bdo><br />
   <bdo>This renders Left-to-Right</bdo>
 
 </body>
</html>

cite:作品のタイトルに使う

最後に紹介するのがcite要素です。citeタグは、書籍・絵画・映画・楽曲などの創作物のタイトルを定義します。インライン要素であり、イタリック体で表示されるのが特徴です。

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body>
   <p>
     <cite>Mona Lisa</cite>, Leonardo da Vinci <br />
     <sup>The Louvre (since 1797)</sup>
   </p>
 
 </body>
</html>

まとめ

それでは、本記事の内容を振り返りましょう。今回は以下の6つの要素について学びました。

<blockquote> – 長い引用文に使用
<q> – 1行程度の短い引用文に使用
<abbr> – 文中の略語を定義するために使用
<address> – 作成者や著者の連絡先情報を定義するために使用
<bdo> – テキストを左から右、または右から左のどちらで表示するかを制御するために使用
<cite> – 創作物のタイトルを定義するために使用

HTMLには多くの引用関連要素があり、それぞれに適した用途が異なります。プロジェクトの目的に合った正しい要素を選び、適切に活用しましょう。

HTMLでスペースを挿入する方法｜・・・の違いと使い分け

HTMLでリンクを新しいタブで開く方法｜target="_blank"の使い方を解説

HTML DOM Bodyオブジェクトとは？基本概念から使い方まで徹底解説
HTML DOM Bodyオブジェクトの概要HTML DOM Bodyオブジェクトは、HTMLの<body>要素に関連付けられたオブジェクトです。bodyタグ内に設定された属性とその値は、子ノードによって上書きされない限り、HTMLドキュメント全体にわたって保持されます。Bodyオブジェクトを使用することで、これらのプロパティやその値へアクセスし、操作することができます。Bodyオブジェクトの主なプロパティ以下は、HTML DOM Bodyオブジェクトが持つ主なプロパティの一覧です。注意：以下のプロパティはHTML5ではサポートされていません。代わりにCSSを使用することが推奨さ
【初心者向け】HTMLのonerrorイベント属性の使い方を徹底解説
onerrorイベント属性とは？ HTMLのonerrorイベント属性は、HTMLドキュメント内で外部ファイル（画像やスクリプトなど）を読み込む際にエラーが発生したときにトリガーされるイベントハンドラです。例えば、<img>タグで指定した画像ファイルが存在しない場合や、パスの指定を間違えた場合などに、このonerrorイベントが発火します。エラー発生時に代替画像を表示したり、ユーザーへ通知したりする処理を組み込むことで、より堅牢なWebページを構築できます。なお、onerror属性は主に<img>、<script>、<link>などの外部リソ