HTML-Computercode

Tutorials und Dokumentation zeigen oft Befehle, Eigenschaftsnamen und HTML-Ausschnitte. Fügen Sie denselben Text in einen normalen Absatz ein, kann der Browser Leerzeichen zusammenziehen und < als Beginn eines echten Tags behandeln. HTML stellt Elemente für Computertext bereit, damit Beispiele lesbar und sicher bleiben. Diese Sitzung hilft Ihnen, für jede Rolle das passende Element zu wählen: kurzer Token im Satz, mehrzeiliger Block, Taste, die der Nutzer drückt, oder Beispielausgabe eines Programms. Wer diese Rollen trennt, schreibt klarere Erklärseiten für Menschen und Hilfstechnologien und vermeidet den typischen Fehler, dass ein Beispiel live im Dokument landet.

Was sind Computercode-Elemente?

Diese Elemente markieren Text, der Code, Tastatureingabe oder Programmausgabe darstellt — keinen gewöhnlichen Fließtext. Sie helfen dem Browser bei einer geeigneten Standardschrift (oft Monospace für code und pre) und signalisieren Hilfsmitteln, dass der Abschnitt computerbezogen ist. Die Zeichen schreiben Sie weiterhin selbst; die Tags liefern Bedeutung und erhalten mit pre das Layout. Sie ändern nicht die Logik hinter der Seite; ihre Aufgabe ist semantisch und darstellerisch. Markieren Sie unnötig jedes Fachwort mit code, verwirren Sie Leser; lassen Sie mehrzeiligen Code ohne pre, kann die gewünschte Einrückung verschwinden.

Direkte Antwort

Nutzen Sie code für einen kurzen Ausschnitt im Satz. Nutzen Sie pre, wenn Leerzeichen und Zeilenumbrüche bleiben müssen. Ein übliches Blockmuster ist <pre><code>...</code></pre>. Markieren Sie Tasten mit kbd und Beispielausgabe mit samp, wenn diese Rollen echt sind. Ist das Beispiel selbst HTML, schreiben Sie < und > statt roher < und >, damit der Browser keine live Elemente erzeugt. Diese einfache Gewohnheit schützt Tutorial-Seiten: Leser sehen die Zeichen, die Sie zeigen wollten, nicht einen versehentlich erzeugten Absatz mitten im Beispiel.

Elemente auf einen Blick

Inline-Code

Wenn Sie einen kurzen Token im Satz nennen, wickeln Sie ihn in code. Das Wort bleibt optisch klar, ohne einen ganzen Block zu erzwingen. Das Muster passt zu Eigenschaftsnamen, kurzen Befehlen und Funktionsnamen mitten in der Erklärung. Markieren Sie nicht jedes technische Wort in einem Absatz; behalten Sie code für Tokens, die Leser schnell finden sollen.

Das Beispiel lesen

• Der Satz ist normaler Absatztext
• Nur der Eigenschaftsname sitzt in code
• Leser finden den technischen Token schnell
• Das ist keine mehrzeilige Liste — dafür nutzen Sie pre
• Die Standardschrift ist oft Monospace, aber die Bedeutung zählt mehr als der Look allein
• Mehrere code-Elemente in einem Absatz sind in Ordnung, wenn Sie mehrere Tokens nennen

Blöcke mit pre und code

pre bedeutet vorformatiert: Leerzeichen und Zeilenumbrüche bleiben ungefähr wie getippt. code in pre zu schachteln ist ein klares Muster für einen Codeblock. In HTML-Beispielen kodieren Sie spitze Klammern. Ohne pre können normale HTML-Whitespace-Regeln Einrückung und Zeilen zu einer dichten Zeile flatten. Die Kombination sagt Lesern und Tools klar: hier liegt Code mit erhaltenem Layout.

Warum Kodierung zählt

