長い文章を引用するときは、blockquote要素を使いましょう。
blockquote要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>blockquote要素</title>
</head>
<body>
<p>川端康成の「雪国」は、次の有名な書き出しで始まります。</p>
<blockquote cite="http://example.com/yukiguni.html">
国境の長いトンネルを抜けると雪国であった。
夜の底が白くなった。信号所に汽車が止まった。
</blockquote>
</body>
</html>
body要素の中に、文の段落を示すp要素と、引用文であることを示すblockquote要素があります。
p要素の中には、『川端康成の「雪国」は、次の有名な書き出しで始まります。』との文章があり、以下に引用文が表示されることを示唆しています。
blockquote要素では、『国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。』といった、小説「雪国」の冒頭の書き出しがマークアップされています。
このため、ブラウザでの表示結果の通り、p要素でマークアップされた文章に続いて、「雪国」の書き出しの文章がインデントされた状態で表示され、引用文であることが示されています。
また、blockquote要素では、cite属性を用いて、引用文の引用元の文書のURLを指定しています。
これにより、cite属性で指定されたURLはブラウザに表示されることはないものの、URLの情報はクローラーによって補足され、検索エンジンのサーバーに収集されます。
各種ブラウザでの表示結果
blockquote要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
| 【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
| blockquote要素 | ○ | ○ | ○ | ○ | ○ | ○ |
以上、blockquote要素の使い方について、ご参考になさってください。
