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

HTMLのqタグとは?短い引用を自動的に引用符で囲む方法を解説

HTMLの<q>タグは、文章中の短い引用(インライン引用)を表すために使用される要素です。このタグで囲まれたテキストには、ブラウザが自動的に二重引用符を挿入して表示します。長い引用文を独立したブロックとして扱う<blockquote>タグとは異なり、<q>タグは文中にそのまま埋め込めるのが特徴です。

qタグで使える主な属性

  • cite: 引用元のURLを指定します。出典となるページや資料へのリンク情報を設定することで、引用の信頼性を高めることができます。

それでは、<q>タグを使った具体的な実装例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Thoughts</h2>
    <p>Warren Buffett quoted,
    <q>It's better to hang out with people better than you. Pick out associates whose behavior is better than yours and you'll drift in that direction.</q></p>
    <p>Bill Gates quoted,
    <q>Your most unhappy customers are your greatest source of learning.</q></p>
</body>
</html>

表示結果

HTMLのqタグとは?短い引用を自動的に引用符で囲む方法を解説

上記の例では、HTMLの<q>タグを使用して複数の引用文を設定しています。

<p>Warren Buffett quoted,
<q>It's better to hang out with people better than you. Pick out associates whose behavior is better than yours and you'll drift in that direction.</q>

ご覧のとおり、引用したい部分を<q>タグで囲むだけで、ブラウザが自動的に引用符を追加して表示してくれます。引用符を手動で入力する必要がなく、セマンティックな意味を持たせながら効率的にマークアップできる点が大きなメリットです。また、cite属性を組み合わせれば、引用の出典URLも明示できます。

  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"