HTML Entity for Colon (:)
What You'll Learn
How to display the Colon (:) in HTML using numeric references, the named entity, and CSS escapes. This character is U+003A (COLON) in the Basic Latin block (ASCII). It is used for punctuation, time notation (12:30), ratios (16:9), labels, and markup syntax.
You can use the named entity :, hex :, decimal :, or CSS \3A. You can usually type : directly on the keyboard; entities help when escaping or referencing explicitly. Do not confuse : with Colon Equals U+2254 (≔) or Colon Sign U+20A1 (₡, Costa Rican currency).
⚡ Quick Reference — Colon
U+003ABasic Latin / ASCII
:Hexadecimal reference
:Decimal reference
:Standard HTML entity
Name Value
──────────── ──────────
Unicode U+003A
Hex code :
HTML code :
Named entity :
CSS code \3AComplete HTML Example
This example demonstrates the Colon (:) using hexadecimal code, decimal HTML code, the named entity :, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\3A";
}
</style>
</head>
<body>
<p>Colon using Hexa Decimal: :</p>
<p>Colon using HTML Code: :</p>
<p>Colon using HTML Entity: :</p>
<p id="point">Colon using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+003A is universally supported in all browsers:
👀 Live Preview
See the Colon in common contexts:
🧠 How It Works
Hexadecimal Code
: references code point U+003A using hex digits 3A.
Decimal HTML Code
: is the decimal equivalent (58) for the same character.
Named HTML Entity
: is the standard named entity for U+003A—readable when escaping punctuation in HTML.
CSS Entity
\3A is the CSS escape for U+003A, used in the content property of ::before or ::after.
Same visual result
All four methods produce the Colon glyph: :. Unicode U+003A is basic ASCII punctuation.
Use Cases
The Colon (:) commonly appears in:
Schedules, timetables, and time pickers (12:30, 24:00).
Technical specs and education (16:9, 4:3).
Key-value pairs in forms, lists, and data display.
CSS pseudo-elements (::before), docs, and escaped examples.
Programmatic output when the character must be escaped.
Punctuation and character entity glossaries.
Use clear structure for time and ratios so screen readers parse meaning correctly.
💡 Best Practices
Do
- Type
:directly for normal prose and time - Use
:when escaping in tutorials or generated HTML - Keep entity style consistent when using references
- Use
\3Aonly inside CSScontent - Structure labels clearly (e.g. visible text before/after the colon)
Don’t
- Confuse punctuation colon (:) with Colon Equals (≔) or currency ₡
- Over-escape every colon when plain typing works fine
- Use U+003A notation incorrectly—standard form is U+003A
- Put CSS escape
\3Ain HTML text nodes - Mix entity styles randomly in one file
Key Takeaways
Named entity for escaping
:Numeric references also render :
: :For CSS stylesheets, use the escape in the content property
\3AU+003A COLON (ASCII punctuation)
Four methods, one glyph — universally supported
❓ Frequently Asked Questions
: (named entity), : (hex), : (decimal), or \3A in CSS content. You can also type : directly on the keyboard.U+003A (COLON). Basic Latin / ASCII. Hex 3A, decimal 58.:, :, or :) go directly in markup. The CSS escape \3A is used in stylesheets, typically in the content property of pseudo-elements.: is the named entity for U+003A. It is well supported and easy to remember when you need to escape the punctuation colon.Explore More HTML Entities!
Discover 1500+ HTML character references — math operators, symbols, arrows, and more.
About the author
8 people found this page helpful