HTML Zitate (engl.: HTML Quotations): In HTML gibt es zwei spezielle Tags, um Zitate zu markieren: <blockquote> für längere Blockzitate und <q> für kürzere, inline Zitate. Diese Tags helfen dabei, Zitate semantisch korrekt und optisch ansprechend zu formatieren.
1. Das <blockquote>-Tag
Das <blockquote>-Tag wird für längere Zitate verwendet, die oft als eigenständige Blöcke auf der Webseite angezeigt werden. Der Browser stellt Blockzitate typischerweise eingerückt dar, um sie vom restlichen Inhalt abzuheben.
Syntax:
<blockquote>
"Die einzige Grenze unserer Verwirklichung von morgen wird unser Zweifel von heute sein."
– Franklin D. Roosevelt
</blockquote>Dieses Zitat wird als Block formatiert und häufig eingerückt angezeigt. Zusätzlich kann das Blockzitat mit CSS angepasst werden.
Beispiel mit Quelle:
<blockquote>
"Der einzige Weg, großartige Arbeit zu leisten, ist zu lieben, was man tut."
<cite>– Steve Jobs</cite>
</blockquote>Das <cite>-Tag dient dazu, die Quelle eines Zitats anzugeben. Standardmäßig wird die Quelle häufig kursiv dargestellt, was jedoch mit CSS verändert werden kann.
Vollständiges Beispiel mit CSS:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockzitat Beispiel</title>
<style>
blockquote {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 20px;
font-style: italic;
color: #555;
}
cite {
display: block;
text-align: right;
margin-top: 10px;
color: #888;
}
</style>
</head>
<body>
<blockquote>
"Wissen ist Macht. Wissen zu teilen, ist noch mächtiger."
<cite>– Unbekannt</cite>
</blockquote>
</body>
</html>In diesem Beispiel wird das Zitat durch einen Rand auf der linken Seite hervorgehoben, und die Quelle wird rechtsbündig angezeigt.
2. Das <q>-Tag
Das <q>-Tag wird für kürzere Zitate im Fließtext verwendet. Der Browser fügt automatisch Anführungszeichen um den Text innerhalb des <q>-Tags hinzu.
Syntax:
<p>Albert Einstein sagte: <q>Phantasie ist wichtiger als Wissen.</q></p>Der Text “Phantasie ist wichtiger als Wissen.” wird hier als inline Zitat mit Anführungszeichen dargestellt.
Verschachtelte Zitate:
Es ist auch möglich, Zitate zu verschachteln, indem man ein <q>-Tag innerhalb eines anderen <q>-Tags verwendet. Der Browser wird dann unterschiedliche Anführungszeichen für das innere Zitat verwenden (in vielen Browsern einfache Anführungszeichen).
<p>Albert Einstein sagte: <q>Phantasie ist wichtiger als Wissen. <q>Wissen</q> ist begrenzt.</q></p>In diesem Fall wird das innere Zitat in einfache Anführungszeichen gesetzt.
3. Anpassung von Zitat-Anführungszeichen mit CSS
Mit CSS können Sie die Anführungszeichen von <q>-Tags anpassen. Die CSS-Eigenschaft quotes ermöglicht es Ihnen, die verwendeten Anführungszeichen zu ändern.
Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anführungszeichen ändern</title>
<style>
q {
quotes: "«" "»";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
</style>
</head>
<body>
<p>Albert Einstein sagte: <q>Phantasie ist wichtiger als Wissen.</q></p>
</body>
</html>In diesem Beispiel werden französische Anführungszeichen « » verwendet, anstatt der Standard-Anführungszeichen.
4. Das <cite>-Tag
Das <cite>-Tag wird verwendet, um die Quelle eines Zitats oder einer Referenz zu kennzeichnen. Es wird oft in Verbindung mit <blockquote> verwendet, um die Person oder das Werk, aus dem das Zitat stammt, anzugeben.
Beispiel:
<blockquote>
"Die besten Dinge im Leben sind nicht die, die man für Geld bekommt."
<cite>– Albert Einstein</cite>
</blockquote><cite> kann auch für Titel von Büchern, Filmen, Artikeln oder anderen Werken verwendet werden:
<p>Ich habe gerade <cite>Der Herr der Ringe</cite> gelesen.</p>Standardmäßig wird der Inhalt des <cite>-Tags kursiv dargestellt.
Häufige Fragen zu HTML-Zitaten
Was ist der Unterschied zwischen <blockquote> und <q>?
<blockquote> wird für längere Zitate verwendet, die einen ganzen Block einnehmen, während <q> für kürzere Zitate gedacht ist, die inline im Fließtext stehen.
Werden bei <q> automatisch Anführungszeichen hinzugefügt?
Ja, der Browser fügt automatisch Anführungszeichen zum Text innerhalb des <q>-Tags hinzu. Die Art der Anführungszeichen kann jedoch mit CSS geändert werden.
Wie gebe ich die Quelle eines Zitats an?
Die Quelle eines Zitats wird mit dem <cite>-Tag angegeben. Es kann sowohl in Verbindung mit <blockquote> als auch für Titel von Werken verwendet werden.
Kann ich das Layout von Blockzitaten anpassen?
Ja, Sie können das Layout von Blockzitaten mit CSS anpassen, zum Beispiel durch Einzüge, Ränder oder andere stilistische Änderungen.
Können <blockquote> und <q> verschachtelt werden?
Ja, Sie können sowohl <blockquote>-Tags als auch <q>-Tags verschachteln, um verschachtelte Zitate zu erstellen. Der Browser fügt dabei automatisch unterschiedliche Anführungszeichen hinzu (einfache und doppelte Anführungszeichen).