👀 Live Preview
Variables rendered in italic within a sentence:
Let x be the unknown value and n be the sample size.
The formula uses r as the radius.
HTML <var> Tag
Overview
What You’ll Learn
The <var> tag marks variable names in mathematical and programming content. This guide covers syntax, use cases, comparisons with code, styling, and best practices for beginners.
var Syntax
Wrap variable names in <var> tags.
Math Variables
Mark x, r, and other symbols in formulas.
Code Variables
Highlight identifiers in programming prose.
var vs code
Variable names vs source code fragments.
CSS Styling
Italic defaults and custom highlight classes.
Accessibility
Semantic meaning for assistive technology.
Fundamentals
What Is the <var> Tag?
The <var> element is an inline HTML tag that represents a variable in a mathematical expression or programming context. Browsers typically render it in italics to visually distinguish variable names from surrounding prose.
Semantic Markup — Not JavaScript
The HTML <var> element is not the JavaScript var keyword. It marks variable names in educational content—such as x in an equation or count in a tutorial—not executable code.
Use var when you reference a variable by name in text. Use <code> for full source code snippets and <pre> for multi-line blocks.
variable-reference.html
<p>Substitute <var>n</var> with any positive integer.</p>Foundation
📝 Syntax
Enclose the variable name between opening and closing <var> tags:
syntax.html
<var>YourVariable</var><var>is an inline element—it nests inside paragraphs, list items, and table cells.- Wrap only the variable identifier, not entire expressions or statements.
- Self-closing syntax (
<var />) is not valid in HTML.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Rendered |
|---|---|---|
| Math variable | <var>x</var> | x |
| Formula radius | A = π<var>r</var><sup>2</sup> | A = πr2 |
| Highlighted var | <var class="highlight"> | x |
| In code prose | <code>var <var>name</var></code> | var name |
| Attributes | Global only | class, id, title |
Comparison
⚖️ <var> vs <code> vs <em>
These inline elements look similar but carry different meanings:
| Element | Purpose | Example |
|---|---|---|
<var> | Variable identifier in math or code prose | radius, x |
<code> | Source code fragment | console.log() |
<em> | Emphasized stress in speech | must, never |
<samp> | Program output sample | Terminal result text |
<kbd> | Keyboard input | Enter |
Styling
🎨 CSS Variable Styling
Browsers default to italic text for var. Customize with CSS classes:
var-styles.css
var {
font-style: italic;
}
var.highlight {
color: #1e40af;
background: #eff6ff;
padding: 0.1rem 0.35rem;
border-radius: 4px;
}Reference
🧰 Attributes
The <var> tag has no tag-specific attributes. Global attributes and CSS control appearance:
class GlobalCSS hook for highlight colors, backgrounds, and spacing.
class="highlight"title GlobalTooltip explaining what the variable represents.
title="Radius of the circle" styled-var.html
<p>The value of <var class="highlight">x</var> in the equation is...</p>Use var for semantic variable names. Do not use it purely for italic decoration—use CSS on span if no semantic meaning applies.
Hands-On
Examples Gallery
Mathematical formulas, programming references, and styled variable highlights with copy-ready examples and live previews.
📚 Common Use Cases
Use <var> in tutorials, documentation, and educational content where variable names need semantic distinction from regular text.
Highlighted Variable in an Equation
Apply a CSS class to make a variable stand out in mathematical prose.
highlighted-var.html
<p>The value of <var class="highlight">x</var> in the equation is...</p>Mathematical Formulas
Mark variables like r in geometry and algebra formulas.
mathematical-formulas.html
<p>The area of a circle is calculated using the formula A = π<var>r</var><sup>2</sup>.</p>Programming Variable Names
Highlight the variable identifier inside a short code reference within a paragraph.
programming-variable.html
<p>In the code snippet, <code>var <var>myVariable</var> = 42;</code> initializes a variable.</p>A11y
♿ Accessibility
- Semantic meaning — Screen readers can identify variable references when
varis used correctly. - Do not confuse with emphasis — Use
emfor spoken stress, not for variable names. - Provide context — Explain what each variable represents in surrounding text or a
titleattribute. - Pair with code carefully — Full code blocks belong in
preandcode, not only invar.
🧠 How <var> Works
1
Author wraps variable name
Mark identifiers like x or radius in prose.
Markup
2
Browser renders italic
Default user-agent styles apply font-style: italic.
Rendering
3
CSS customizes appearance
Classes add color, background, and spacing for tutorials.
Styling
=
Clear variable references
Readers distinguish variable names from ordinary text and code.
Compatibility
Browser Support
The <var> tag is supported in all major browsers. No polyfills are needed.
HTML5 · Fully supported
Universal variable markup support
Every modern browser renders <var> with default italic styling. CSS customization works consistently across platforms.
100% Browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported
Full supportOpera Fully supported
Full support<var> tag 100% supported
Bottom line: Use <var> confidently in tutorials and documentation across all browsers.
Wrap Up
Conclusion
Mastering the <var> tag helps you convey mathematical and programming concepts clearly. Mark variable names semantically, style them with CSS when needed, and pair with <code> for full source snippets to build accessible, professional technical content.
Pro Tips
💡 Best Practices
✅ Do
- Use
varfor variable identifiers in math and code prose - Combine with
supandsubin formulas - Style highlights with CSS classes for tutorials
- Use
codefor full source code fragments - Explain what each variable represents nearby
❌ Don’t
- Confuse HTML
varwith JavaScriptvar - Wrap entire equations or statements in
var - Use
varonly for italic decoration - Replace
codeblocks withvarfor snippets - Skip semantic markup when referencing variable names
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about <var>
Bookmark these before your next coding tutorial.
5
Core concepts 01
Variable Names
<var> marks identifiers in math and code prose.
02
Italic Default
Browsers render var in italics by default.
03
Not JavaScript
HTML var is markup, not a JS keyword.
04
var vs code
Names in prose vs source code fragments.
Comparison 05
CSS Highlights
Classes add color and background for emphasis.
Styling❓ Frequently Asked Questions
The
<var> element marks a variable in a mathematical expression or programming context. Browsers typically render it in italics.var marks a variable identifier in prose. code marks a fragment of source code. Use both together when explaining which part of a snippet is the variable name.No. HTML
var is semantic markup for content. JavaScript var is a language keyword inside scripts.Yes. Wrap symbols like x and r in
var within formulas such as A = πr2.Yes. Override or extend the default italic style with
color, background, and padding via CSS classes.Yes. The
var element is fully supported in all modern browsers and Internet Explorer.Mark up variables in your tutorials
Practice the <var> tag with math and programming examples in the Try It editor.
About the author
5 people found this page helpful