HTML code-Tag – Text als Computercode herausstellen

code kennzeichnet Text als Computercode oder Scriptcode, und wird vor allem in technischen Texten, Lehrbüchern, Formeln und Programmieranleitungen eingesetzt. Die Browser stellen den Text innerhalb von öffnendem und schließendem code-Tag in nicht-proportionaler Schrift heraus.

HTML code tag

HTML code-Tag

Innerhalb der öffnenden und schließenden <code>-Tags können beliebige inline- oder Phrasing-Tags stehen – z.B. <i>/<em>- und <b>/<strong>-Tags, um die Darstellung weiter zu beeinflussen.

<p>Das HTML-Tag <code>code</code> stellt Text als Comuputer-Code dar.</p>

Im Allgemeinen werden Inhalte in code-, kbd- und samp-Tags gleich dargestellt – in einer nicht-proportionalen Schrift wie Courier, bei der alle Zeichen dieselbe Breite haben (»monospace«). Zusätzliche CSS-Eigenschaften können die Darstellung von code-Tags im Browser noch weiter vom Rest des Texts trennen.

Setzen Sie const colorlist = new Array(); ein, um ein Javascript-Array anzulegen.

Anders als beim pre-Tag bleiben mehrfache Leerzeichen innerhalb von code-Tags genauso wie bei samp- und kbd-Tags nicht erhalten. Am Zeilenende wird Text umgebrochen. Ein Zeilenumbruch innerhalb des öffnenden und schließenden Tags führt nicht zu einem Zeilenumbruch im gerenderten Text.

Um ein Javascript-Array anzulegen, 
setzen Sie <code>const colorlist =
   new Array();</code> ein.

Wenn sich der Text über mehrere Zeilen erstreckt, wird eher HTML pre für die Darstellung von Code-Passagen benutzt.

HTML kbd – Hinweis auf Tastatur-Eingabe

Ein paar Buchstaben oder Zahlen in kbd-Tags sind ein Hinweis, dass eine Eingabe auf der Tastatur erwartet wird. kbd-Elemente sind praktisch für Handbücher und Hilfestellungen rund um den Computer. Ohne jegliche Formatierung durch CSS setzen die Browser kbd genauso wie <code> in einer nicht-proportionalen Schrift.

Mit etwas CSS läßt sich das Signal verstärken. Kurz und prägnant, weil die Browser kbd schon durch die Schrift herausstellen:

kbd { 
	background: #efefef; 
	padding: 2px 4px; 
	border-radius: 6px; 
	border: 1px solid silver;
	text-transform: uppercase;
	font-size: 0.8rem;
}

Geben Sie CTRL + L ein, um die Consolen-Ausgabe zu löschen!

HTML samp

samp kennzeichnet einen Text als Beispiel für eine Computer-Ausgabe. Die Browser setzen Text in samp-Tags in einem monospaced Font, weil diese Schriftarten symbolisch für Programmcode stehen.


Filesystem             Size  Used Avail Use% Mounted on
tmpfs                  791M  1.6M  789M   1% /run
/dev/mapper/vg00-lv01  116G   10G  101G   9% /
tmpfs                  3.9G     0  3.9G   0% /dev/shm
tmpfs                  5.0M   24K  5.0M   1% /run/lock
/dev/sda1              488M  250M  203M  56% /boot
tmpfs                  791M  4.0K  791M   1% /run/user/0

Phrase-Tags

code, kbd, samp, dfn und var sind Phrase-Tags, die für kurze Zeichenfolgen innerhalb von Sätzen und Fließtext gedacht sind und nicht zu einem Zeilenumbruch führen.

Phrase-Tags betonen einzelne Wörter innerhalb eines Textes und heben Begriffe vom Rest des Satzes ab, entweder durch eine Kursivschrift, durch einen Monospace-Font, eine Hintergrundfarbe oder durch fette Schrift.

Suchen auf mediaevent.de