HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのblockquoteタグとは？使い方とcite属性の指定方法を解説

HTMLの<blockquote>タグは、他のソース（外部サイトや文献など）から引用した一節を示すための要素です。主に長い引用文を定義する際に使用され、多くのブラウザではデフォルトでインデント（字下げ）されて表示されます。短い引用文を表したい場合は、代わりに<q>タグを使用しましょう。

blockquoteタグで使える属性

  • cite： 引用元（出典）のURLを指定します

それでは、実際にHTMLでblockquoteタグを実装した例を見ていきましょう。

使用例

<!DOCTYPE html>
<html>
<body>
<h2>osCommerce</h2>
<p>osCommerceの公式サイトには次のように書かれています。</p>
    <blockquote cite="https://www.oscommerce.com/Us">
       私たちは19年以上にわたって成功裏に運営され、世界中で数十万人のオンラインストアオーナーを輩出してきました。さらに、私たちの成果物をベースにした他の企業やプロジェクトの立ち上げも支援しています。コミュニティとともに大きく成長し、互いの成功を支え合うこのつながりを大切にしています。ぜひあなたも参加して、成功の一翼を担ってください！
    </blockquote>
</body>
</html>

出力結果

上記のコードでは、<blockquote>タグを使って引用文をマークアップしています。これにより、テキスト全体が「長い引用」として囲まれ、ブラウザ上では次のようにインデント付きで表示されます。

<blockquote cite="https://www.oscommerce.com/Us">
私たちは19年以上にわたって成功裏に運営され、世界中で数十万人のオンラインストアオーナーを輩出してきました。さらに、私たちの成果物をベースにした他の企業やプロジェクトの立ち上げも支援しています。コミュニティとともに大きく成長し、互いの成功を支え合うこのつながりを大切にしています。ぜひあなたも参加して、成功の一翼を担ってください！
</blockquote>

あわせて、<blockquote>タグにcite属性を指定することで、引用の出典となるURLも明示しています。

cite="https://www.oscommerce.com/Us"

ポイントまとめ

  • <blockquote>は長い引用向け、<q>は短い引用向けに使う
  • 引用元のURLはcite属性で指定できる
  • デフォルトではインデント表示されるため、CSSを使えば見た目を自由にカスタマイズ可能

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"