【HTML】blockquote要素の使い方【引用文であることを示します】

Program

長い文章を引用するときは、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 ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
blockquote要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、blockquote要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました