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

HTMLで引用・削除・挿入テキストの出典URLを表示する方法【cite属性の使い方】

HTMLには、引用や編集履歴に関する情報を補足するためのcite属性が用意されています。この属性を使うと、テキストがどこから引用されたのか、あるいはなぜそのテキストが削除・挿入されたのかを説明するURLを指定できます。

cite属性とは？

cite属性は、<q>（短い引用）、<blockquote>（ブロック引用）、<del>（削除されたテキスト）、<ins>（挿入されたテキスト）などの要素と組み合わせて使用されます。属性値には、出典となる文書や編集理由を説明するページのURLを指定します。

なお、cite属性で指定したURLはブラウザ上に直接表示されません。しかし、検索エンジンやスクリーンリーダーなどの支援技術がこの情報を参照できるため、コンテンツの信頼性やアクセシビリティの向上につながります。

実装例

以下のコードは、<q>要素にcite属性を指定して、引用元のURLを示す例です。

<!DOCTYPE html>
<html>
   <body>
      <h3>WordPressの定義</h3>
      <q cite = "https://wordpress.org/">
      WordPressは、美しいウェブサイト、ブログ、アプリを作成するために利用できるオープンソースソフトウェアです。</q>
   </body>
</html>

ポイントまとめ

  • cite属性の値には出典元のURLを記述する
  • URLは画面上には表示されないが、機械可読なメタデータとして機能する
  • 引用元を明示することで、コンテンツの信頼性が高まる

引用や編集履歴の出典を正しくマークアップすることは、SEOやアクセシビリティの観点からも重要です。ぜひcite属性を活用してみてください。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. 【HTML】ins要素のcite属性の使い方をわかりやすく解説

    <ins>要素のcite属性は、テキストを挿入した理由を示すURLを設定するために使用します。挿入の根拠となるドキュメントへの参照を明示することで、編集の意図を他の人にも分かりやすく伝えることができます。 構文 <ins cite=url> 上記の「url」には、テキストを挿入した理由を説明するドキュメントのアドレスを指定します。 使用例 それでは、<ins>要素のcite属性を実装した具体例を見ていきましょう。 <!DOCTYPE html> <html> <body> <h1>デモ見出し</h1>