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

HTMLの引用タグの使い方を解説！q要素とblockquote要素の違いとは

HTMLには、他の情報源から引用した文章を適切に表現するための専用タグが用意されています。代表的なものが、短い引用を定義する<q>タグと、別ソースから引用したセクション全体を定義する<blockquote>タグです。

両者の大きな違いは要素の種類にあります。<q>タグはインライン要素として機能し、文章中に自然な形で引用文を埋め込めます。一方、<blockquote>タグはブロックレベル要素で、独立した引用ブロックとして表示されます。多くのブラウザでは、<q>タグで囲んだテキストには二重引用符（" "）が自動的に付与され、<blockquote>タグで囲んだテキストはインデントされて表示されるのが特徴です。

基本構文

HTMLで引用を表現する際の基本的な書き方は以下の通りです。

<q>引用文</q>

または

<blockquote>引用文</blockquote>

使用例

それでは、HTMLの引用タグを使った具体的なサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML Quotations</h1>
<q>I'm a quote element with some dummy text.</q>
<blockquote>I'm a block quote element with some dummy text.</blockquote>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、<q>タグで囲まれたテキストには二重引用符が自動的に付与され、<blockquote>タグで囲まれたテキストはインデント付きの独立したブロックとして表示されます。

HTMLの引用タグの使い方を解説！q要素とblockquote要素の違いとは

補足：引用元を示すcite属性

<q>タグおよび<blockquote>タグには、引用元のURLを指定するためのcite属性を設定できます。この属性値は画面上には表示されませんが、検索エンジンや支援技術にとって有益なメタデータとなります。また、引用元を読者に目に見える形で示したい場合は、<cite>タグを使って出典名や作品名を明記すると、より信頼性の高いコンテンツになります。

  1. HTML DOM Spanオブジェクトの使い方と作成方法をわかりやすく解説

    HTML DOMのSpanオブジェクトは、HTMLの<span>要素に対応するオブジェクトです。<span>要素は、文章の一部をグループ化してスタイルを適用したり、JavaScriptから動的に操作したりする際によく使われるインライン要素です。 JavaScriptでは、createElement()メソッドを使って新しいspan要素を生成でき、getElementById()メソッドを使えば、すでにページ上に存在するspan要素へアクセスすることができます。 構文 それぞれの操作を行うための基本的な構文は以下のとおりです。 spanオブジェクトを作成する場合 v

  2. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object