HTML code-Tag – Text als Computercode herausstellen
code kennzeichnet Text als Computer- oder Scriptcode, und wird vor allem in technischen Texten in Lehrbüchern, Formeln und Programmbeispielen eingesetzt. Die Browser stellen den Text innerhalb von öffnendem und schließendem code-Tag in nicht-proportionaler Schrift heraus.
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.
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.
