HTML code-Element

HTML code-Tag

Innerhalb der öffnenden und schließenden <code>-Tags können beliebige 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 nicht erhalten. Am Zeilenende wird Text in code-Tags umgebrochen. Ein Zeilenumbruch innerhalb eines code-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 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 ein praktisch für Handbücher und Hilfestellungen. Ohne jegliche Formatierung durch CSS setzen die Browser kbd in einer kleinen Schriftgröße und in einer Sans Serif-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

HTML var – Text als Variable markieren

Die Browser setzen per Vorgabe einen Italic-Font, also eine leichte Betonung.

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.

Weitere Phrase-Tags sind z.B.

abbr (Abkürzung) cite (Zitat) em (leichte Betonung) strong (starke Betonung) mark (markieren) q (Quote-Tag)

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.

HTML dfn-Tag

Im Ingenieurwesen, in der Forschung und technischen Dokumentationen ist es gängige Praxis, das erste Vorkommen eines Begriffs kursiv zu setzen – also stellen die Browser Text in dfn kursiv heraus.

Das direkte Elternelement des dfn-Tags (z.B. das p-Tag, dl oder section) soll die Definition des Begriffs enthalten.

<p><dfn>Tsundoku</dfn> (japanisch) Die Kunst, Bücher zu kaufen, aber nicht zu lesen, sondern mit anderen ungelesenen Büchern zu stapeln.</p>

Tsundoku (japanisch) Die Kunst, Bücher zu kaufen, aber nicht zu lesen, sondern mit anderen ungelesenen Büchern zu stapeln.

dfn in dl-Listen

Wie alle HTML-Tags, die in den Icons der Editoren von Content Management Systeme nicht vertreten sind, sind def, var, kbd und samp wahre Raritäten.

dfn hat keinen bleibenden Eindruck in den Webseiten der letzten Jahrzehnte hinterlassen. Das W3C hat dem dfn-Tag eine neue Aufgabe zugewiesen: Weil das dl-Tag nicht länger ausschließlich auf Definitionslisten fixiert ist, empfiehlt das W3C, das dfn-Tag in dl-Listen einzusetzen. Innerhalb des dt-Tags soll dfn anzeigen, dass es sich hier tatsächlich um eine Definitionsliste handelt.

So richtig in Schwung kommt die Definitionsliste zusammen mit dfn, wenn wir Metadaten wie RDF oder schema.org einsetzen.

Autoren: Michael Meyers; Louis Lane
Lektorat: Jeannette Neumann
Kategorie: Technischer Artikel

HTML var

var kennzeichnet Variablen im Computer-Code und mathematische Variablen im Text.

Mit n verschiedenen Aromen heute gibt es heute n Eissorten.

<p>Mit <var>n</var> verschiedenen Aromen heute gibt es heute <var>n</var> Eissorten.</p>

Für Formeln ist MathML die bessere Wahl, aber hier ist var in der Erklärung gut aufgehoben.

a = \sqrt{b^{2} + c^{2}}

Der Satz des Pythagoras berechnet die Hypotenuse a eines Dreiecks mit den Seiten b und c.

<figcaption>
   Der <dfn>Satz des Pythagoras<dfn> berechnet die Hypotenuse 
   <var>a</var> eines Dreiecks mit den Seiten <var>b</var> und <var>c</var>.
</figcaption>

HTML kbd, samp

Neben code gibt es weitere Inline-Tags – kbd, samp, var – die einen ähnlichen Hintergrund haben und ebenfalls in Monospace gerendert werden.

Das kbd-Tag signalisiert, dass der gekennzeichnete Text vom Benutzer über die Tastatur eingegeben werden soll – z.B. innerhalb eines Onlinetutorials.
Das samp-Tag soll eine Zeichenfolge betonen.

Diese Elemente können z.B. in einem Programmier-Tutorial längere Code-Passagen innerhalb von pre-Tags herausstellen: reservierte Wörter in Blau, Variablen in Grün.

Ein weiteres Element dieser Art – das HTML tt-Tag – ist in HTML5 nicht mehr vorhanden.