HTML Free Codes<var>
Defines a variable in mathematical or programming context
Definition and Usage
The <var> tag is used to define a variable in a mathematical expression or a programming context.
The content inside is typically displayed in italic by default. Variables can represent mathematical quantities, programming variables, function parameters, or any placeholder value that can vary.
The <var> tag is semantic, meaning it conveys meaning about the type of content rather than just styling.
<var> tag is often used in combination with mathematical expressions using <sub>, <sup>, or within <code> blocks.
<var> is typically rendered in italics, always use it for semantic meaning rather than just styling. Use CSS for visual styling instead.
Browser Support
The <var> tag is supported in all major browsers:
Attributes
The <var> tag supports the Global Attributes in HTML.
The <var> tag also supports the Event Attributes in HTML.
Examples
Basic Variable
Use the <var> tag to define a simple variable:
Example
<p>The value of <var>x</var> is 10.</p>Mathematical Expression
Define variables in a mathematical equation:
Example
<p>The formula for area of a circle is <var>A</var> = π<var>r</var><sup>2</sup></p>
<p>In the equation <var>E</var> = <var>mc</var><sup>2</sup>, <var>E</var> represents energy.</p>Programming Variables
Use <var> in programming documentation:
Example
<p>To assign a value to <var>count</var>, use: <code><var>count</var> = 5;</code></p>
<p>The function returns the value of <var>result</var> after processing.</p>Function Parameters
Document function parameters using <var>:
Example
<p>The function <code>calculateTotal(<var>price</var>, <var>quantity</var>)</code>
multiplies <var>price</var> by <var>quantity</var> to get the total.</p>Variables with Subscripts
Combine <var> with <sub> for indexed variables:
Example
<p>The points are represented as (<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>)
and (<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>).</p>
<p>The sum is <var>S</var> = <var>a</var><sub>1</sub> + <var>a</var><sub>2</sub> + ... + <var>a</var><sub>n</sub></p>Styled Variables
Style variables with CSS for better visibility:
Example
<style>
var {
font-style: italic;
color: #745af2;
font-weight: 600;
background: rgba(116, 90, 242, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
</style>
<p>The equation <var>y</var> = <var>mx</var> + <var>b</var> represents a linear function.</p>Try it Yourself
Interactive Example
See how variables are displayed:
The Pythagorean theorem: a2 + b2 = c2
In programming: total = price × quantity
Distance formula: d = √((x2 - x1)2 + (y2 - y1)2)
Semantic Comparison: <var> vs <code> vs <kbd> vs <samp>
| Tag | Purpose | Example Usage |
|---|---|---|
| <var> | Represents a variable or placeholder value | Mathematical variables, function parameters: The value of <var>x</var> |
| <code> | Represents computer code | Code snippets, function names: <code>console.log()</code> |
| <kbd> | Represents keyboard input | Keyboard shortcuts: Press <kbd>Ctrl</kbd> + <kbd>C</kbd> |
| <samp> | Represents sample output from a program | Program output: <samp>Error: File not found</samp> |
<code><var>x</var> = 5;</code>, use <var> for the variable within the <code> block.
Common Use Cases
- Mathematical Documentation: Define variables in formulas and equations
- Programming Documentation: Document function parameters and variables
- Technical Writing: Explain algorithms and computational processes
- Educational Content: Teach mathematics and programming concepts
- API Documentation: Describe placeholder values in API calls
Best Practices
- Use
<var>for its semantic meaning, not just for italic styling - Combine with
<sub>and<sup>for mathematical notation - Nest
<var>inside<code>for programming variables - Use descriptive variable names that are meaningful to readers
- Apply CSS styling to enhance visibility without losing semantic meaning
- Ensure variables are clearly distinguished from surrounding text
- Use consistent naming conventions for variables throughout your documentation
Default CSS Settings
Most browsers will display the <var> element with the following default values:
Default CSS
var {
font-style: italic;
}