mitmario.dev

Abschnitt 2 · Lektion 4

Zitate, Code und Datenauszeichnung

HTML Im Browser 3 Min Lesezeit 4 BeispieleLektion 4 von 6

Manche Inhalte haben eine besondere Bedeutung, und für die gibt es eigene Elemente. Das lohnt sich, weil Suchmaschinen, Screenreader und andere Programme damit mehr anfangen können als mit reinem Text. Diese Lektion sammelt die Bausteine, die dir im Alltag am häufigsten begegnen.

Zitate als eigener Block

blockquote umschließt ein längeres Zitat als eigenen Block:

Ein Zitat mit Quelle 
<blockquote>
  <p>Erst denken, dann tippen.</p>
</blockquote>
<p>Steht so schon im <cite>Handbuch</cite>.</p>

Der Browser rückt das Zitat von sich aus ein, damit es sich vom übrigen Text abhebt.

Zwei Dinge dabei sind leicht zu übersehen. Erstens gehört der Zitattext in ein p innerhalb des blockquote. Das blockquote selbst ist nur die Klammer um das Zitat, kein Ersatz für den Absatz. Zweitens ist cite nicht der Zitattext, sondern die Angabe der Quelle: der Titel eines Buchs, eines Artikels, einer Sendung. Der Browser setzt sie kursiv.

Für den Namen einer Person ist cite übrigens nicht gedacht. Wenn du „Erich Kästner“ auszeichnen willst, ist das einfacher Text.

Zitate mitten im Satz

Für kurze Zitate, die im Fließtext stehen, gibt es q:

Ein Zitat im Satz 
<p lang="de">Im Handbuch steht <q>erst denken, dann tippen</q>, und daran ist etwas dran.</p>

<p lang="en">The manual says <q>think first, type second</q>, and there is something to it.</p>

Der Unterschied zum Block: Es fließt mit, und der Browser setzt die Anführungszeichen selbst.

Genau das ist der Punkt, an dem viele stolpern: Du schreibst keine Anführungszeichen dazu. Tust du es doch, stehen am Ende zwei Paare übereinander.

Welche Zeichen der Browser nimmt, entscheidet die Sprache. Im Beispiel stehen zweimal dieselben Tags, nur trägt der eine Absatz lang="de" und der andere lang="en". Schau auf die Seite: zwei verschiedene Anführungszeichen, ohne dass du eines davon getippt hättest. Normalerweise steht die Sprache einmal am html-Element, so wie im Grundgerüst, und gilt dann für die ganze Seite.

Technisches auszeichnen

Der nächste Block bringt drei Elemente zusammen, die oft verwechselt werden:

Code, Tasten und Vorformatiertes 
<p>Ein Absatz beginnt mit <code>&lt;p&gt;</code>.</p>

<p>Speichern mit <kbd>Strg</kbd> + <kbd>S</kbd>.</p>

<pre>Hier    bleiben
    Leerzeichen
        und Umbrüche
genau so stehen.</pre>

Der Reihe nach:

  • code zeichnet ein Code-Fragment im Fließtext aus. Der Browser stellt es in einer Schreibmaschinenschrift dar, in der alle Zeichen gleich breit sind. Das ist bei Code hilfreich, weil sich Klammern und Einrückungen so untereinander ausrichten.
  • kbd steht für eine Taste oder eine Tastenkombination, also für etwas, das der Nutzer drücken soll.
  • pre steht für vorformatiert. Darin bleiben Leerzeichen und Zeilenumbrüche genau so erhalten, wie du sie schreibst. Es ist die einzige Stelle im Fließtext, an der der Leerraum-Kollaps aus der Absatz-Lektion nicht gilt.

Schau dir den pre-Block auf der Seite an und vergleiche ihn mit dem Code im Editor: Die Einrückung steht Zeichen für Zeichen so da, wie sie getippt wurde. Für mehrzeiligen Code kombiniert man beide Elemente und schreibt ein code in ein pre.

Eine Kleinigkeit, die im Beispiel steckt: Um im Text <p> zu zeigen, steht dort &lt;p&gt;. Sonst würde der Browser die spitzen Klammern als echten Tag lesen: Er schließt den laufenden Absatz und macht aus dem Rest des Satzes einen zweiten. Zu sehen wäre von den Klammern nichts.

Daten, die Maschinen lesen können

Zwei unscheinbare Elemente zum Schluss:

Datum und Abkürzung 
<p>Veröffentlicht am <time datetime="2026-07-28">28. Juli 2026</time>.</p>
<p>Die Sprache heißt <abbr title="HyperText Markup Language">HTML</abbr>.</p>

time macht ein Datum maschinenlesbar: Für den Menschen steht da „28. Juli 2026“, im datetime-Attribut steht dasselbe Datum im festen Format Jahr, Monat, Tag. Ein Kalender oder eine Suchmaschine kann damit rechnen, ein Mensch liest die schöne Variante.

abbr erklärt eine Abkürzung über einen Tooltip, das kennst du schon aus der Attribut-Lektion.

Auf der Seite sieht man wenig davon: beim time gar nichts, beim abbr eine gepunktete Linie und den Tooltip beim Darüberfahren. Und das ist normal. Genau darin liegt der Kern dieser ganzen Lektion: Semantisches Markup zahlt sich meist nicht in der Darstellung aus, sondern überall dort, wo etwas anderes als ein Augenpaar die Seite liest.

Zum Mitnehmen

Für Zitate gibt es blockquote und q, für Code das code-Element. Wer den passenden Baustein nimmt, macht seinen Inhalt maschinenlesbar.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 4 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.