HTML <cite>

<cite>は他のサイト名や書籍名を表すHTMLタグです。cite要素の使い方をサンプルを交えてご紹介します。

書式

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。cite 要素の終了タグは省略できない。

<cite>
  <!-- phrasing content -->
</cite>
<CITE>
  <!-- phrasing content -->
</CITE>

サンプル

HTMLタグ <cite> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<blockquote>
  <p>
    The World Wide Web Consortium (W3C) is an international community
    that develops open standards to ensure the long-term growth of the Web.
  </p>
  <footer>
    <cite>
      <a href="https://www.w3.org/">World Wide Web Consortium</a>
    </cite>
  </footer>
</blockquote>

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

コンテンツモデル

cite 要素の開始タグと終了タグの間には、フレージング・コンテンツを含むことができる。具体的には、以下に示す要素である。

属性

以下に示す属性を cite 要素に指定できる。

accesskey
アクセスキー
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。
dir
文章が流れる方向
id
HTML文書内で一意な識別子を指定する。
lang
言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title
ツールチップに適切な、要素のためのアドバイザリ情報を指定する。サイトや書籍の脚注や解説となる。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて cite 要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー(読取り専用)
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか(読取り専用)
dataset DOMStringMap カスタムデータ属性
innerText string ノードに描画されるテキスト
dir
dir 属性
document.querySelector("cite").dir = "ltr";
draggable
draggable 属性
document.querySelector("cite").draggable = false;
lang
lang 属性
document.querySelector("cite").lang = "en";
style
style 属性
document.querySelector("cite").style = "color: gray";
tabIndex
tabindex 属性
document.querySelector("cite").tabIndex = 0;
title
title 属性
document.querySelector("cite").title = "example";

参考文献

Web Hypertext Application Technology Working Group (2023) Text-level semantics HTML Living Standard