Blockzitate und einfache Zitate im HTML5
Text mit Blockzitaten auszeichnen im HTML5
Sie können Zitate von Fremdautoren in einem eigenen Absatz hervorheben. Das können Zitate von »weit entfernten« Quellen sein. Innerhalb eines Forums oder in Kommentaren zu einem Blog-Artikel lassen sich aber auch Passagen aus anderen Postings, auf die sich ein Kommentar bezieht, als Blockzitate auszeichnen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<blockquote cite="https://de.wikipedia.org/wiki/Zitat">
Die Verwendung von Zitaten ist durch das Urheberrecht geregelt und unter bestimmten Voraussetzungen gestattet, ohne dass eine Erlaubnis des Urhebers eingeholt oder diesem eine Vergütung gezahlt werden müsste [...]. Die allgemeine Begründung dafür ist, dass Zitate der <strong>kulturellen und wissenschaftlichen Weiterentwicklung einer Gesellschaft</strong> dienen [...].
<br />
<span style="font-size:80%">
Quelle: https://de.wikipedia.org/wiki/Zitat
<br />
Hervorhebung v. Verf. Hinzugefügt
</span>
</blockquote>
</body>
</html>
Info
Blockzitate werden durch <blockquote> ... </blockquote> markiert. Innerhalb davon sind Text und andere HTML-Elemente erlaubt.
Das cite-Attribut sollten Sie verwenden, wenn die Originalquelle, von der das Zitat stammt, unter einer URL-Adresse im Internet zu finden ist. Auch bei Zitaten aus Büchern kann es sinnvoll sein, das cite-Attribut und eine URL-Adresse zu verwenden, beispielsweise wenn das Buch bei Google Bücher zu finden ist (http://books.google.de/) oder ein direkter Link zur Amazon-Seite führt, auf der das Buch bestellbar ist.
Info
Web-Browser sollten, wenn das cite-Attribut vorhanden ist, dem Anwender eigentlich eine Möglichkeit anbieten, die darin angegebene URL-Adresse aufzurufen. Leider ist das in der Praxis nicht der Fall. Deshalb ist im obigen Beispiel die Zitatquelle explizit genannt.
Grafische Browser stellen Blockzitate üblicherweise eingerückt dar. Das ist jedoch kein erwartbares Verhalten. Verwenden Sie CSS bzw. CSS-Eigenschaften, um Blockzitate nach eigenen Vorstellungen zu gestalten, z. B. durch Rahmen, Hintergrundfarben oder eine andere Schrift.
Ein Zitat oder eine Referenz kennzeichnen
Nehmen Sie das cite-Element für ein Zitat oder den Verweis auf eine Quelle. Das kann man z.B. für den Titel eines Theaterstücks oder Buchs nehmen, den Namen eines Lieds, Fotos oder einer Skulptur, ein Konzert oder eine musikalische Tournee, eine Spezifikation, eine Zeitung oder eine juristische Schrift u.v.m..
Eine Referenz zitieren
- Tippen Sie
<cite>. - Tippen Sie den Namen der Referenz.
- Tippen Sie
</cite>.
Info
Wenn Sie direkt aus einer Quelle zitieren, nehmen Sie das Element blockquote bzw. q (je nachdem, was besser passt), um den zitierten Text auszuzeichnen. Um es ganz klar zu sagen: cite ist nur für die Quelle, nicht für das gedacht, was Sie daraus zitieren.
<p>Er hörte sich das Video <cite>Vorformatierter Text im HTML5</cite> an, während er sich <cite>Textauszeichnungen im HTML5</cite> anschaute und <cite>Listen verschachteln im HTML5</cite> las.
<p>Als er in die Bibliothek ging, erfuhr er, dass die <cite>Mona Lisa</cite> auch als <cite lang="it">La Gioconda</cite> bekannt ist.</p>
HTML5 und die Verwendung des cite-Elements für Namen
Trotz großem Widerspruch innerhalb der Entwickler-Community deklariert HTML5 explizit, dass es ungültig ist, cite für einen Verweis auf einen Personennamen einzusetzen, auch wenn das in früheren Versionen von HTML erlaubt war und viele Entwickler und Designer es so eingesetzt haben.
Die Spezifikation von HTML 4 enthält das folgende Beispiel:
Wie <cite>Harry S. Truman</cite> sagte: <q lang="en-us">Wenn du in Washington einen Freund brauchst, dann kauf dir einen Hund.</q>
Ergänzend zu solchen Beispielen wurde cite oft auf Websites für die Namen von Besuchern eingesetzt, die Blogpostings oder Artikel kommentieren.
Viele Entwickler haben deutlich herausgestellt, dass sie auf ihren HTML5-Seiten damit weitermachen werden, cite für Namen zu nutzen, die mit Zitaten verknüpft sind, weil HTML5 keine Alternative anbietet, die ihres Erachtens akzeptabel ist (namentlich die Elemente span und b). Jeremy Keith hat sich lautstark für den Fall eingesetzt – siehe https://24ways.org/2009/incite-a-riot/.
Ein blockquote kann so kurz oder lang sein wie nötig. Sie können optional das cite-Attribut einfügen (nicht zu verwechseln mit dem cite-Element, das im ersten Absatz gezeigt wird), um auf die Quelle des zitierten Texts zu verweisen.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
HTML5 bietet neue <cite>Elemente</cite> für die Definition der Struktur einer Website. <cite>HTML5</cite> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</p>
<blockquote cite="https://www.html-lernen-copy.html-lernen.info">
<p>
Zunächst sehen wir uns aber an, wie wir mit den neuen Elementen von HTML5 unsere Seiten besser strukturieren können. In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigations-Möglichkeiten.
</p>
</blockquote>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben..
</p>
</body>
</html>
Browser rücken blockquote-Text normalerweise standardmäßig ein. Historisch gesehen haben Browser die Information des cite-Attributs nicht dargestellt. Das cite-Element wird andererseits von allen Browsern unterstützt und wie gezeigt typischerweise kursiv dargestellt. All diese Standardeinstellungen können mit CSS überschrieben werden.
Text zitieren
Es gibt zwei spezielle Elemente, um aus einer Quelle zitierten Text auszuzeichnen. Das blockquote-Element repräsentiert ein Zitat (meist ein längeres, aber nicht notwendigerweise), das für sich steht, und gibt es standardmäßig in seiner eigenen Zeile aus. Das q-Element hingegen ist für kurze Zitate gedacht, z.B. innerhalb eines Satzes.
Browser sollen Text in einem q-Element automatisch in sprachspezifischen Anführungszeichen setzen, aber der Internet Explorer unterstützt das erst seit Version 8. Manche Browser haben auch Probleme mit verschachtelten Zitaten. Lesen Sie die Tipps aufmerksam, um Alternativen zum q-Element kennenzulernen.
Einen Textblock zitieren
- Tippen Sie
<blockquote, um einen Zitatblock zu beginnen. - Auf Wunsch können Sie
cite="url"tippen, wobei url die Adresse der Zitatquelle ist. - Mit
>schließen Sie das Start-Tag ab. - Schreiben Sie den Text, den Sie zitieren wollen, und setzen Sie ihn in
p- oder andere passende Elemente. - Tippen Sie
</blockquote>.
Einen kurzen Text zitieren
- Tippen Sie
<q, um mit dem Zitat eines Wortes oder Satzes zu beginnen. - Auf Wunsch können Sie
cite="url"tippen, wobeiurldie Adresse der Zitatquelle ist. - Wenn die Sprache des Zitats sich von der Standardsprache der Seite unterscheidet (die über das lang-Attribut im html-Element angegeben wird), tippen Sie
lang="xx", wobei xx der aus zwei Buchstaben bestehende Code der Sprache besteht, aus der das Zitat stammt. Dieser Code soll für die Art der verwendeten Anführungszeichen sorgen (“” für Englisch, „“ für Deutsch, «» für viele andere europäische Sprachen usw.), allerdings wird das von Browsern unterschiedlich unterstützt. - Mit
>schließen Sie das Start-Tag ab. - Geben Sie den Text ein, der zitiert werden soll.
- Tippen Sie
</q>.
Zwar ist es erlaubt, Text direkt zwischen Anfang und Ende der blockquote-Tags zu schreiben, aber das sollten Sie lieber nicht machen. Schließen Sie ihn lieber in ein p oder ein anderes semantisch passendes Element innerhalb des blockquotes ein.
Sie können das optionale cite-Attribut bei blockquote und q nehmen und damit einen URL zu der zitierten Quelle bieten. Bedauerlicherweise präsentieren Browser ihren Usern den cite-URL traditionell nicht, also ist das für sich gesehen kein sonderlich nützliches Attribut. Konsequenterweise empfehle ich, falls Sie ein cite einbinden, den URL in einem Link (dem a-Element zu wiederholen) im Inhalt zu wiederholen und so Ihren Besuchern den Zugriff zu ermöglichen. Sie könnten den Wert von cite auch per JavaScript verfügbar machen, aber das ist weniger effektiv.
Schreiben Sie das lang-Attribut in das q-Element, wenn der zitierte Text in einer anderen Sprache ist als die Standardsprache der Seite (wird im lang-Attribut des html-Elements angegeben).
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Und dann sagte sie: <q>Haben Sie <cite>High Tide in Tucson</cite> von Barbara Kingsolver gelesen? Das ist sehr inspirierend.</q>
</p>
<p>
Sie versuchte es noch einmal, diesmal auf Französisch: <q lang="fr">Avez-vous lu le livre <cite>High Tide in Tucson</cite> de Kingsolver? C'est inspirational.</q>
</p>
</body>
</html>
Browser sollen automatisch geschweifte, doppelte Anführungszeichen um q-Elemente legen (und geschweifte einfache Anführungszeichen um verschachtelte q-Elemente). Der Firefox macht das, aber das kann man nicht von allen Browsern sagen (z.B. ist das auch bei älteren Versionen des Internet Explorers so).
Das blockquote-Element wird in HTML5 auch dafür verwendet, um die Seite in Unterbereiche aufzugliedern (auch sectioning root genannt). Das bedeutet, es kann h1-h6-Überschriften enthalten (und somit auch eine eigene Gliederung), trägt aber nicht zur Gliederung des Dokuments bei. Das ist völlig anders als Inhalte aufzugliedern.
Das
q-Element kann man nicht für Zitate nehmen, die länger als ein Absatz sind.
Nehmen Sie auf keinen Fall q einfach nur deswegen, weil Sie um ein Wort oder einen Satz Anführungszeichen brauchen. Der Satz <p>Immer, wenn ich das Wort <q>Wippsteert</q> höre, muss ich lachen.</p> ist unzulässig, weil Wippsteert kein Zitat aus einer Quelle ist.
Sie können blockquote- und q-Elemente verschachteln, zum Beispiel so: <p>Die Kurzgeschichte begann mit den Worten: <q>Als Kind sagte sie <q>Hallo, Fremder!</q> zu jedem, dem sie begegnete.</ q></p>. Verschachtelte q-Elemente sollten automatisch die passenden Anführungszeichen bekommen (im Deutschen sind die äußeren Anführungszeichen doppelt und die inneren einfach), aber das wird von Browsern unterschiedlich unterstützt. Weil äußere und innere Anführungszeichen bei den Sprachen unterschiedlich behandelt werden, fügen Sie nach Bedarf das lang-Attribut in q ein.
Wegen der browserübergreifenden Probleme mit q, entscheiden sich viele (wahrscheinlich die meisten) Programmierer dafür, einfach die Anführungszeichen einzutippen oder statt des q-Elements die Zeichenentitäten zu nehmen. In seinem ausführlichen Artikel Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute diskutiert Oli Studholme auf HTML5 Doctor dieses und weitere Themen, z.B. eine Reihe von Optionen für die Formatierung von Anführungszeichen mit dem header-Element und die damit zusammenhängenden Informationen über Browser-Support (http://html5doctor.com/blockquote-q-cite/).