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

HTML blockquote要素のcite属性で引用元を指定する方法

HTMLの<blockquote>要素におけるcite属性は、引用文の出典元(参照先のURL)を指定するために使用される属性です。
この属性により、引用した情報がどのページから来たものなのかを、意味的に明示することができます。

cite属性の基本構文

cite属性の基本的な書き方は以下のとおりです。

<blockquote cite="url">
    引用したいテキスト
</blockquote>

「url」の部分には、引用元となるページのアドレスを記述します。
なお、cite属性で指定したURLはブラウザ上には直接表示されませんが、検索エンジンや支援技術(スクリーンリーダーなど)が引用元の情報を正しく理解するうえで重要な役割を果たします。

実装例

それでは、<blockquote>要素のcite属性を実際に使った例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Magento</h2>
<p>公式サイトに記載されているMagentoについて:</p>
<blockquote cite="https://magento.com/products">
    Magento Commerceは、Adobe Commerce Cloudの一部として、エンタープライズ級のパワーと
    無制限のスケーラビリティ、そしてオープンソースならではの柔軟性を兼ね備えた、
    B2C・B2B両方に対応する唯一無二のeコマースソリューションを提供します。
    Magentoを活用すれば、売上向上が実証済みの、独自のフルライフサイクル顧客体験を構築できます。
</blockquote>
</body>
</html>

表示結果

このコードをブラウザで開くと、<blockquote>要素で囲まれたテキストがインデント(字下げ)されて表示され、通常の段落とは区別された「引用ブロック」として認識されます。

コードの解説

上記の例では、まず<blockquote>要素を使って引用文をマークアップしています。

<blockquote cite="https://magento.com/products">
    引用文...
</blockquote>

そして、引用元の出典はcite属性によって次のように指定しています。

cite="https://magento.com/products"

このようにcite属性を適切に設定することで、引用の信頼性を高め、コンテンツの意味的な構造をより正確に伝えることができます。長い引用文を掲載する際には、必ず出典を明示する習慣をつけるとよいでしょう。

  1. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに

  2. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動