HTML Entity for Exclamation Mark (!)
What You'll Learn
How to display the Exclamation Mark (!) in HTML using hexadecimal, decimal, named entity, and CSS escape methods. This character is U+0021 (EXCLAMATION MARK) in the Basic Latin block (ASCII)—fundamental punctuation for emphasis, alerts, and strong statements on the web.
Render it with !, !, the named entity !, or CSS escape \21. You can usually type ! directly in UTF-8 content; entities help when encoding explicitly in attributes or sensitive markup.
⚡ Quick Reference — Exclamation Mark
U+0021Basic Latin (ASCII)
!Hexadecimal reference
!Decimal reference
!Explicit encoding
Name Value
──────────── ──────────
Unicode U+0021
Hex code !
HTML code !
Named entity !
CSS code \21
Meaning Exclamation mark (punctuation)
Related U+2049 = Exclamation question mark (⁉)Complete HTML Example
This example demonstrates the Exclamation Mark (!) using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\21";
}
</style>
</head>
<body>
<p>Exclamation Mark using Hexadecimal: !</p>
<p>Exclamation Mark using HTML Code: !</p>
<p>Exclamation Mark using HTML Entity: !</p>
<p id="point">Exclamation Mark using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Exclamation Mark entity is universally supported in modern browsers:
👀 Live Preview
See the exclamation mark (!) in alert and emphasis context:
! !🧠 How It Works
Hexadecimal Code
! uses the Unicode hexadecimal value 21 to display the Exclamation Mark. The x prefix indicates hexadecimal format.
Decimal HTML Code
! uses the decimal Unicode value 33 to display the same character.
Named Entity
! is the semantic named entity for the exclamation mark—useful when encoding explicitly in markup or attributes.
CSS Entity
\21 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All four methods produce the glyph: !. Unicode U+0021 in the Basic Latin block. Serve HTML as UTF-8.
Use Cases
The Exclamation Mark (!) commonly appears in:
Exclamatory sentences, headings, titles, and emphatic body text.
Warning messages, error labels, and notification copy.
Call-to-action buttons and labels (e.g. Submit!).
Slogans, banners, and promotional headlines.
Chat interfaces and quotes expressing strong emotion.
Required-field indicators and validation messages.
💡 Best Practices
Do
- Use
!when explicit encoding is needed in attributes - Type
!directly in UTF-8 body text when safe - Serve pages with UTF-8 (
<meta charset="utf-8">) - Use sparingly for real emphasis or alerts
- Use CSS
contentfor reusable alert icons
Don’t
- Overuse exclamation marks—they lose impact quickly
- Confuse ! with ⁉ (exclamation question mark / interrobang)
- Put CSS escape
\21in HTML text nodes - Rely on entities when a plain
!in UTF-8 suffices - 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
\21Unicode U+0021 — EXCLAMATION MARK
! is the standard named entity
Basic Latin (ASCII) punctuation
❓ Frequently Asked Questions
! (hex), ! (decimal), ! (named), or \21 in CSS content. You can also type ! directly in UTF-8 text.U+0021 (EXCLAMATION MARK). Basic Latin block (ASCII). Hex 21, decimal 33. Punctuation, emphasis, and alerts.! when you need explicit encoding in HTML attributes, generated markup, or contexts where the raw character could be misinterpreted. In normal UTF-8 body text, ! is fine.!, !, or !) go directly in markup. The CSS escape \21 is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.Explore More HTML Entities!
Discover 1500+ HTML character references — punctuation, symbols, and more.
About the author
8 people found this page helpful