<var>
Das <var>-Element kennzeichnet eine Variable, ob in mathematischen Ausdrücken, in Programmierkontext oder als Platzhalter in Anleitungen. Browser stellen <var> standardmäßig kursiv dar. Der entscheidende Unterschied zu <em>: Während <em> eine sprachliche Betonung ausdrückt, sagt <var> “dies ist ein variabler Wert, der sich ändern kann”. <var> ist Teil der semantischen Familie für technische Texte: <code> für Quellcode, <kbd> für Eingaben, <samp> für Ausgaben und <var> für Variablen. Auf dieser Seite lernst du, wann <var> die richtige Wahl ist, wie du es in mathematischen Formeln und Anleitungen einsetzt und worin der Unterschied zu <code> liegt.
- Kategorie
- Text & Typografie
- Art
- Inline
- Beispiele
- 3
- Browser
- 5 von 5
- 5 von 5
- Stand
- 04.02.2026
Grundlagen
In technischen Texten brauchst du oft einen Weg, Variablen und Platzhalter vom restlichen Text abzuheben. Bei “Ersetze dateiname durch den tatsächlichen Namen” ist dateiname ein Platzhalter, kein fester Wert. Genau dafür ist <var> gedacht.
<var>ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch- Browser stellen
<var>standardmäßig kursiv (font-style: italic) dar - Die semantische Bedeutung: “Dies ist ein variabler Wert (eine Variable, ein Platzhalter oder ein Parameter)”
- Typische Anwendungsfälle: Mathematische Variablen (x, y, n), Platzhalter in Anleitungen (dateiname, benutzername), Programmvariablen in erklärendem Text
<var>hat keine elementspezifischen Attribute, nur die globalen HTML-Attribute- Nicht verwechseln mit
<em>(Betonung) oder<i>(alternative Stimme, Fachbegriffe).<var>ist spezifisch für Variablen
Syntax
<p>Die Formel lautet: <var>a</var> + <var>b</var> = <var>c</var></p>Beispiele
3 BeispieleDer klassische Anwendungsfall: Variablen in mathematischen Formeln und Gleichungen. <var> hebt die Variablen kursiv hervor und unterscheidet sie von Zahlen und Operatoren:
<p>
Die Fläche eines Rechtecks berechnet sich mit
<var>A</var> = <var>l</var> × <var>b</var>,
wobei <var>l</var> die Länge und <var>b</var> die Breite ist.
</p>
<p>
Für <var>n</var> Elemente benötigt der Algorithmus
<var>n</var> × (<var>n</var> - 1) / 2 Vergleiche.
</p>In technischen Anleitungen werden Platzhalter verwendet, die der Nutzer durch seine eigenen Werte ersetzen soll. <var> macht klar, dass es sich nicht um einen festen Wert handelt:
<p>Öffne die Datei <var>dateiname</var>.html in deinem Editor.</p>
<p>Ersetze <var>benutzername</var> durch deinen
tatsächlichen GitHub-Nutzernamen.</p>
<!-- var innerhalb von code: Platzhalter im Codekontext -->
<p>Navigiere zum Ordner
<code>/home/<var>benutzer</var>/projekte</code>.</p>Alle drei können kursiv oder visuell ähnlich aussehen, haben aber völlig verschiedene Bedeutungen:
<!-- var: variabler Wert / Platzhalter -->
<p><var>x</var>: eine Variable oder ein Platzhalter</p>
<!-- code: Code-Referenz -->
<p><code>x</code>: eine Code-Referenz (z.B. Variablenname im Quellcode)</p>
<!-- em: sprachliche Betonung -->
<p><em>x</em>: eine sprachliche Betonung</p>Barrierefreiheit
3 Punkte- Screenreader-Verhalten: Die meisten Screenreader behandeln
<var>wie normalen Text und kündigen es nicht gesondert an. Der Nutzer hört den Inhalt (z.B. “x”), erfährt aber nicht automatisch, dass es eine Variable ist. - Kontext bieten: Beschreibe im umgebenden Text, dass es sich um eine Variable oder einen Platzhalter handelt, z.B. “Ersetze dateiname durch…” statt nur “dateiname”. So verstehen alle Nutzer, dass der Wert variabel ist.
- Nicht auf Kursivschrift verlassen: Die kursive Darstellung allein vermittelt blinden Nutzern keine Bedeutung. Der Kontext im Text ist entscheidend.
Häufige Fehler
3 Punkte-
var für Quellcode verwenden: Wenn du auf eine Variable in deinem Quellcode verweist (z.B. “Die Variable
countwird hochgezählt”), verwende<code>, nicht<var>.<var>ist für mathematische Variablen und Platzhalter,<code>für Code-Referenzen. -
var statt em für Betonung:
<var>sieht kursiv aus, genau wie<em>. Aber die Bedeutung ist eine andere. Verwende<var>nur für tatsächliche Variablen und Platzhalter, nicht um Text hervorzuheben oder zu betonen. -
var für Fachbegriffe oder Fremdwörter: Für Fachbegriffe, wissenschaftliche Namen oder Wörter aus einer anderen Sprache verwende
<i>, nicht<var>.<var>ist spezifisch für variable Werte.
Browser-Kompatibilität
5 von 5Das var-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
5 von 5Das var-Element wird in den meisten Email-Clients als kursiver Text dargestellt, ähnlich wie em oder i.
-
Apple Mail
Komplett
-
Gmail
Komplett
-
Outlook
Komplett
-
Thunderbird
Komplett
-
Yahoo Mail
Komplett
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da