HTML <var> Tag
HTML
The <var> tag is used to define and represent the name of a variable in a computer programming context or in mathematical expressions.
HTML <var> Tag
➔ The HTML var tag is a semantic inline element and is used in places where text should look like a programming variable.
➔ Most browsers display the content inside the var tag in italic style by default.
var tag syntax
<var>x</var>=10;
<var>y</var>=10;
<var>z</var>=10;
Best Uses and Good Practices:
➔ Basically the var tag is used to provide meaningful meaning to the attached text.
➔ This makes the var text look different from other surrounding text or programming code.
➔ Semantic values can be added to screen reader technology as well as other assistive technologies so that text can be described as a variable.
➔ Although the default text style is rendered in italic style, it can be customized using CSS.
➔ Except for the use of screen readers and assistive technologies, CSS is recommended for styling computer programming variables or other mathematical expression variables.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<p>The volume of a rectangular object is <var>h</var> × <var>w</var> × <var>l</var>, where <var>h</var>
represents the height, <var>w</var> the width and <var>l</var> the length of the box.
</p>
Click on the "Try it Now" button to see how it works.
➔ The var tag in programming language.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML var tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>HTML var tag example</h3>
<p>Computer programming example</p>
<p>var <var>x</var>=10;</p>
<p>var <var>y</var>=20;</p>
<p>var <var>z</var>=0;</p>
<p><var>z</var>=<var>x</var>+<var>y</var></p>
<p>Summation is: <var>z</var></p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
➔ The var tag in mathematical expressions.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML var tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>HTML var tag example</h3>
<p>Mathematical Expression example</p>
<p>Area of a circle <var>area</var> = <var>π</var><var>r</var><sup>2</sup> </p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.