💻 Chapter 15: Code, Monospace & Preformatted Text

The var Element for Variables

Marking up mathematical variables, algorithm placeholders, programming identifiers, and scientific constants.

LEARNING OBJECTIVES ⌵

Understand the WHATWG specification for <var> (Variables and Placeholders).
Differentiate between <var>, <i> (idiomatic text), and <em> (emphasis).
Represent mathematical formulas and physics equations using <var>, <sup>, and <sub>.
Style variables for both mathematical notation (serif italics) and programmatic syntax (monospace).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine reading a high school physics textbook:

"The kinetic energy $E_k$ of an object is equal to $\frac{1}{2} m v^2$, where $m$ is mass and $v$ is velocity."

In that equation, $m$ and $v$ are not literal letters of the alphabet; they are placeholders representing numbers that can vary depending on the experiment. If a 1,000 kg car travels at 20 m/s, you replace $m$ with 1,000 and $v$ with 20.

In HTML, the <var> element represents a variable in a mathematical expression, a physical formula, or a programmatic context (such as function parameters or template placeholders). It alerts browsers and assistive technology that the enclosed character is a variable rather than standard reading text.

Mathematical Formula:
<var>E</var> = <var>m</var><var>c</var><sup>2</sup>
  |             |          |
Energy        Mass      Speed of Light (Constants & Variables)

Technical Deep Dive & Specifications

WHATWG Specification & Semantic Definition

According to the WHATWG HTML Living Standard:

The <var> element represents a variable.
This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or simply a placeholder in prose.

Default Browser Rendering

By default, browsers render <var> with:

var {
  font-style: italic;
}

Semantic Differentiation: `<var>` vs `<i>` vs `<em>`

Element	Primary Semantic Purpose	Example	User-Agent Styling
`<var>`	A variable, mathematical parameter, or placeholder	`<var>x</var> + <var>y</var> = <var>z</var>`	Italics
`<em>`	Stress emphasis that changes the meaning of a sentence	"I love* this framework"*	Italics
`<i>`	Idiomatic text, technical terms, taxonomic names, thoughts	Homo sapiens, Schadenfreude	Italics

Math Typography vs Programmatic Variable Styling

In mathematical documents, variables are traditionally rendered in serif italics (such as Computer Modern, Times New Roman, or Latin Modern Math):

/* Mathematical Variable Styling */
.math var {
  font-family: "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
  font-style: italic;
  font-size: 1.1em;
  padding: 0 0.1em;
}

In programming documentation, variables inside code snippets are often monospace tokens styled with distinct variable syntax colors:

/* Programmatic Variable Styling */
code var {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-style: italic;
  color: #f59e0b; /* Amber variable highlight */
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 26–34: Formats .math-display using classical serif math fonts (Cambria Math, Latin Modern Math) and styles <var> in deep ocean blue.
Line 36–42: Targets pre code var so programmatic variables inherit the monospace typeface while keeping italics and an amber color token.
Line 57–59: Combines <var>, <sub>0</sub> (subscript for initial velocity), and <sup>2</sup> (superscript for squared time) to build a clean mathematical equation.
Line 65–67: Nests <var> inside a JavaScript <code> block to mark function parameters (userName, emailAddress, userRole) as variable placeholders.

Expected Browser Render Output

A centered mathematical card showing $d = v_0t + \frac{1}{2}at^2$ with elegant italic blue serif variables.
A dark-themed code block where function arguments userName, emailAddress, and userRole stand out in italicized amber monospace font.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Var Element in Math and Code</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      line-height: 1.7;
      max-width: 680px;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #1e293b;
    }

