HTML-Computercode-Elemente
Lernen Sie die HTML-Elemente code, kbd, samp, var und pre: ihre semantische Bedeutung, Einsatzbereiche und das mehrzeilige Codeblock-Muster.
HTML bietet eine kleine Gruppe von Elementen zum Auszeichnen von Text, der von einem Computer stammt: Quellcode, eingegebene Befehle, Programmausgaben und Variablen. Alle werden standardmäßig in einer Festbreitenschrift dargestellt, sind aber nicht austauschbar — jedes Element trägt eine andere Bedeutung. Die richtige Wahl informiert Browser, Suchmaschinen und insbesondere Bildschirmleseprogramme darüber, welche Art von Computertext vorliegt.
Diese Seite erklärt, wann und wie die einzelnen Elemente verwendet werden:
<code>— ein Fragment von Computercode<kbd>— Text, den der Nutzer auf einer Tastatur eingibt<samp>— Beispielausgabe eines Programms<var>— eine Variable oder ein Platzhalter<pre>— vorformatierter Text, der Leerzeichen und Zeilenumbrüche beibehält- Das kanonische
<pre><code>-Muster für mehrzeilige Codeblöcke
Warum Semantik wichtig ist
Da diese Tags auf dem Bildschirm fast gleich aussehen, ist es verlockend, einfach das zu nehmen, an das man sich erinnert. Widersetzen Sie sich dem. Der visuelle Stil ist nur ein Standard — er lässt sich jederzeit per CSS ändern. Was sich nicht so leicht ändern lässt, ist die Bedeutung.
Ein Bildschirmleseprogramm kann <kbd>- und <samp>-Inhalte unterschiedlich ankündigen, Suchmaschinen nutzen das Markup zum Verstehen einer Seite, und andere Entwickler, die Ihren HTML-Code lesen, verlassen sich auf diese Tags, um zu wissen, ob Ctrl + C eine Tastenkombination (<kbd>) oder eine vom Programm ausgegebene Zeichenkette (<samp>) ist. Verwenden Sie das Element, das der Bedeutung entspricht, und gestalten Sie es dann nach Belieben.
Das HTML-Tag <code>
Das HTML-Tag <code> markiert inline ein Fragment von Computercode — einen Funktionsnamen, ein Tag, eine CSS-Eigenschaft, einen Shell-Befehl und so weiter. Es bedeutet nicht „Variable"; für Variablen verwenden Sie <var>. Browser zeigen <code>-Inhalte in einer Festbreitenschrift an.
Für sich allein ist <code> für kurze, inline Schnipsel gedacht. Für mehrzeilige Blöcke wird es in <pre> eingebettet (siehe unten).
Beispiel des HTML-Tags <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>Das HTML-Tag <var>
Das Tag <var> definiert eine Variable in einem mathematischen Ausdruck oder einem Programmierkontext — zum Beispiel x und y in einer Gleichung oder den Namen eines Parameters in Fließtext. Es ist das richtige Element für Variablen (ein häufiger Verwechslungspunkt mit <code>). Browser stellen es in der Regel kursiv dar.
Beispiel des HTML-Tags <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>Das HTML-Tag <kbd>
Das Tag <kbd> markiert Tastatureingaben — Text oder Tasten, die der Nutzer eingeben oder drücken soll. Verwenden Sie es für Tastenkürzel (Ctrl + V), Befehle, die der Leser eingeben soll, und einzelne Tasten. Es wird standardmäßig in einer Festbreitenschrift dargestellt.
Beispiel des HTML-Tags <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>Das HTML-Tag <samp>
Das Tag <samp> markiert Beispielausgaben eines Computerprogramms oder Skripts — den Text, den das Programm zurückgibt, im Gegensatz zum Code selbst (<code>) oder dem, was Sie eingeben (<kbd>). Es wird standardmäßig in einer Festbreitenschrift angezeigt.
Eine hilfreiche Eselsbrücke: <kbd> ist das, was hineingeht, <samp> ist das, was herauskommt.
Beispiel des HTML-Tags <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>Das HTML-Tag <pre>
Das Tag <pre> definiert vorformatierten Text. Anders als bei normalem HTML behält der Browser jeden Leerzeichen, Tabulator und Zeilenumbruch genau so bei, wie er im Quellcode steht, und stellt den Inhalt in einer Festbreitenschrift dar. Damit ist <pre> ideal für ASCII-Art, Tabellen mit fester Breite und — am häufigsten — für Codeblöcke, bei denen Einrückungen und Zeilenumbrüche erhalten bleiben müssen.
Für sich allein trägt <pre> keine „dies ist Code"-Bedeutung; es steuert nur die Formatierung. Um auszudrücken, dass der vorformatierte Text Code ist, kombiniert man es mit <code>.
Beispiel des HTML-Tags <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Mehrzeilige Codeblöcke mit <pre> und <code>
Für einen Quellcodeblock, der mehrere Zeilen umfasst, ist das kanonische, empfohlene Muster, <code> in <pre> einzubetten. <pre> bewahrt Leerzeichen und Zeilenumbrüche; <code> fügt die semantische Bedeutung hinzu, dass der Inhalt Code ist. Zusammen bilden sie die Standardmethode zur Darstellung eines Codeblocks in HTML.
Beispiel von <pre> mit <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Beachten Sie, dass der Inhalt von <code> unmittelbar nach dem öffnenden Tag beginnt und unmittelbar vor dem schließenden Tag endet. Alle Leerzeichen oder Zeilenumbrüche, die Sie zwischen <pre> und <code> lassen, würden ebenfalls gerendert, da <pre> alle Leerzeichen beibehält.
Das richtige Element wählen
| Element | Bedeutung | Typischer Einsatz |
|---|---|---|
<code> | Ein Codefragment | Inline-Funktionsname, Tag oder Befehl |
<kbd> | Tastatureingabe | Tastenkürzel und vom Nutzer eingegebener Text |
<samp> | Beispiel-Programmausgabe | Text, den ein Programm zurückgibt |
<var> | Eine Variable | x in einer Gleichung, ein Parametername |
<pre> | Vorformatierter Text | Mehrzeilige Blöcke; bewahrt Leerzeichen |