You've definitely used these symbols before without thinking twice — the copyright notice in a footer, the arrow on a "Next" button, the bullet separating nav links. Today I actually sat down and learned where they come from and how to use them properly. Turns out there's a whole system behind it.
What Even Is an HTML Entity?
When the browser reads your HTML, certain characters mean something special — like < and > which define tags. So if you just type < in your content, the browser might get confused and think you're opening a tag. HTML entities are the safe way to say "I want to display this character, not use it as code."
Every entity has three forms — the HTML version, the CSS version, and the JavaScript version. Same symbol, different syntax depending on where you're using it.
Essential UI & Layout Symbols
These are the ones you'll reach for most often in actual UI work:
— A non-breaking space. Looks like a regular space but prevents the browser from splitting two words across lines. Great for things like "10 km" or "Step 1" staying together.
✓ or ✓ — A checkmark. Clean way to show success states, completed tasks, or form validation without pulling in an icon library.
→ or → — Right arrow. Lives on "Next" buttons, "Read More" links, dropdown indicators. The unsung hero of UI navigation.
← or ← — Left arrow. The "Back" or "Previous" counterpart. Same energy, opposite direction.
• or • — A bullet point. Useful for custom list styling or as a visual separator — like Home • About • Contact in a nav bar.
… or … — An ellipsis. Signals that there's more content, or that text has been cut off. One character, not three dots typed manually.
Reserved Characters — These Ones Actually Matter
These aren't just nice-to-haves — if you're ever displaying code snippets or writing technical content, skipping these will break your layout in ways that are annoying to debug:
< — Displays < without the browser treating it as an opening tag.
> — Displays > without the browser treating it as a closing tag.
& — Displays & without triggering another entity by accident.
If you're building anything that shows code to users, you'll use these constantly.
Legal & Professional Symbols
Nothing fancy here, but you'll need them the moment you're building anything remotely professional:
© or © — Copyright. Goes in your footer, every time.
® or ® — Registered trademark. After a product name that's officially registered.
™ or ™ — Trademark. The less official version — used before a product is registered or just as a general indicator.
Math & Currency
€ or € — Euro. Any European pricing.
£ or £ — British Pound. UK pricing.
± or ± — Plus or minus. Useful in technical specs, measurements, or any range display.
≠ or ≠ — Not equal to. Comes up more than you'd think in data comparison UI or any math-heavy interface.
The CSS (\2713) and JavaScript (\u2713) equivalents follow the same Unicode value — just formatted differently depending on where you're dropping them. Same character, three different contexts.
Top comments (0)