HTML q: Inline-Zitate, cite-Quellen und Anführungszeichen

Das HTML-q-Element markiert ein kurzes Zitat innerhalb eines Satzes. Browser fügen normalerweise automatisch Anführungszeichen hinzu, und das cite-Attribut kann die Quell-URL speichern. Dieses Attribut erstellt keinen anklickbaren Quellenlink, daher sollte im Text ein separater Link bereitgestellt werden, wenn die Leser einen benötigen.

Wie sich q, blockquote und cite unterscheiden

Verwenden Sie q, wenn Sie Wörter aus einer anderen Quelle innerhalb des Fließtextes zitieren. Für ein separates Zitat, das mehrere Absätze enthält, verwenden Sie ein Blockzitat mit blockquote. Verwenden Sie q nicht, nur um ein Wort hervorzuheben oder ironische Anführungszeichen hinzuzufügen.

Ein komplettes Beispiel mit einer Quelle und verschachteltem Zitat

Speichern Sie den vollständigen Code unten als inline-quote.html und öffnen Sie ihn in einem Browser. Das erste Zitat ist eine kurze Phrase aus dem HTML-Standard. Das zweite ist ein fiktiver Dialog, der verfasst wurde, um verschachtelte Anführungszeichen zu demonstrieren. Kein Server oder JavaScript ist erforderlich.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q und Zitatquellen</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Kurze Zitate und Quellen</h1>
  <p>Der HTML-Standard beschreibt den von q dargestellten Inhalt als <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Quelle: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Erfundener Dialog: Der Schüler sagte: <q>Auf dem Schild steht <q>Bitte schließen Sie die Tür</q></q>.</p></body>
</html>

Das erste Zitat bleibt im selben Absatz wie die umgebende Erklärung und ist in Anführungszeichen gesetzt. Im fiktiven Dialog umschließen doppelte Anführungszeichen das äußere Zitat und einfache Anführungszeichen das innere Zitat. Der verlinkte Quellentitel erscheint in einem eigenen Absatz; die Adresse im cite-Attribut von q wird nicht automatisch angezeigt.

Vermeiden Sie das Hinzufügen doppelter Anführungszeichen

Wenn Sie Anführungszeichen unmittelbar vor, nach oder innerhalb von q eingeben, um dasselbe Zitat zu umschließen, können sie die vom Browser erzeugte Interpunktion duplizieren. Das Beispiel setzt nur die zitierten Wörter in q und lässt die Anführungszeichen vom Browser setzen. Sie können Anführungszeichen auch manuell im Klartext ohne q schreiben, aber kombinieren Sie nicht beide Anführungszeichensätze für dasselbe Zitat.

Die Standardzeichen können je nach Sprache des Dokuments oder Elements und den Stilen des Browsers variieren. Die CSS-quotes-Regel des Beispiels legt die äußeren und inneren Paare explizit fest, damit Sie die Ergebnisse klar vergleichen können. Entfernen Sie diese Regel, um die Standardwerte zu vergleichen, und stellen Sie sie dann wieder her. Das Ändern des Aussehens entfernt nicht die Bedeutung des q-Elements als Zitat.

Stellen Sie die Quelle den Lesern zur Verfügung

Das cite-Attribut ist optional. Verwenden Sie eine Adresse, die den Originalabschnitt oder seinen Kontext bereitstellt, und nicht eine nicht verwandte Startseite. Wenn die Leser das Original lesen müssen, stellen Sie außerdem ein a-Element mit einem spezifischen Linktext zur Verfügung, wie im Beispiel. Kopieren Sie die überprüfte Formulierung genau und unterscheiden Sie das Zitat von Ihrer eigenen Erklärung.

Gehen Sie nicht davon aus, dass jeder Screenreader Definition von q im HTML-Standardnfang und Ende eines q-Zitats auf dieselbe Weise ansagt. Wenn die Zuschreibung wichtig ist, sollte der Satz selbst angeben, wer was gesagt hat, etwa: „Der Standard beschreibt …“. Definitionen und Nutzungsbedingungen finden Sie in der Definition von q im HTML-Standard und in der MDN-Referenz zu q.