Der <blockquote>-Tag in HTML: Zitate darstellen

Der <blockquote>-Tag in HTML wird verwendet, um längere Zitate oder Auszüge von Texten darzustellen. Es handelt sich um ein Blockelement, das standardmäßig eingerückt dargestellt wird, um die Bedeutung eines Zitats hervorzuheben.

Grundlegende Syntax des <blockquote>-Tags

Der <blockquote>-Tag umschließt den zitierten Text.

Beispiel:

<blockquote>
    Dies ist ein längeres Zitat, das mit dem `<blockquote>`-Tag dargestellt wird.
</blockquote>

Darstellung im Browser:

Dies ist ein längeres Zitat, das mit dem <blockquote>-Tag dargestellt wird.

Attribut cite

Das cite-Attribut im <blockquote>-Tag wird verwendet, um die Quelle des Zitats anzugeben. Diese Information ist für Benutzer nicht sichtbar, kann jedoch von Suchmaschinen oder Screenreadern interpretiert werden.

Beispiel:

<blockquote cite="https://example.com/zitat">
    "Wissen ist Macht."
</blockquote>

Verschachtelte Zitate

Zitate können verschachtelt werden, indem mehrere <blockquote>-Tags ineinander gesetzt werden.

Beispiel:

<blockquote>
    "Das Leben ist das, was passiert, während du eifrig andere Pläne machst."
    <blockquote>
        - John Lennon
    </blockquote>
</blockquote>

Darstellung im Browser:

Das Leben ist das, was passiert, während du eifrig andere Pläne machst.

  • John Lennon

Styling von <blockquote> mit CSS

Das <blockquote>-Tag kann mit CSS individuell gestaltet werden, um es besser in das Design der Webseite zu integrieren.

Beispiel:

<style>
    blockquote {
        font-style: italic;
        color: #555;
        border-left: 4px solid #ccc;
        padding-left: 10px;
        margin: 20px 0;
    }
</style>
<blockquote>
    "Design ist nicht nur, wie etwas aussieht, sondern auch, wie es funktioniert."
</blockquote>

Darstellung im Browser:

Ein eingerücktes Zitat mit einer stilisierten Linie am linken Rand.

Unterschied zwischen <blockquote> und <q>

  • <blockquote>: Wird für längere Zitate verwendet und ist ein Blockelement.
  • <q>: Wird für kurze, inline dargestellte Zitate verwendet. Der Browser fügt automatisch Anführungszeichen hinzu.

Beispiel für <q>:

<p>Steve Jobs sagte einmal: <q>Bleib hungrig, bleib töricht.</q></p>

Darstellung im Browser:

Steve Jobs sagte einmal: „Bleib hungrig, bleib töricht.“

Barrierefreiheit und Best Practices

  • cite-Attribut verwenden: Geben Sie die Quelle an, um die Glaubwürdigkeit des Zitats zu erhöhen.
  • Semantik: Nutzen Sie <blockquote> nur für Zitate und nicht für visuelle Effekte. Für allgemeine Hervorhebungen eignen sich andere Tags oder CSS besser.

Fazit

Der <blockquote>-Tag ist ein wichtiges HTML-Element, um Zitate stilvoll und semantisch korrekt darzustellen. Durch die Kombination mit CSS und dem cite-Attribut kann er sowohl optisch ansprechend als auch informativ gestaltet werden. Nutzen Sie dieses Element gezielt, um Zitate auf Ihrer Webseite hervorzuheben.

Letzte Bearbeitung am Montag, 30. Dezember 2024 – 9:12 Uhr von Alex, Webmaster für Google und Bing SEO.

Konnten wir deine Fragen zu blockquote Befehl – Das Blockquote Tag in HTML wird verwendet, um Zitate oder Textabschnitte zu kennzeichnen beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema blockquote Befehl – Das Blockquote Tag in HTML wird verwendet, um Zitate oder Textabschnitte zu kennzeichnen.