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

HTMLで引用符を使う方法をわかりやすく解説｜qタグとblockquoteタグの使い分け

HTMLで引用符を表示するには？

HTMLで短い引用文を表現したい場合は、<q>タグを使用します。このタグは、文章中に短い引用を挟み込みたいときに便利です。なお、引用が複数行にわたる長い文章になる場合は、<q>ではなく<blockquote>タグを使うのが適切です。

多くのブラウザでは、<q>要素で囲まれたテキストの前後に自動的に引用符（" "）が挿入されるため、開発者が手動で引用符を記述する必要はありません。

cite属性で引用元を示す

<q>タグにはcite属性を指定できます。この属性に引用元のURLを設定することで、その引用がどこから来たものなのかを明示できます。cite属性の値は画面上には表示されませんが、検索エンジンやスクリーンリーダーなどにとって有益な情報となります。

HTMLで引用符を使う方法をわかりやすく解説｜qタグとblockquoteタグの使い分け

コード例

それでは、実際に以下のコードを実行して、HTMLで引用符を追加する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML qタグのサンプル</title>
   </head>

   <body>
      <h1>Drupal</h1>
      <p>Drupalコミュニティは次のように述べています。</p>
      <q>Drupalは、コラボレーション、グローバリズム、
         イノベーションといった原則の上に構築されています。</q>
   </body>
</html>

出力結果

上記のコードをブラウザで表示すると、<q>タグで囲まれた部分が自動的に引用符付きで表示されます。

HTMLで引用符を使う方法をわかりやすく解説｜qタグとblockquoteタグの使い分け

まとめ

  • 短い引用には<q>タグを使う
  • 複数行にわたる長い引用には<blockquote>タグを使う
  • 引用元のURLはcite属性で指定できる

用途に応じてタグを使い分けることで、意味的に正しく、アクセシビリティにも配慮した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