#30DaysofHTML Day 14: < var >

Not like any variable you know

and

Apr 14, 2021

If you are referencing math or programming, or writing out a math equation, the variables in those expressions can be wrapped in a <var> element.

The browser will often render the variable as italicized by default, but like with many things on the web, it depends.

Examples using <var>

✅ <var> is useful when you are discussing your programming:

<pre>
  <code>
    for(let i = 0; i<10; i++) {
      console.log(i); 
    }
  </code>
</pre>  
<p>This code loops over an index position, <var>i</var>, and prints out all of the numbers from 0 to 9.</p>

✅ Or when writing out a simple math formula:

<p>The area of a circle can be found by multiplying pi times the radius squared, which we can write as π<var>r</var><sup>2</sup></p>

❓Not much is written about <var>. It really is a simple element! But our feeling is that it can be used in conjunction with <code>, <pre>, <kbd> and <samp> as needed.

Reminder about writing math

If you need to write out a lot of math, like you're Matt Damon in Good Will Hunting, then WHATWG and MDN both suggest considering the MathML standard, which is essentially special XML tags for math equations.

<var> demo

🖥 View the <var> demo on CodePen. Erika did a great job combining <pre>, <code>, <var>, <samp>, and even <small> in this one! If you’re writing web pages to talk about code, this is a good demo.

Also: the end-of-unit challenge is coming… this is good study material!

View the CodePen example

No challenge, no quiz

Not today, as there’s not much to say. But we do recommend the demo above.

More information and examples

📚 MDN: <var>

📚 WHATWG: <var>