<cite>

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.

Steckbrief <cite>

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

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

Beispiele

3 Beispiele

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

index.html

Verschiedene Werktypen

<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>

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:

index.html

Zitat mit Quellenangabe

<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>

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

index.html

Artikel referenzieren

<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

3 Punkte

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

3 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<cite>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter