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

HTMLのq要素におけるcite属性の使い方を徹底解説

<q>要素のcite属性とは

<q>要素のcite属性は、引用文の出典（ソース）となるURLを設定するために使用します。ここで指定した出典情報はWebページ上には表示されませんが、スクリーンリーダーなどの支援技術を利用しているユーザーにとって有益な情報となります。

それでは、<q>要素のcite属性を実際に実装した例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>私たちの目標</h2>
<p>PETAによると、
    <q cite="https://legacy.peta.org/why-give/">私たちは世界最大の動物の権利擁護団体であり、
    世界中に650万人以上のメンバーとサポーターを抱えています。動物への虐待が
    発生しているあらゆる場所でそれを食い止めるために、皆様の継続的なご支援が必要です。</q>
</p>
</body>
</html>

出力結果

HTMLのq要素におけるcite属性の使い方を徹底解説

コードのポイント

上記の例では、<q>タグを使用して引用文をマークアップしています。

<p>PETAによると、
<q cite="https://legacy.peta.org/why-give/">私たちは世界最大の動物の権利擁護団体であり、世界中に650万人以上のメンバーとサポーターを抱えています。動物への虐待が発生しているあらゆる場所でそれを食い止めるために、皆様の継続的なご支援が必要です。
</q>

今回の引用文は公式ウェブサイトから取得したものであるため、引用として明示し、出典を適切にクレジットすることが重要です。そのためにcite属性を出典URLとともに次のように指定しています。

cite="https://legacy.peta.org/why-give/"

このようにcite属性を活用することで、コンテンツの信頼性を高めるとともに、アクセシビリティの向上にもつながります。他者のコンテンツを引用する際には、必ず出典を明記する習慣をつけましょう。

  1. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次

  2. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。