Lädt...

HTML-Zitate

Sie haben bereits Wichtigkeit und Betonung mit Formatierungs-Tags markiert. Zitate sind etwas anderes: Sie wiederholen fremde Worte (oder eine Passage aus einem Werk), und HTML sollte das klar sagen. Eigene Zitatelemente helfen Browsern, Hilfstechnologien und Lesern, ein Zitat vom umgebenden eigenen Text zu unterscheiden — etwas, das dekorative Anführungszeichen allein nicht vollständig vermitteln. Wenn die Bedeutung im richtigen Element steckt, bleibt der Inhalt für Menschen und Maschinen nachvollziehbar, auch wenn sich das Aussehen später ändert.

Was zählt in HTML als Zitat?

Ein Zitat ist Text, den Sie als Aussage einer anderen Person, eines Autors oder einer Quelle präsentieren. Es kann eine kurze Phrase in Ihrem Satz sein oder eine längere Passage als eigener Block. HTML bietet q für den kurzen Inline-Fall und blockquote für den längeren Blockfall. Zusätzliche Werkzeuge helfen bei Quellen: das cite-Element für einen sichtbaren Werktitel und ein cite-Attribut an blockquote für eine maschinenlesbare Quell-URL. Ziel ist nicht nur Optik, sondern die ehrliche Kennzeichnung, dass diese Worte einer Quelle zugeschrieben werden und nicht in dem Moment Ihre freie Formulierung sind.

Direkte Antwort

Verwenden Sie q für ein kurzes Zitat in einem Satz. Verwenden Sie blockquote für einen längeren zitierten Abschnitt, der für sich steht. Nennen Sie Werk oder Artikel mit dem cite-Element im sichtbaren Text, wenn das Lesern hilft. An blockquote können Sie außerdem cite="https://…" auf eine Quell-URL setzen — diese URL ist für Maschinen und erscheint meist nicht allein als lesbarer Titel. Kurz: wählen Sie das Element nach Länge und Position des Zitats, und ergänzen Sie bei Bedarf eine sichtbare Quellenangabe, damit die Quelle nicht nur in einem Attribut versteckt bleibt.

Zitat-Werkzeuge auf einen Blick

📊 q, blockquote und cite

Werkzeug Rolle Typischer Ort
q Kurzes Inline-Zitat In einem Absatz oder Satz
blockquote Längere zitierte Passage Eigener Block, oft mit verschachtelten p
cite-Element Werktitel im sichtbaren Text Fließtext nahe dem Zitat
cite-Attribut Quell-URL für ein blockquote Am öffnenden blockquote-Tag

Kurze Inline-Zitate mit q

Wenn die zitierten Worte in Ihrem eigenen Satz sitzen, umschließen Sie sie mit q. Die meisten Browser fügen Anführungszeichen für Sie hinzu. Sie schreiben weiterhin die gesprochenen oder geschriebenen Worte zwischen die Tags; typografische Anführungszeichen tippen Sie meist nicht von Hand. Das Element passt zu einer kurzen zitierten Aussage oder einem bekannten Satz in Ihrer Erzählung — nicht zu einem ganzen kopierten Artikel. Wenn das Zitat mehrere eigenständige Sätze umfasst, greifen Sie besser zu blockquote, statt unnötig viele q zu stapeln.

Inline-Zitat mit q

html
HTML Code
<p>
She said <q>Practice every day</q> and closed the book.
</p>

Das Beispiel lesen

  • Das äußere p ist Ihre Erzählung
  • q umschließt nur die zitierte Phrase
  • Das schließende q gibt den Rest des Satzes an normalen Fließtext zurück
  • Wäre dies ein langer mehrsätziger Auszug, wäre blockquote die bessere Wahl
  • Die Bedeutung „dies sind zitierte Worte“ steckt im Element, nicht allein in der Schriftgestaltung

Längere Passagen mit blockquote

Nutzen Sie blockquote, wenn das Zitat lang genug ist, um als eigener Block zu stehen — oft ein oder mehrere Absätze. Legen Sie den zitierten Inhalt in das blockquote. Ein cite-Attribut kann die Quell-URL speichern. Setzen Sie einen menschenlesbaren Werktitel mit dem cite-Element in sichtbaren Text, meist nahe am Zitat. Viele Sites rücken blockquote standardmäßig ein; dieser Einzug ist nur Darstellung. Verwenden Sie das Element nicht nur, um Text „einzurücken“, wenn Sie gar nicht zitieren.

Blockzitat mit Quell-URL

html
HTML Code
<blockquote cite="https://example.com/tips">
<p>Clear HTML is easier to maintain than clever HTML.</p>
<p>Readers thank you for structure they can trust.</p>
</blockquote>

Warum das cite-Attribut allein nicht reicht

