HTML Entity for Ratio (∶)

Beginner

6 min read

Updated: Sep 2026

1 example

Unicode U+2236

HTML Entity for ratio (∶) tutorial illustration

Definition

What Is the Ratio Entity?

Ratio (∶) is the Mathematical Operators character at Unicode U+2236 (RATIO). It marks a mathematical ratio — written as a ∶ b. The preferred HTML form is the named entity &ratio;.

Remember

Character     ∶
Unicode       U+2236
Named entity  &ratio;
Hex entity    &#x2236;
Decimal       &#8758;
CSS escape    \2236

Named, numeric, and UTF-8 forms produce the same glyph: ∶. Prefer &ratio; for readable, portable markup. For everyday ratios like 3:1, an ASCII colon is often enough.

Reference

Quick Reference

One table for every form you will actually use.

Form	Code	Where it goes
Named entity	`&ratio;`	HTML markup (preferred)
Hex entity	`∶`	HTML markup
Decimal entity	`∶`	HTML markup
Direct character	`∶`	HTML text (UTF-8 default)
CSS escape	`\2236`	Stylesheet `content`

When to Use Which

Situation	Use
Readable math HTML (best default)	`&ratio;`
Numeric / generator output	`∶` or `∶`
UTF-8 math notes	Type or paste `∶`
Generated text via `::before` / `::after`	`content: "\2236"`
Everyday score / mix (3:1)	ASCII `:` (U+003A)
Proportion mark (four dots)	∷ (`U+2237`)

See it

Live Preview

Ratio rendered in common math contexts.

Glyph ∶

Large glyph ∶

In a relation a ∶ b

With entities Named: ∶ | Hex: ∶ | Decimal: ∶

Related : (ASCII) · ∷ (proportion) · ∝ (&prop;)

Code

Complete HTML Example

One page that shows ratio with named, hex, decimal, direct, and CSS forms. Use View Output or open the live editor.

Named + Hex + Decimal + Direct + CSS

Five ways to produce ∶ in a single document.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ratio (∶) in HTML</title>
  <style>
    #point::after {
      content: "\2236";
    }
  </style>
</head>
<body>
  <p>Using Named Entity: a &ratio; b</p>
  <p>Using Hex Code: a &#x2236; b</p>
  <p>Using Decimal: a &#8758; b</p>
  <p>Using Direct Character: a ∶ b</p>
  <p>Using CSS Entity: a <span id="point"></span> b</p>
</body>
</html>

Try It Yourself

How It Works

1. Named: &ratio; is the preferred HTML5 entity for U+2236.

2. Hex: U+2236 → ∶ in HTML. Same glyph as the named form.

3. Decimal: same code point as 8758 → ∶.

4. Direct: paste ∶ in a UTF-8 file with <meta charset="UTF-8">.

5. CSS: use \2236 in content (not an HTML entity). The empty #point span receives that ∶ via ::after.

Pitfalls & Tips

Common mistakes when working with this math entity.

Name

Prefer `&ratio;`

Use the named entity when possible. Numeric forms are fine for generators or when names are unavailable.

Not :

Not the ASCII colon

ASCII : (U+003A) is fine for scores and times. ∶ is the mathematical ratio operator.

Not ∷

∶ vs ∷

Proportion is U+2237. Ratio is U+2236. Related math punctuation — different code points.

Not prop

Not “proportional to”

&prop; (∝) means “varies as.” &ratio; is the ratio operator between two terms.

CSS vs HTML

Do not mix escapes

\2236 belongs in CSS. &ratio; / ∶ belong in HTML.

UTF-8

Declare charset

If you paste ∶ directly, serve the page as UTF-8 with <meta charset="UTF-8">.

Compatibility

Browser Support

Ratio (U+2236) and its entity forms (&ratio;, ∶, ∶, CSS \\2236) are supported in all mainstream browsers. Glyph availability depends on the font.

✓ Universal support

Ratio (∶)

Prefer &ratio;, or encode with hex, decimal, or CSS escape — same glyph everywhere (when the font has it).

100% Browser coverage

Google Chrome Supported

Yes

Microsoft Edge Supported

Yes

Mozilla Firefox Supported

Yes

Apple Safari Supported

Yes

Opera Supported

Yes

Internet Explorer All versions

Yes

U+2236 / &ratio; Full support

Bottom line: Prefer &ratio; in HTML. Use ∶ or ∶ as numeric alternatives, and \\2236 only inside CSS content.

Remember

Key Takeaways

Unicode: ratio is U+2236 (decimal 8758), Mathematical Operators.
HTML: prefer &ratio; — or ∶ / ∶.
CSS: use \2236 inside content for generated text.
Meaning: math ratio — not ASCII : and not ∷.

One line: U+2236 → &ratio; / ∶ / CSS \2236.

Frequently Asked Questions

How do I display the ratio symbol (∶) in HTML?

Prefer &ratio; (named). You can also use ∶ (hex), ∶ (decimal), type ∶ in UTF-8, or the CSS escape \2236 in content.

What is the Unicode value for ratio?

U+2236 (RATIO). Hex 2236, decimal 8758. It belongs to Mathematical Operators (U+2200–U+22FF).

Is there a named HTML entity for ∶?

Yes. HTML5 defines &ratio; for U+2236. Prefer it over numeric forms when you want readable markup.

When should I use the ratio HTML entity?

Use it in math and science when you want the mathematical ratio operator (a ∶ b). Prefer &ratio; for portable HTML. For everyday text like 3:1, an ASCII colon is often fine.

What is the difference between HTML code and CSS entity for ∶?

HTML entities (&ratio;, ∶, or ∶) go in markup. The CSS escape \2236 is used in stylesheets (usually in the content property of ::before/::after). Both render ∶.

How is ∶ different from : or ∷ (U+2237)?

∶ (&ratio;) is the mathematical ratio operator. : is the ASCII colon (U+003A). U+2237 is PROPORTION (often shown as four dots). Related ideas, different characters.

Did you know?

Ratio (∶) is Unicode U+2236 (decimal 8758) — RATIO in Mathematical Operators. HTML5 named entity: &ratio;. Prefer &ratio; in HTML. Write ratios as a &ratio; b. It is not the ASCII colon (:) or the proportion mark (∷, U+2237).

Next: Recycled Paper Symbol

Learn the HTML entity for the recycled paper symbol — the next character in this entity sequence.

Recycled Paper Symbol tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML Entity | Rams Horn HTML Entity | Recycled Paper Symbol