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

HTMLでblockquoteタグ（ブロッククォート）を使う方法をわかりやすく解説

blockquoteタグとは

<blockquote>タグは、他のソースから引用した長い文章（ブロックレベルの引用）を示すために使用されるHTML要素です。このタグで囲まれた部分は「引用セクション」として意味づけられ、多くのブラウザではインデント（字下げ）されて表示されます。

なお、<blockquote>タグの中に直接プレーンテキストを置くのは避け、<p>などのブロックレベル要素を含めてマークアップすることが推奨されています。

cite属性で引用元を指定する

<blockquote>タグにはcite属性が用意されており、HTMLドキュメント内で引用した情報の出典（URLなど）を指定できます。引用元を明示することで、コンテンツの信頼性やSEOの観点からもメリットがあります。

HTMLでblockquoteタグ（ブロッククォート）を使う方法をわかりやすく解説

使用例

以下のコードを実行して、HTMLでのblockquoteタグの基本的な使い方を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML blockquote tag</title>
   </head>

   <body>
      <h1>Drupal</h1>
      <p>Here is a quotation from Drupal’s official website</p>
      <blockquote cite="https://drupal.org">The Drupal project is open source software.
         Anyone can download, use, work on, and share it with others. It's built on
         principles like collaboration, globalism, and innovation.</blockquote>
   </body>
</html>

出力結果

上記のコードをブラウザで表示すると、引用部分がインデント付きで表示され、cite属性に指定したURLが出典として関連付けられます。

HTMLでblockquoteタグ（ブロッククォート）を使う方法をわかりやすく解説

補足：短い引用にはqタグを使い分ける

文中の短い引用には<q>タグが適しています。<blockquote>は段落単位の長い引用向け、<q>は行内の短い引用向けと使い分けることで、より正確なHTML構造を作成できます。


  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali