HTML <cite> Tag
Der HTML <cite> Tag kennzeichnet den Titel eines kreativen Werkes wie Buch, Film oder Lied. Verwendung, Attribute und Beispiele.
Das <cite>-Tag kennzeichnet den Titel eines kreativen Werkes — eines Buches, Aufsatzes, Liedes, Films, Gemäldes, einer Skulptur, einer Fernsehsendung, einer Website und so weiter. Es ist ein inline (text-level) semantisches Element: Es teilt dem Browser und der assistiven Technologie mit, dass der enthaltene Text ein referenziertes Werk ist, kein gewöhnlicher Text.
Verwende das <blockquote>-Element für lange Zitate und das <q>-Element für kurze, inline Zitate.
Das <cite>-Element vs. das cite-Attribut
Diese beiden sind leicht zu verwechseln, da sie denselben Namen tragen, aber unterschiedliche Aufgaben erfüllen:
- Das
<cite>-Element umschließt den Titel eines Werkes als Text auf der Seite (zum Beispiel<cite>The Lord of the Rings</cite>). Es ist für Leser sichtbar. - Das
cite-Attribut ist etwas anderes — es nimmt eine URL entgegen, die auf die Quelle eines Zitats verweist, und es steht auf den Elementen<blockquote>und<q>(zum Beispiel<blockquote cite="https://example.com/source">). Es sind Metadaten; die meisten Browser zeigen es nicht an.
Kurz gesagt: Das Element benennt das Werk, das Attribut verlinkt auf die Quell-URL.
Soll <cite> den Namen des Autors enthalten?
Die Spezifikationen sind leicht unterschiedlicher Meinung. Die ältere W3C HTML 5.2 Spezifikation erlaubt es, dass eine Quellenangabe den Namen des Autors enthält. Der aktuelle WHATWG HTML Living Standard besagt, dass <cite> nur den Titel des Werkes enthalten sollte, nicht den Namen des Autors.
In der Praxis folge der WHATWG-Empfehlung: Schreibe den Titel in <cite> und den Namen des Autors als einfachen Text außerhalb davon.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Syntax
Das <cite>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden <cite>- und dem schließenden </cite>-Tag geschrieben.
Beispiel des HTML <cite>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Michelangelo sculpted <cite>David</cite> between 1501 and 1504.</p>
</body>
</html><cite> mit einem Zitat kombinieren
Ein gängiges, vollständiges Muster besteht darin, eine Quelle mit <blockquote> zu zitieren (mithilfe des cite-Attributs für die Quell-URL) und das Werk mit dem <cite>-Element zu benennen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://www.gutenberg.org/ebooks/2701">
<p>Call me Ishmael.</p>
</blockquote>
<p>— from <cite>Moby-Dick</cite> by Herman Melville</p>
</body>
</html>Derselbe Gedanke funktioniert inline mit <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Barrierefreiheit
<cite> trägt semantische Bedeutung: Es identifiziert den Titel eines referenzierten Werkes, sodass Screenreader und andere Tools es erkennen können. Greife nicht zu <i> oder einer CSS-Regel font-style: italic, nur um einen Titel kursiv darzustellen — das kursive Aussehen ist präsentational, während <cite> vermittelt, was der Text ist. Die Bedeutung ist entscheidend; die Formatierung ist zweitrangig und kann frei geändert werden.
Attribute
Das <cite>-Element hat keine elementspezifischen Attribute. Es unterstützt die Global Attributes und die Event Attributes.
Beachte, dass <cite> kein href unterstützt. Um einen Titel mit seiner Quelle zu verlinken, schreibe <cite> innerhalb eines <a>-Elements:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p><cite> gestalten
Standardmäßig rendern Browser <cite>-Text kursiv. Du kannst dies mit der CSS font-style-Eigenschaft ändern:
cite {
font-style: normal;
}Verwandte inline semantische Elemente
<q>— ein kurzes inline Zitat mit einemcite-Attribut für die Quell-URL.<abbr>— kennzeichnet eine Abkürzung oder ein Akronym.<dfn>— kennzeichnet die definierende Verwendung eines Begriffs.