Skip to main content

WIE MAN: Was ist eine Blockquote? - HTML-Tag-Definition - 2021

The infamous "Malice at the Palace" fight needs a deep rewind | 2004 Pacers-Pistons (Februar 2021).

Anonim

Wenn Sie sich schon einmal eine Liste von HTML-Elementen angesehen haben, haben Sie sich vielleicht gefragt: "Was ist eine Blockquote?" Das Blockquote-Element ist ein HTML-Tag-Paar, das zur Definition langer Zitate verwendet wird. Hier ist die Definition dieses Elements gemäß der W3C-HTML5-Spezifikation:

Das Blockquote-Element repräsentiert einen Abschnitt, der aus einer anderen Quelle zitiert wird.

So verwenden Sie Blockquote auf Ihren Webseiten

Wenn Sie Text auf eine Webseite schreiben und das Layout dieser Seite erstellen, möchten Sie manchmal einen Textblock als Zitat aufrufen. Dies könnte ein Zitat von einem anderen Ort sein, wie eine Kundenempfehlung, die eine Fallstudie oder eine Erfolgsgeschichte eines Projekts begleitet. Dies könnte auch eine Designbehandlung sein, die einige wichtige Texte aus dem Artikel oder Inhalt selbst wiederholt. In der Veröffentlichung wird dies manchmal als Pull-Zitat bezeichnet. In Webdesign wird eine der Möglichkeiten, dies zu erreichen (und die Art und Weise, die wir in diesem Artikel behandeln) als Blockquote bezeichnet.

Schauen wir uns also an, wie Sie mit dem blockquote-Tag lange Zitate definieren, wie zum Beispiel diesen Auszug aus "The Jabberwocky" von Lewis Carroll:

'Twas brillig und die Slithey tovesHabe Schreien und Kichern im Wabe:Alle Mimsy waren die Borogoves,Und der Mann rattert aus.

(von Lewis Carroll)

Beispiel für die Verwendung des Blockquote-Tags

Das blockquote-Tag ist ein semantisches Tag, das dem Browser oder Benutzeragenten mitteilt, dass der Inhalt ein langes Zitat ist. Daher sollten Sie keinen Text einschließen, der kein Zitat innerhalb des Tags blockquote ist. Denken Sie daran, ein "Zitat" besteht oft aus tatsächlichen Wörtern, die jemand gesagt hat, oder Text aus einer externen Quelle (wie dem Text von Lewis Carroll in diesem Artikel), aber es ist können Seien Sie auch das Pullquote-Konzept, das wir zuvor behandelt haben. Wenn Sie darüber nachdenken, dass Pullquote ein Zitat aus Text ist, stammt es zufällig aus dem gleichen Artikel, in dem das Zitat selbst erscheint.

Die meisten Webbrowser fügen beiden Seiten einer Blockquote etwas Einrückung (etwa 5 Leerzeichen) hinzu, um sie vom umgebenden Text abzuheben. Einige sehr alte Browser können den zitierten Text sogar kursiv darstellen. Denken Sie daran, dass dies einfach das Standard-Styling des Blockquote-Elements ist. Mit CSS haben Sie die vollständige Kontrolle über die Anzeige Ihrer Blockquote. Sie können den Einzug vergrößern oder sogar entfernen, Hintergrundfarben hinzufügen oder die Textgröße erhöhen, um das Angebot weiter auszudrücken. Sie können das Zitat auf eine Seite der Seite verschieben und den anderen Text umschließen, was ein üblicher visueller Stil ist, der für Pullquotes in gedruckten Magazinen verwendet wird. Sie können das Erscheinungsbild der Blockquote mit CSS steuern, etwas, das wir in Kürze besprechen werden. Lassen Sie uns zunächst nachsehen, wie Sie das Zitat selbst in Ihr HTML-Markup einfügen.

Um den blockquote-Tag in Ihren Text einzufügen, umgeben Sie den Zitatwert einfach mit dem folgenden Tag-Paar.

Zum Beispiel:

'Twas brillig und die slithey toves Habe Schreien und Kichern im Wabe: Alle Mimsy waren die Borogoves, Und der Mann rattert aus.

Wie Sie sehen, fügen Sie einfach das Paar der Blockquote-Tags zum Inhalt des Angebots hinzu. In diesem Beispiel haben wir auch einige break-Tags () verwendet, um gegebenenfalls innerhalb des Texts einzelne Zeilenumbrüche einzufügen. Dies liegt daran, dass wir Text aus einem Gedicht neu erstellen, wobei diese spezifischen Unterbrechungen wichtig sind. Wenn Sie ein Kundenempfehlungsangebot erstellt haben und die Zeilen nicht in bestimmte Teile einbrechen mussten, möchten Sie diese Umbruch-Tags nicht hinzufügen und dem Browser die Möglichkeit geben, abhängig von der Bildschirmgröße die Zeilenumbrüche und -umbrüche vorzunehmen.

Verwenden Sie nicht Blockquote zum Einrücken von Text

Viele Jahre verwendeten die Leute das blockquote-Tag, wenn sie Text auf ihrer Webseite einrücken wollten, auch wenn dieser Text keine Pullquote war. Das ist eine schlechte Praxis! Sie möchten die Semantik von blockquote nicht nur aus optischen Gründen verwenden. Wenn Sie Ihren Text einrücken müssen, sollten Sie Stylesheets verwenden, nicht die blockquote-Tags (es sei denn, Sie versuchen, ein Zitat einzurücken!). Versuchen Sie, diesen Code in Ihre Webseite einzufügen, wenn Sie einfach einen Einzug hinzufügen möchten:

Dies ist ein Text, der eingerückt ist.

Als Nächstes würden Sie diese Klasse mit einem CSS-Stil anvisieren

.entented {

Polsterung: 0 10px;}

Dadurch werden auf jeder Seite des Absatzes 10 Pixel aufgefüllt.