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<p>
She said <q>Practice every day</q> and closed the book.
</p>
Das Beispiel lesen
- Das äußere
pist Ihre Erzählung qumschließt nur die zitierte Phrase- Das schließende
qgibt den Rest des Satzes an normalen Fließtext zurück - Wäre dies ein langer mehrsätziger Auszug, wäre
blockquotedie 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<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<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 anblockquote
Wickeln Sie nicht eine ganze Seite in ein riesigesblockquote, nur um Text einzurücken. Einrückung ist Präsentation;blockquoteist 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
- Schreiben Sie einen Absatz mit einem kurzen
q-Zitat eines imaginären Coaches oder Lehrers. - Fügen Sie ein
blockquotemit zwei kurzen Sätzen aus einem imaginären Artikel hinzu. - Darunter eine Zeile mit dem
cite-Element für den Artikeltitel. - Optional setzen Sie
cite="https://example.com/article"amblockquote. - Speichern und öffnen Sie die Seite. Prüfen Sie, dass Inline- und Blockzitat unterscheidbar wirken.
- Ersetzen Sie vorübergehend
qdurch Plaintext und getippte Anführungszeichen, dann setzen Sieqzurü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
blockquoteohne echtes Zitat wickeln - Nur CSS oder getippte Zeichen nutzen, obwohl der Text wirklich zitiert ist und
q/blockquotebraucht - Den einzigen Quelltitel nur im
cite-Attribut ablegen und annehmen, Leser sähen ihn blockquoteohne klaren Grund inqverschachteln- Sich selbst zur Dekoration zitieren — diese Elemente für wirklich zitierte Worte aufbewahren
qoderblockquotenicht 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 anblockquote - 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
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 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