HTML-Tipps für Webentwickler

q, blockquote, cite: Was nimmt man wann?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
06:42
  Lesezeichen setzen

Transkript

Für Zitate gibt es eine Reihe von Elementen: "q", "blockquote", "cite" und dann wäre noch das Attribut "cite". Was setzt man wann ein? Und wie macht man das eigentlich mit den sogenannten "PullQuotes"? Beginnen mir mit dem "blockquote"-Element. Dies können Sie für klassische Zitate verwenden. Das sind Zitate aus literarischen Quellen. Aber auch beispielsweise, wenn jemand ein Kommentar, oder eine Stelle aus einem Kommentar zitiert, oder auch, wenn jemand einen Artikel zitiert. "blockquote" bedeutet, dass danach und davor ein Zeilenumbruch stattfindet und das Ganze ist eingerückt. Sehen wir uns das einmal an. Also hier haben wir unser "blockquote"-Element für ein Zitat von Mark Twain, der einige Änderungen für die deutsche Sprache vorschlägt. Also beispielsweise auch das Zeitwort so weit nach vorne zu rücken, bis man es ohne Fernrohr entdecken kann. Sie sehen, dass "blockquote"-Element ist automatisch eingerückt. Das kann man über "CSS" aber ändern. Verantwortlich dafür ist die Eigenschaft "Margin". Also wenn ich diese Einrückung entfernen möchte, kann ich das mit "CSS" machen und sage dann "blockquote margin-left:0" und dann sollte die Einrückung entfernt sein. Das sieht man an dieser Stelle. Im Beispiel habe ich "blockquote" verwendet und dann den Autor des Zitats einfach innerhalb eines Absatzes. Stattdessen kann ich auch auf "figure" und "figcaption" zurückgreifen. Dann umschließt "figure" das Ganze. Das heißt, mein Zitat und innerhalb der "figcaption" kommt dann die Erläuterung, woher das Ganze stammt. In unserem Fall eben, dass es von Mark Twain stammt und ich kann dann den Titel des Werkes aus dem ich zitiere, innerhalb von "cite" schreiben. Also das hier stammt aus einem Text, der heißt "Die Schrecken der deutschen Sprache". Sehen wir uns das kurz an. Dann sehen wir, das "cite"-Element wird kursiv. Wir haben eine globale Einrückung durch das "figure"-Element und außerdem eine Einrückung durch "blockquote". Wenn das nicht passt, kann ich natürlich diese Einrückungen entfernen. Ich habe das vorbereitet. Also wenn ich bei "figure" und "blockquote" die Außenabstände auf 0 setze, dann sind diese Einrückungen entfernt. Neben dem "blockquote"-Element, gibt es auch noch das "q"-Element für kurze Zitate. Sehen wir uns das einmal an. Hier, "Wer nie deutsch gelernt hat, macht sich keinen Begriff, wie verwirrend diese Sprache ist". Und bemerkenswert sind die Anführungszeichen. Die hatte ich nämlich nicht ergänzt. Die werden automatisch geschrieben, wenn man "q" verwendet. "q" nehmen Sie also für Inline-Zitate. Sie können dann dort auch noch das "cite"-Attribut setzen, um eine Quelle anzugeben. Das habe ich in diesem zweiten Beispiel und in diesem sehen Sie auch, dass wir ein Element "cite" haben. Das verwendet man für den Titel eines Werkes, oder einer Seite. Und es gibt ein "cite"-Attribut, was Sie bei "q" oder auch bei "blockquote" einsetzen können. Und dort können Sie dann die Quelle, das heißt, eine Webseite angeben, wo das Ganze auch zu finden ist. Jetzt gibt es ja außerdem noch die sogenannten "PullQuotes". Was machen wir mit denen? Ein "PullQuote" ist normalerweise ein Zitat aus einem Text. Das heißt, der Text, der im "PullQuote" angegeben ist, steht bereits auf der Seite. Sie sehen ein Beispiel. Da habe ich den Text: "Ein Pull Quote ist ein praktisches typografisches Mittel, um den Inhalt eines Textes hervorzuheben". Und genau dieser Text steht auch im "PullQuote". Das heißt, das Besondere am "PullQuote" ist, dass der Text zitiert wird, der auf der Seite selbst ist und nicht ein Text zitiert wird von einer anderen Seite. Und deswegen muss man auch eine andere Auszeichnung dafür nehmen. Das Richtige in diesem Fall ist das "aside"-Element. Sehen wir uns ein Beispiel an. Ich habe einen Text. Es kommt auch ein kleines Zitat vor. Und dann kommt auch dieser Text: "People ask me what I Do for fun" et cetera. Und dieser Text soll noch einmal in Form eines "PullQuotes" hervorgehoben werden und das sollte man dann durch ein "aside"-Element kennzeichnen. So schlägt es das "V3C" vor. Man kann sich dann auch überlegen diesen Text für Screenreader zu verbergen, denn der soll natürlich nicht noch einmal vorgelesen werden. Und das macht man mit "aria-hidden", indem man das nimmt und auf den Wert "true" setzt. Dann hat man dadurch sichergestellt, dass dieser Text nicht für Screenreader vorgelesen wird, weil das ja eine reine Wiederholung ist. Zusammengefasst, "blockquote" nehmen Sie für größere Zitate, die dann als Block gekennzeichnet werden. Sie können das Zitat mit einer Erläuterung, woher es kommt auch innerhalb von "figure" verwenden. "q" ist für kurze Zitate gedacht. Außerdem können Sie sowohl bei "q", als auch bei"blockquote", das Zeitattribut einsetzen, um die Quelle zu kennzeichnen. Den Titel von Büchern oder Webseiten können Sie hingegen innerhalb des "cite"-Elements angeben. Und für "PullQuotes" sollten Sie das "aside"-Element verwenden und sich überlegen, ob Sie nicht auch für Screenreader "aria-hidden" auf "true" setzen.