<cite>

Zuletzt aktualisiert am 4. Februar 2026

Das <cite>-Element kennzeichnet den Titel eines zitierten Werks — also eines Buchs, Films, Songs, Artikels, Gemäldes oder einer anderen kreativen Arbeit. Browser stellen <cite> standardmäßig kursiv dar. Wichtig ist die Abgrenzung: <cite> ist für Werktitel, nicht für Personennamen oder Zitate selbst. Für Zitate gibt es <q> (inline) und <blockquote> (als Block). Und das cite-Attribut (bei <q> und <blockquote>) ist etwas anderes als das <cite>-Element — das Attribut enthält eine URL, das Element enthält einen Werktitel. Auf dieser Seite lernst du, wann du das <cite>-Element verwendest und wie es mit Zitaten zusammenspielt.

Grundlagen

In HTML gibt es einen wichtigen Unterschied: Das <cite>-Element und das cite-Attribut sind zwei verschiedene Dinge. Das Element umschließt einen Werktitel und macht ihn semantisch als solchen erkennbar. Das Attribut (bei <q> und <blockquote>) enthält eine URL zur Quelle.

• <cite> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <cite> standardmäßig kursiv (font-style: italic) dar
• Die semantische Bedeutung: “Dies ist der Titel eines kreativen Werks”
• Geeignet für: Buchtitel, Filmtitel, Songtitel, Gemälde, Skulpturen, Artikel, Blogposts, Gesetze, Normen, Spiele
• Nicht geeignet für: Personennamen, Firmennamen oder allgemeine Quellenangaben
• Das <cite>-Element macht den Werktitel für Suchmaschinen und assistive Technologien maschinenlesbar

Syntax

<p>Das Buch <cite>Clean Code</cite> von Robert C. Martin ist ein Klassiker.</p>

Beispiele

Verschiedene Werktypen

<cite> ist nicht nur für Bücher — es funktioniert für alle Arten von kreativen Werken:

<p>Das Buch <cite>Der Herr der Ringe</cite> wurde dreimal verfilmt.</p>
<p>Der Film <cite>Matrix</cite> hat die Science-Fiction verändert.</p>
<p>Das Gemälde <cite>Mona Lisa</cite> hängt im Louvre in Paris.</p>
<p>Der Song <cite>Bohemian Rhapsody</cite> dauert fast 6 Minuten.</p>

Zusammenspiel mit blockquote

Ein häufiges Muster: Ein Zitat mit <blockquote> und darunter die Quellenangabe mit <cite>. So wird sowohl das Zitat als auch die Quelle semantisch korrekt ausgezeichnet:

<blockquote>
  <p>Es ist nicht genug zu wissen, man muss auch anwenden.
  Es ist nicht genug zu wollen, man muss auch tun.</p>
</blockquote>
<p>— Johann Wolfgang von Goethe, <cite>Wilhelm Meisters Wanderjahre</cite></p>

Artikel und Blogposts referenzieren

Wenn du in einem Text auf einen Artikel oder Blogpost verweist, kannst du den Titel mit <cite> auszeichnen und optional einen Link hinzufügen:

<p>
  In dem Artikel
  <cite><a href="https://example.com/artikel">
    10 Tipps für besseres HTML
  </a></cite>
  werden die wichtigsten Best Practices zusammengefasst.
</p>
<p>
  Laut <cite>Web Almanac 2025</cite> verwenden
  über 90% aller Webseiten HTML5.
</p>

Barrierefreiheit

• Screenreader-Verhalten: Die meisten Screenreader behandeln <cite> wie normalen Text und kündigen es nicht gesondert an. Der Nutzer bemerkt die kursive Darstellung nicht. Das ist meistens in Ordnung, da der umgebende Text (z.B. “das Buch” oder “der Film”) den Kontext liefert.
• Kontext bieten: Ergänze den Werktitel mit einer Beschreibung des Werktyps, z.B. “das Buch Clean Code” statt nur “Clean Code”. So verstehen auch Screenreader-Nutzer, dass es sich um einen Werktitel handelt.
• Links in cite: Wenn du den Werktitel als Link darstellst (<cite><a href="...">Titel</a></cite>), profitieren alle Nutzer davon, da sie direkt zur Quelle navigieren können.

Häufige Fehler

• cite für Personennamen verwenden: <cite> ist für Werktitel, nicht für Autorennamen. Schreibe nicht <cite>Robert C. Martin</cite>, sondern Robert C. Martin, <cite>Clean Code</cite>. Die HTML-Spezifikation ist hier eindeutig: Nur Werktitel gehören in <cite>.

• cite-Element mit cite-Attribut verwechseln: Das <cite>-Element enthält einen Werktitel (Text). Das cite-Attribut (bei <q> und <blockquote>) enthält eine URL. Das sind zwei verschiedene Dinge, die sich ergänzen, aber nicht austauschbar sind.

• cite für Zitate statt Werktitel verwenden: Das Zitat selbst gehört in <q> oder <blockquote>, der Werktitel der Quelle in <cite>. Schreibe nicht <cite>Auch aus Steinen kann man etwas Schönes bauen.</cite> — das wäre ein Zitat, kein Werktitel.

Browser-Kompatibilität

Das cite-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Email-Kompatibilität

Das cite-Element wird in den meisten Email-Clients als kursiver Text dargestellt.

Verwandte Elemente