HTML var Tag - Learn HTML

Das <var>-Tag beschreibt eine Variable in einem mathematischen Ausdruck oder einem Programmierkontext. Sein Inhalt wird üblicherweise in einer kursiven Version der aktuellen Schriftart dargestellt.

Weitere Elemente, die zur Beschreibung technischer Teile von Dokumenten in den Kontexten verwendet werden, in denen <var> typischerweise eingesetzt wird, sind:

das <code>-Tag, das ein Stück Computercode definiert,
das <samp>-Tag, das eine Beispielausgabe eines Skripts oder Computerprogramms definiert,
das <kbd>-Tag, das eine Tastatureingabe definiert.

Wenn Code vorhanden ist, in dem das <var>-Tag fälschlicherweise für stilistische und nicht für semantische Zwecke verwendet wird, müssen Sie entweder ein  mit geeignetem CSS oder eines der folgenden semantischen Tags verwenden: <q>, , .

Das <var>-Tag ist nicht veraltet, aber mit CSS lassen sich bessere Effekte erzielen.

Syntax

Das <var>-Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<var>) und dem schließenden (</var>) Tag geschrieben.

Beispiel des HTML-`<var>`-Tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    Example <var>This is a variable</var>
  </body>
</html>

Probier es selbst »

Wann sollte `<var>` verwendet werden?

Verwenden Sie <var> für den Namen einer Variable — einen Platzhalter, der für einen Wert steht. Es passt in zwei Kontexte:

Mathematische Ausdrücke. Die Buchstaben, die unbekannte oder veränderliche Größen darstellen, wie x und y in einer Gleichung.
Programmierung. Der Name einer Variable, auf die in einem Text verwiesen wird, wie count oder userName.

Es ist leicht, <var> mit benachbarten semantischen Tags zu verwechseln. Wählen Sie nach Bedeutung, nicht nach dem Aussehen des Textes:

Tag	Verwendung	Beispiel
`<var>`	Ein Variablenname oder Platzhalter	"Sei `n` die Anzahl der Nutzer."
`<code>`	Ein Fragment von Computercode	"Rufen Sie `getName()` auf, um es zu lesen."
`<i>`	Text, der aus nicht-semantischen Gründen hervorgehoben wird (ein Fremdwort, ein Gedanke)	"die Sonde Voyager"

Wenn Sie nur eine kursive Formatierung ohne besondere Bedeutung wünschen, verwenden Sie stattdessen  oder ein formatiertes  anstelle von <var>.

Beispiel: Variablen in einer Gleichung

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The equation <var>x</var> + <var>y</var> = 10 has many solutions.</p>
    <p>If <var>x</var> is 4, then <var>y</var> must equal 6.</p>
  </body>
</html>

Result

Das `<var>`-Tag mit CSS gestalten

Browser stellen <var> standardmäßig kursiv dar. Da es sich um ein echtes semantisches Element handelt, können Sie es frei umgestalten, ohne seine Bedeutung zu ändern — entfernen Sie zum Beispiel die Kursivschrift und geben Sie Variablen eine auffällige Farbe, damit sie in technischen Texten hervorstechen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      var {
        font-style: normal;
        font-family: monospace;
        color: #0d6efd;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <p>Solve for <var>x</var> when <var>y</var> = 12.</p>
  </body>
</html>

Result

Barrierefreiheit

Das <var>-Element hat keine implizite ARIA-Rolle, sodass Hilfstechnologien seinen Inhalt nicht als „Variable" ankündigen — für einen Screenreader wird der Text genauso gelesen wie der umgebende Text. Das Element vermittelt Bedeutung für Autoren und Styling-Tools, nicht direkt für die Nutzer. Stellen Sie sicher, dass die Rolle der Variable aus dem umgebenden Wortlaut hervorgeht, sodass der Satz auch beim Vorlesen noch sinnvoll ist.

Attribute

Das <var>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.

Übung

Welche Aussage über den HTML-var-Tag ist richtig?

Er repräsentiert den Namen einer Variable in einem mathematischen Ausdruck oder einem Programmierkontext.Er stellt seinen Text immer fett dar.Er kennzeichnet ein Fragment von Computercode, wie einen Funktionsaufruf.Er hat eine implizite ARIA-Rolle, durch die Screenreader 'Variable' ankündigen.