/* Math Formula Card */
    .formula-card {
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1.5rem;
      margin: 1.5rem 0;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

.math-display {
      font-family: "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
      font-size: 1.5rem;
      margin: 0.5rem 0;
      color: #0f172a;
    }

.math-display var {
      font-style: italic;
      color: #0369a1;
    }

/* Code parameter styling */
    pre code var {
      font-family: ui-monospace, monospace;
      font-style: italic;
      color: #eab308;
      font-weight: 500;
    }

pre {
      background-color: #0f172a;
      color: #f8fafc;
      padding: 1rem;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <h1>Kinematics & Algorithm Variables</h1>

<h2>1. Physics: Uniform Acceleration Formula</h2>
  <p>The displacement of an object moving under constant acceleration is defined by:</p>

<div class="formula-card">
    <div class="math-display">
      <var>d</var> = <var>v</var><sub>0</sub><var>t</var> + &frac12;<var>a</var><var>t</var><sup>2</sup>
    </div>
    <p>Where <var>d</var> is distance, <var>v</var><sub>0</sub> is initial velocity, <var>t</var> is time, and <var>a</var> is acceleration.</p>
  </div>

<h2>2. API Function Definition</h2>
  <p>Substitute your parameters into the user creation handler:</p>
  <pre><code>function createUser(<var>userName</var>, <var>emailAddress</var>, <var>userRole</var>) {
  return db.insert({ name: <var>userName</var>, email: <var>emailAddress</var>, role: <var>userRole</var> });
}</code></pre>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Pythagorean Theorem & Euclidean Distance

Instructions:

Create a geometry documentation snippet defining the Distance Formula between two 2D points: $P_1(x_1, y_1)$ and $P_2(x_2, y_2)$.
Use <var> for all variable placeholders ($d$, $x_1$, $x_2$, $y_1$, $y_2$).
Use <sub> for point subscripts and <sup> for squared exponents.
Provide an explanation sentence describing what each variable represents.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Euclidean Distance</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      max-width: 640px;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #334155;
    }

    .math-box {
      background-color: #f1f5f9;
      border-left: 4px solid #3b82f6;
      padding: 1.25rem 1.5rem;
      border-radius: 0 8px 8px 0;
      margin: 1.5rem 0;
    }

    .formula {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 1.35rem;
      font-weight: 500;
      color: #1e293b;
      margin-bottom: 0.5rem;
    }

    var {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h2>2D Euclidean Distance Formula</h2>

  <div class="math-box">
    <div class="formula">
      <var>d</var> = &radic;((<var>x</var><sub>2</sub> &minus; <var>x</var><sub>1</sub>)<sup>2</sup> + (<var>y</var><sub>2</sub> &minus; <var>y</var><sub>1</sub>)<sup>2</sup>)
    </div>
    <p>
      Where <var>d</var> is the straight-line distance between 
      point (<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>) and 
      point (<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>).
    </p>
  </div>
</body>
</html>

Why this works:

Every variable is explicitly marked with <var>, giving screen readers and parsers correct semantic hooks.
Subscripts (<sub>1</sub>, <sub>2</sub>) and exponents (<sup>2</sup>) provide correct mathematical notation.
Character entities √ (√) and − (−) maintain typographic precision.

⚠️ Common Pitfalls

Using <i> for Mathematical Variables: While <i> renders text in italics, it lacks the semantic meaning of a variable or mathematical placeholder.
Using <var> for Emphasis: Never use <var> when you want to emphasize a word in a sentence (use <em>).
Applying Monospace Globally to <var>: <var> is widely used in math formulas. If your global stylesheet sets var { font-family: monospace; }, mathematical equations will look distorted. Only apply monospace when scoped inside code var or pre var.

💡 Pro Tips

MathML Integration: For complex mathematical publications (integrals, fractions, matrices), pair <var> with modern HTML5 <math> (MathML) elements:
```
<math display="block">
  <mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup>
</math>
```
Template Documentation Replacement: In CLI documentation, use <var> to denote arguments that users must replace with their own values: <code>git checkout -b <var>branch-name</var></code>.

📌 Key Takeaways

The <var> element represents a variable in a mathematical equation, physics formula, or programmatic context.
Browsers render <var> as italicized text by default (font-style: italic).
Differentiate <var> (variables) from <em> (stress emphasis) and <i> (idiomatic phrasing).
Combine <var> with <sup> (superscripts) and <sub> (subscripts) for mathematical expressions.
Nest <var> inside <code> or <pre> to identify function parameters and command placeholders.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which HTML element is semantically designated for marking up the $x$ and $y$ placeholders in the equation $y = mx + b$?

Topic: HTML Fundamentals

? Question 2 / 3

What is the default user-agent CSS styling applied to the `<var>` element?

Topic: HTML Fundamentals

? Question 3 / 3

How should you mark up a documentation snippet telling a user to run `npm install <package-name>` where `package-name` is a variable placeholder?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WHATWG Specification & Semantic Definition

Default Browser Rendering

Semantic Differentiation: <var> vs <i> vs <em>

Math Typography vs Programmatic Variable Styling

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Pythagorean Theorem & Euclidean Distance

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which HTML element is semantically designated for marking up the $x$ and $y$ placeholders in the equation $y = mx + b$?

What is the default user-agent CSS styling applied to the <var> element?

How should you mark up a documentation snippet telling a user to run npm install <package-name> where package-name is a variable placeholder?

Semantic Differentiation: `<var>` vs `<i>` vs `<em>`

What is the default user-agent CSS styling applied to the `<var>` element?

How should you mark up a documentation snippet telling a user to run `npm install <package-name>` where `package-name` is a variable placeholder?