Schreiben Sie ein rohes <p> in Ihre Tutorial-Seite, kann der Browser einen echten Absatz erzeugen statt die Zeichen <p> zu zeigen. Kodierung als <p> zeigt das Beispiel sicher. Die Entities-Sitzung geht tiefer auf Zeichenreferenzen ein; hier brauchen Sie nur die Gewohnheit für spitze Klammern in HTML-Demos. Fügen Sie einmal absichtlich ein rohes Tag ein, laden neu, kodieren dann — der Unterschied ist sofort sichtbar und bleibt besser haften als reine Theorie. Die Kodierung betrifft den Beispieltext in Ihrer Seite, nicht die HTML-Sprache, die Sie lernen.

Tastatureingabe und Beispielausgabe

Nutzen Sie kbd, wenn Sie Tasten beschreiben, die der Nutzer drückt. Nutzen Sie samp, wenn Sie Beispielausgabe eines Programms oder Befehls zeigen. Bleiben Sie ehrlich — markieren Sie gewöhnliche Wörter nicht nur für Monospace-Look mit kbd. Ist der Text ein CSS-Eigenschaftsname, passt code besser; ist es ein Tastenkürzel, ist kbd richtig. Diese semantische Trennung macht Dokumentation klarer und hilft Screenreadern, den Inhaltstyp zu verstehen.

Übung im Editor

1. Schreiben Sie einen Satz, der die Eigenschaft font-size in code nennt.
2. Fügen Sie einen pre+code-Block mit zwei kurzen HTML-Zeilen mit < und > hinzu.
3. Ergänzen Sie eine Tippzeile mit kbd für ein Speicher-Shortcut.
4. Optional: eine samp-Zeile mit fingierter Befehlsausgabe.
5. Speichern und öffnen — prüfen Sie, dass Leerzeichen in pre bleiben und kodierte Tags als Text erscheinen.
6. Fügen Sie vorübergehend ein rohes <div> ohne Kodierung ein, laden neu, sehen Sie das Problem, kodieren Sie es dann.
7. Prüfen Sie den Absatz: steht jedes kbd für eine echte Taste? Bleibt normaler Fließtext außerhalb von pre?
   Gehen Sie die Schritte der Reihe nach; Schritt sechs macht das Risiko roher Tags greifbar. Verschwinden Einrückungen, prüfen Sie, ob der Block in pre liegt und Tags nicht zu früh geschlossen sind. Erscheint mitten im Beispiel ein neuer Abschnitt oder Absatz, fehlt meist die Kodierung.

Fehler, die Beispiele zerstören

• Mehrzeiligen Code nur in code ohne pre — Zeilenumbrüche und Einrückung können kollabieren
• Rohes <div> oder <p> ohne Kodierung — es wird ein live Element
• pre für lange normale Aufsätze (es ist für vorformatierten Computertext, nicht für Essays)
• Jedes Fachwort mit kbd markieren, obwohl es keine Tastatureingabe ist
• pre oder code nicht schließen, sodass Folgetext im vorformatierten Stil stecken bleibt
• Nur auf Monospace-Look setzen, ohne das Element nach Bedeutung zu wählen
• Manche Klammern kodieren und andere im selben Beispiel roh lassen — ein Teil Text, ein Teil live Tags

Zusammenfassung

• code markiert kurzen Inline-Computertext
• pre behält Leerzeichen und Zeilenumbrüche für Blöcke
• pre und code zu kombinieren ist ein übliches mehrzeiliges Muster
• Kodieren Sie < und > in HTML-Beispielen als < und >
• kbd und samp decken Tastatureingabe und Beispielausgabe ab, wenn die Rollen passen
• Wählen Sie das Element nach der Bedeutung des Texts, nicht nur nach der Standardschrift
• Prüfen Sie nach dem Speichern: sieht der Leser die Zeichen, die Sie zeigen wollten?
  So bleiben Tutorial-Seiten klar und sicher: kurze Tokens im Satz, Blöcke mit erhaltenem Layout, Tasten und Ausgabe in den richtigen Rollen — und Kodierung, die verhindert, dass Beispiele zu live Elementen werden.