Explain Codes LogoExplain Codes Logo

In HTML I can make a checkmark with ✓ . Is there a corresponding X-mark?

html
unicode-values
character-references
web-typography
Anton ShumikhinbyAnton Shumikhin·Oct 28, 2024
TLDR

Light-weight champion for X-mark in HTML is ✗ and the heavyweight title goes to ✕.

&#x2717; <!-- Bantamweight boxer --> &#x2715; <!-- Sumo wrestler -->

They're the numeric references of Unicode characters used in HTML for lightweight and bold X-marks respectively.

Digging into character references

Character entities in HTML let us extend beyond the keyboard. Corresponding to checkmark &#x2713;, HTML offers several X-marks:

  • Featherweight contender: &#x2717;
  • Heavy hitter: &#x2715;
  • Crowd's favorite: &#x2718;

Using these Unicode values ensures HTML renders the same glyphs, regardless of varying keyboard layouts or local settings.

X-ploring alternative X-marks and compatibility

&#x2717; bags the title but it doesn't hurt to be aware of alternative substitutes. Look at &#x2718;, &#x2715;, and &#x2716; — all vying for your attention. Font support can be a dealbreaker though.

To bulletproof your website against HTML4 and other relics, use numeric references. They point to specific Unicode characters, causing fewer headaches when faced with interoperability issues.

Adapting to different mediums

Some things in life aren't one-size-fits-all, including HTML symbols. Different contexts need different solutions:

  • Web typography: Not all fonts support all the Unicode characters. Don't get font-chosen, choose the font.
  • CSS: With ::before and ::after pseudo-elements adding symbols is a breeze — no HTML mess.
  • JavaScript: Don't forget the dynamic duo. Use JS to add symbols based on validation or user interaction.
  • Images: When all else fails, use SVGs or images — your own personal font Mafia who take care of appearance control.

Charting the Unicode universe

Embrace the full power of Unicode with even more symbol references:

  • Clarity is king: &#x2714;
  • A check with its own sandbox: &#x2611;

For your broader exploration mission, websites like amp-what.com are your symbol encyclopedia, awaiting thorough investigation.

Battling potential challenges

Some common issues when dealing with character references:

  • Font rebellions: Some fonts won't render all Unicode characters. Consider a little font diplomacy to ensure consistent display across platforms.
  • Scaling woes: Unlike their SVG and image counterparts, text scaling can sometimes lose readability. Keep your symbol clear, no matter how petite.
  • Color and style dilemmas: Meaningful symbols don't have to sacrifice style. Show off your CSS skills while maintaining relevant communication.