2つの引用を表すセマンティックなタグ
「引用」を表すセマンティックなタグは2つあります。
この2つの違いはとてもシンプルで、引用する文章の長さで使い分けます。
<blockquote>：長い文章の引用
これは、段落など、まとまったブロックとして引用する場合に使います。ブラウザでは、引用部分がインデント（字下げ）されて表示されるのが一般的です。
- 用途：書籍やスピーチから、複数行にわたる文章を引用するときなど
- 属性：
cite属性を使って、引用元のURLを示すことができます・
<p>夏目漱石の有名な小説『草枕』の冒頭は、特に有名です。</p>
<blockquote cite="https://www.aozora.gr.jp/cards/000148/files/776_14941.html">
<p>山路を登りながら、こう考えた。</p>
<p>智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。</p>
</blockquote>
<q>：短い文章の引用
こちらは、文中の一文やフレーズなど、短い文章を引用する場合に使います。quote（引用符）の「q」になります。引用部分が自動的に引用符で囲まれて表示されます。
- 用途：会話ぶんや、他の文章から一部分だけを抜き出して自分の文章の中に入れるとき
<p>夏目漱石は自身の作品の中で<q>智に働けば角が立つ</q>と述べています。</p>
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0007</title>
</head>
<body>
<main>
<h1>2種類の引用の例</h1>
<h2>長い文章の引用</h2>
<blockquote cite="https://aozora.binb.jp/reader/main.html?cid=2343">
<p>世間ではもちろん、専門の学生の間でもまだどうかすると理学者の間ですら「相対性原理は理解しにくいものだ」という事に相場がきまっているようである。理解しにくいと聞いてそのためにかえって興味を刺激される人ももとよりたくさんあるだろうし、また謙遜ないしは聞きおじしてあえて近寄らない人もあるだろうし、自分の仕事に忙しくて実際暇のない人もあるだろうし、また徹底的専門主義の門戸に閉じこもって純潔を保つ人もあるだろうし、世はさまざまである。アインシュタイン自身も「自分の一般理論を理解しうる人は世界に一ダースとはいないだろう」というような意味の事を公言したと伝えられている。そしてこの言葉もまた人さまざまにいろいろに解釈されてもてはやされている。</p>
</blockquote>
<h2>短い文章の引用</h2>
<p>アインシュタインは<q>創造力は知識よりも重要だ。知識には限界があるが、創造力は世界を覆う。</q>と言ったらしい。</p>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>