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 要素へアクセスできる。

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