HTML <code>-Tag
Das <code>-Tag wird verwendet, um Programmcode einzufügen. Beschreibung des Tags, Attribute und Anwendungsbeispiele.
Das <code>-Tag wird verwendet, um ein Fragment von Computercode zu kennzeichnen — einen Variablennamen, einen Funktionsaufruf, einen Ausschnitt aus Quellcode oder beliebigen Text, den ein Benutzer als Code eingeben oder lesen soll. Im Browser wird der Inhalt in einer Festbreitenschrift (einem Font, bei dem alle Zeichen dieselbe Breite haben) dargestellt. Das <code>-Tag ist standardmäßig ein Inline-Element.
Das <code>-Tag ist semantisch: Es teilt Browsern, Hilfstechnologien und Suchmaschinen mit, dass der enthaltene Text Code und keine Prosa ist. Diese Bedeutung ist der Grund, es einzusetzen — die Festbreitendarstellung ist nur die Standardpräsentation, die Sie mit CSS überschreiben können.
Diese Seite erklärt, wie <code> allein funktioniert, warum mehrzeiliger Code in <pre> eingebettet werden muss, die HTML-Escape-Falle bei spitzen Klammern, die Konvention für Syntax-Highlighting-Bibliotheken und wann man <code> nicht verwenden sollte.
Syntax
Das <code>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<code>) und dem schließenden (</code>) Tag.
Beispiel des HTML-<code>-Tags:
HTML-<code>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Führen Sie das obige Beispiel mit dem Try it-Editor aus: Der <code>-Text steht in derselben Zeile wie die umgebenden Absätze und wird in einer Festbreitenschrift dargestellt, genau wie jedes andere Inline-Element.
Warum <code> allein Leerzeichen zusammenfasst
Wie die meisten HTML-Elemente folgt <code> den normalen Leerzeichen-Regeln: Folgen von Leerzeichen, Tabulatoren und Zeilenumbrüchen werden zu einem einzigen Leerzeichen zusammengefasst. Das ist für ein einzelnes Token (<code>let x = 10;</code>) in Ordnung, bricht aber zusammen, sobald man einen mehrzeiligen Ausschnitt einfügt:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>Im Browser wird daraus eine einzige lange Zeile — function greet(name) { return "Hello, " + name; } — weil jeder Zeilenumbruch und die Einrückung zu einzelnen Leerzeichen zusammengefasst werden.
Um Zeilenumbrüche und Einrückungen zu erhalten, betten Sie <code> in ein <pre>-Element ("preformatted") ein. <pre> bewahrt Leerzeichen exakt so, wie sie geschrieben wurden, und das <code> darin behält die semantische Bedeutung. <pre><code>…</code></pre> ist die Standardkombination für jeden Codeblock, der länger als eine Zeile ist.
Beispiel des HTML-<code>-Tags innerhalb eines HTML-<pre>-Tags:
Beispiel des HTML-<code>-Tags innerhalb eines HTML-<pre>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html><, > und & innerhalb von <code> escapen
Eine sehr häufige Aufgabe ist es, HTML selbst innerhalb eines <code>-Blocks anzuzeigen — aber der Browser weiß nicht, dass Ihr <div> angezeigt und nicht ausgeführt werden soll. Wenn Sie ein wörtliches < oder > schreiben, versucht der Browser, es als Tag zu parsen, und Ihr Beispiel verschwindet lautlos. Dasselbe gilt für &, das eine Zeichenreferenz einleitet.
Sie müssen diese Zeichen durch ihre HTML-Entities ersetzen:
| Zeichen | Entity | Bedeutung |
|---|---|---|
< | < | Kleiner-als |
> | > | Größer-als |
& | & | Kaufmanns-und |
Um den Text <a href="#"> anzuzeigen, schreibt man also:
<code><a href="#"></code>Und um if (a && b) anzuzeigen:
<code>if (a && b)</code>Das Vergessen, & zu escapen, ist der subtilste Fehler: © wird als © Symbol gerendert statt als wörtlicher Text. Im Zweifelsfall jedes <, > und & escapen.
Beispiel des HTML-<code>-Tags mit CSS-Eigenschaften:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Die language-*-Klasse für Syntax-Highlighting-Bibliotheken
Einfaches <code> hat keine Kenntnis darüber, welche Programmiersprache es enthält, und kann daher Keywords, Strings und Kommentare nicht selbst einfärben. Syntax-Highlighting-Bibliotheken wie Prism und highlight.js lösen dies mit einer Klassennamens-Konvention: Sie fügen dem <code>-Element (üblicherweise innerhalb eines <pre>) eine language-<name>-Klasse hinzu, und die Bibliothek durchsucht die Seite, liest die Klasse und wendet die passenden Farben an.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Hier teilt language-js dem Highlighter mit, den Inhalt als JavaScript zu behandeln. Weitere gängige Werte sind language-css, language-html und language-python. Die Klasse ist für den Highlighter rein informativ — das <code>-Element trägt weiterhin seine semantische Bedeutung, auch wenn kein Highlighter geladen ist. (Beachten Sie das => im obigen Ausschnitt: Auch innerhalb eines hervorgehobenen Blocks muss > escapt werden, damit der Pfeiloperator korrekt angezeigt wird.)
Wann man <code> nicht verwenden sollte
<code> ist für Inhalte gedacht, die tatsächlich Code sind. Verwenden Sie es nicht nur deshalb, weil Sie eine Festbreitenschrift möchten:
- Tastatureingaben, die der Benutzer drücken soll → verwenden Sie
<kbd>, z. B.<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Programmausgabe / Beispielergebnisse → verwenden Sie
<samp>. - Eine Variable oder ein Platzhalter in Mathematik oder Prosa → verwenden Sie
<var>. - Rein dekorativer Festbreitentext ohne Code-Bedeutung → verwenden Sie ein
<span>und gestalten Sie es mit CSS.<code>hier zu verwenden ist für Screenreader und Suchmaschinen irreführend.
Die Wahl des richtigen Elements hält Ihr Markup ehrlich: Das Tag beschreibt was der Text ist, während CSS entscheidet wie er aussieht.
Verwandte Tags
<pre>— bewahrt Leerzeichen; betten Sie<code>darin für mehrzeilige Blöcke ein.<kbd>— Tastatureingaben des Benutzers.<samp>— Beispielausgabe eines Programms.<var>— ein Variablen- oder Platzhalterename.
Attribute
Das <code>-Tag unterstützt die globalen Attribute und die Event-Attribute.
Zum Beispiel können Sie das title-Attribut verwenden, um einen Tooltip hinzuzufügen: <code title="Variable declaration">let x = 10;</code>.