Mit Hilfe des blockquote-Elements können Zitate von externen Quellen optisch hervorgehoben werden. Möchte man jedoch eine Quelle zu einem Zitat hinzufügen, beginnen sich die Geister zu scheiden. Nach ausgiebiger Recherche habe ich mich für einen Weg entschieden, der nicht der ursprünglichen Empfehlungen des W3C entspricht. Ich orientiere mich an dem Verfahren des Bootstrap-Frameworks, das hierfür ein footer-Element verwendet. Diese Methode In diesem Artikel möchte ich aufzeigen, wie man Blockzitate mit einer Quellenangabe versehen kann.
Der folgende Ausschnitt zeigt, wie ich Blockzitate in künftigen Artikel strukturieren werde.
<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<footer><cite>http://www.loremipsum.de/</cite></footer>
</blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das W3C sieht an dieser Stelle vor, dass ein Zitat von einem figure-Element umschlossen wird und die Quellenangabe in einem figcaption-Element eingefügt wird. Mehr hierzu kann beim W3C (Link) nachgelesen werden. Weitere Beispiele und Informationen hierzu sind auf html5doctor (Link) zu finden. Der oben gezeigte Code führt zu folgender Darstellung.
Damit ich nicht manuell den Strich vor der Quelle setzen muss, lasse ich dies automatisch durch einen Style erledigen.
blockquote > footer > cite::before {
content: "— ";
}