Das cite-Attribut hilft Werkzeugen und Prüfprogrammen, die Quell-URL zu kennen. Viele Besucher sehen Attributwerte nie. Geben Sie Menschen zusätzlich eine lesbare Quellenzeile. Die Kombination aus Attribut (für Maschinen) und sichtbarem Titel mit dem cite-Element (für Menschen) deckt beide Bedürfnisse ab, ohne die Rollen zu vermischen. Ein Titel nur im Absatz ohne URL kann für Leser reichen; eine URL ohne sichtbaren Titel lässt Menschen die Zuschreibung oft vermissen.

Sichtbarer Quelltitel mit cite

html
HTML Code
<p>Source: <cite>Example Tips</cite></p>

q oder blockquote wählen

Stellen Sie zwei Fragen: Wie lang ist das Zitat? Unterbricht es einen Satz oder steht es allein?

  • Kurze Phrase in Ihrem Satz → q
  • Längere Passage als eigener Block → blockquote
  • Titel eines Buchs, Artikels oder einer Site im Fließtext → cite-Element
  • URL der Quelle für ein Blockzitat → cite-Attribut an blockquote
    Wickeln Sie nicht eine ganze Seite in ein riesiges blockquote, nur um Text einzurücken. Einrückung ist Präsentation; blockquote ist für echte Zitate. Wenn Sie beides vermischen, verwirren Sie Leser und Hilfstechnologien — die Seite wirkt dann „komplett zitiert“, obwohl der Großteil Ihr eigener Text ist. Bleiben Sie bei Länge und Position als einfachen Kriterien und ergänzen Sie bei Bedarf die sichtbare Zuschreibung.

Bedeutung versus Anführungszeichen nur aus CSS

Sie können Zeichen mit CSS oder getippten "-Zeichen vortäuschen. Für ein echtes Zitat bevorzugen Sie q oder blockquote, damit das Dokument die Bedeutung markiert. Visuelle Zeichen können trotzdem erscheinen — Browser stylen q oft mit Anführungszeichen —, aber das Element trägt die Rolle auch dann, wenn ein Stylesheet das Aussehen später ändert. Reine Dekoration kann verschwinden oder je nach Gerät anders wirken; die semantische Rolle in HTML bleibt klarer und stabiler für maschinelles Lesen und Barrierefreiheit.

Übung in Ihrem Editor

  1. Schreiben Sie einen Absatz mit einem kurzen q-Zitat eines imaginären Coaches oder Lehrers.
  2. Fügen Sie ein blockquote mit zwei kurzen Sätzen aus einem imaginären Artikel hinzu.
  3. Darunter eine Zeile mit dem cite-Element für den Artikeltitel.
  4. Optional setzen Sie cite="https://example.com/article" am blockquote.
  5. Speichern und öffnen Sie die Seite. Prüfen Sie, dass Inline- und Blockzitat unterscheidbar wirken.
  6. Ersetzen Sie vorübergehend q durch Plaintext und getippte Anführungszeichen, dann setzen Sie q zurück — achten Sie auf den Unterschied zwischen Markup-Rolle und bloßer Dekoration.
    Wiederholen Sie die Übung mit verschiedenen Quelltiteln, bis der Unterschied zwischen Element und Attribut selbstverständlich wird. Achten Sie auch darauf, Tags korrekt zu schließen, damit Folgetext nicht fälschlich als Zitat markiert bleibt.

Fehler, die Zitate verwischen

  • Eine ganze Seite in ein riesiges blockquote ohne echtes Zitat wickeln
  • Nur CSS oder getippte Zeichen nutzen, obwohl der Text wirklich zitiert ist und q / blockquote braucht
  • Den einzigen Quelltitel nur im cite-Attribut ablegen und annehmen, Leser sähen ihn
  • blockquote ohne klaren Grund in q verschachteln
  • Sich selbst zur Dekoration zitieren — diese Elemente für wirklich zitierte Worte aufbewahren
  • q oder blockquote nicht schließen, sodass späterer Text als Zitat markiert bleibt
    Jeder dieser Fehler schwächt Vertrauen oder vermischt Darstellung mit Bedeutung. Lesen Sie die Seite mit den Augen eines Besuchers: Ist klar, wo Ihr Text endet und der Quelltext beginnt? Ist die sichtbare Zuschreibung dort, wo Menschen sie brauchen?

Zusammenfassung

  • Kurze Zitate in einem Satz → q
  • Längere Zitatblöcke → blockquote
  • Sichtbare Werktitel → cite-Element
  • Optionale Quell-URL → cite-Attribut an blockquote
  • Markieren Sie echte Zitate in HTML; verlassen Sie sich für die Bedeutung nicht nur auf Styling
  • Bleiben Sie ehrlich: Nutzen Sie die Elemente, wenn Sie tatsächlich eine Quelle zitieren
    In dieser Reihenfolge bauen Sie klarere Seiten für Menschen und Werkzeuge, trennen Dekoration von Bedeutung und halten die lesbare Zuschreibung dort, wo Besucher sie erwarten.

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt