HTML Entity for Ratio (∶)
What You'll Learn
How to display the ratio symbol (∶) in HTML using various entity methods. The ratio operator represents a mathematical ratio between quantities and is essential for geometry, fractions, proportion problems, and formal mathematical notation.
This character is part of the Mathematical Operators Unicode block and can be rendered with a hexadecimal reference, a decimal reference, the named entity ∶, or a CSS escape in the content property. Do not confuse ∶ with U+2237 (∷, proportion) or an ordinary ASCII colon (:).
⚡ Quick Reference — Ratio Entity
U+2236Mathematical Operators block
∶Hexadecimal reference
∶Decimal reference
∶Most readable option
Name Value
──────────── ──────────
Unicode U+2236
Hex code ∶
HTML code ∶
Named entity ∶
CSS code \2236
Meaning Ratio operator
Related U+2237 = proportion (∷)
U+221D = proportional to (∝)
Block Mathematical Operators (U+2200–U+22FF)Complete HTML Example
A simple example showing ∶ using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point::after{
content: "\2236";
}
</style>
</head>
<body>
<p>Ratio (hex): a ∶ b</p>
<p>Ratio (decimal): a ∶ b</p>
<p>Ratio (named): a ∶ b</p>
<p>Ratio (CSS): a <span id="point"></span> b</p>
</body>
</html>🌐 Browser Support
The ratio entity is universally supported in all modern browsers:
👀 Live Preview
See the ratio symbol rendered live in different contexts:
🧠 How It Works
Hexadecimal Code
∶ uses the Unicode hexadecimal value 2236 to display the ratio symbol. The x prefix indicates hexadecimal format.
Decimal HTML Code
∶ uses the decimal Unicode value 8758 to display the same character.
CSS Entity
\2236 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Named Entity
∶ is the semantic named entity — the easiest to read in source HTML and the most self-descriptive option.
Same visual result
All four methods produce the ratio glyph: ∶. Unicode U+2236 sits in the Mathematical Operators block (U+2200–U+22FF).
Use Cases
The ratio symbol (∶) commonly appears in the following scenarios:
Ratio notation in formulas, problems, and step-by-step solutions.
Side-length ratios, similar triangles, and scale factor expressions.
Academic content, lesson notes, and online course materials.
Odds ratios, rate comparisons, and data analysis write-ups.
Engineering specs, mix ratios, and proportional scaling docs.
Interactive math tutorials and entity reference pages.
💡 Best Practices
Do
- Use
∶for readable source markup - Pick one style (hex / decimal / named) per project
- Use ∶ for formal mathematical ratio notation
- Test the glyph across browsers and devices
- Pair ∶ with plain text on first use in educational content
Don’t
- Substitute an ASCII colon (
:) when ∶ is required - Confuse ∶ (ratio) with ∷ (proportion) or ∝ (proportional to)
- Use CSS escape
\2236inside HTML text nodes - Use padded Unicode notation like U+02236—the correct value is
U+2236 - Mix entity styles randomly in one file
Key Takeaways
Three HTML references plus CSS all render ∶
∶ ∶ ∶For CSS stylesheets, use the escape in the content property
\2236Unicode U+2236 belongs to the Mathematical Operators block (U+2200–U+22FF)
Prefer ∶ for readability—distinct from colon and proportion symbols
Previous: Rams Horn (ɤ) Next: Recycled Paper Symbol
❓ Frequently Asked Questions
∶ (hex), ∶ (decimal), ∶ (named), or \2236 in CSS content. All produce ∶.U+2236 (hex 2236, decimal 8758). It denotes a ratio in the Mathematical Operators block.∶) is the ratio operator. ∷ (U+2237, ∷) is the proportion operator. : (U+003A) is an ordinary ASCII colon—not the same character.∶, ∶, and ∶ are equivalent in modern browsers and all render ∶.Explore More HTML Entities!
Discover 1500+ HTML character references — math operators, symbols, punctuation, and more.
About the author
8 people found this page helpful