HTML - 引用: ウェブコンテンツに深みと信頼性を加える

こんにちは、ウェブ開発者の卵さんたち！今日は、HTMLの引用に潜り込んでみましょう。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。信じてください、このレッスンが終わるまでには、シェイクスピアのようにHTMLで引用するスキルを身につけることでしょう！?

HTML - Quotations

HTML 引用タグリスト

始める前に、今日カバーするすべての引用関連タグを簡単に見てみましょう：

これらのタグを一つずつ詳しく見ていきましょう！

<q> タグは、短いインライン引用に最適です。引用タグの中ではスイスアーミーナイフのように - 小さいですが、非常に便利！

<p>シェイクスピアはかつて言いました、「生きるか、死ぬか、それが問題だ。」<q>To be or not to be, that is the question.</q></p>

ブラウザで表示すると以下のようになります：

シェイクスピアはかつて言いました、「生きるか、死ぬか、それが問題だ。」"To be or not to be, that is the question."

ブラウザは <q> タグ内のテキストの周りに引用符を自動で追加します。まるで小さな、勤勉な編集者が背後で働いているかのようです！

それでは、全文を引用したい場合はどうでしょうか？その際には、私たちの友 <blockquote> が便利です。これは <q> のbig brotherで、長い引用に対応しています。

<blockquote>
<p>二つの道が森で分かれて、私は—
私はより少しだけ歩かれた道を選んだ、
そしてそれがすべての違いを生み出した。</p>
</blockquote>

これは以下のようにインデントされたテキストブロックとして表示されます：

二つの道が森で分かれて、私は— 私はより少しだけ歩かれた道を選んだ、そしてそれがすべての違いを生み出した。

プロヒント：<blockquote> はウェブサイトのレビューに非常に適しています。引用を強調し、より重みを与えます！

引用をしたら、その人に敬意を表すのは公平ですよね？そのために <cite> タグを使用します。引用のソースを参照するために使用します。

<blockquote>
<p>素晴らしい仕事をする唯一の方法は、愛することを愛すること。</p>
<cite>スティーブ・ジョ布斯</cite>
</blockquote>

これは以下のように表示されます：

素晴らしい仕事をする唯一の方法は、愛することを愛すること。

— スティーブ・ジョ布斯

<cite> タグはデフォルトでイタリック体で表示されます。

その名前からは想像しにくいかもしれませんが、<address> タグはただの住所情報ではありません。ドキュメントや記事の作者の連絡先情報に使用されます。

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

これは以下のように表示されます：

Written by John Doe. Visit us at: Example.com Box 564, Disneyland USA

<address> タグはデフォルトでイタリック体で表示され、ブラウザは要素の前後に改行を追加します。

逆から書きたいことがあることはありませんか？<bdo>（双方向オーバーライド）タグを使えば、テキストの方向を操作できます！

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

これは以下のように表示されます：

This text will go left to right.

.tfel ot thgir og lliw txet sihT

dir 属性は "ltr"（左から右）または "rtl"（右から左）に設定できます。アラビア語やヘブライ語のような右から左に書かれる言語には特に便利です。

最後に、<abbr> タグがあります。略語やアクロニムを表現するために使用します。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

これは以下のように表示されます：

The WHO was founded in 1948.

そして、面白い部分はこちらです：\"WHO\"にカーソルを合わせると、全文 \"World Health Organization\" が表示されます。まるでウェブページに秘匿された解読器があるかのようです！

そして、ここまでにして、皆さんはHTMLの引用タグのツールキットを手に入れました。これらのタグはただのフォーマットではなく - コンテンツに意味と構造を加え、アクセシビリティとSEOに優れたものにします。

このレッスンを終えるにあたり、ある生徒が私に言った引用（ここで何をしているか気づきましたか？）を思い出しました、「HTMLは大人のレゴみたいだよ！」そして、彼は正しかったのです。各タグは異なるレゴブロックであり、あなたは素晴らしいウェブ構造を創造するマスター・ビルダーです。

それでは、引用、引用元、略語を存分に楽しんでください。そして、賢いウェブ開発者が言った不朽の言葉を忘れないでください：強力なHTMLの力には、大きな責任が伴う。快くコーディングを楽しんでください！?

Credits: Image by storyset