DEV Community

Cover image for HTML Entities - A Forgotten But Useful Spec
James 'Dante' Midzi
James 'Dante' Midzi

Posted on • Edited on

2

HTML Entities - A Forgotten But Useful Spec

Let me paint you a picture:

You've built your site/application, it looks real good in development. You decide it's ready to be deployed. You choose a simple solution - Netlify/Vercel - where you only need to link your repository.

You click deploy and wait...

Lo and behold the deploy failed. You're confused as to why, you did everything correct.

So you check the deploy logs and are greeted with this:

Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities
Enter fullscreen mode Exit fullscreen mode

What Does This Mean?

Well, simply put somewhere in your pages or components you used the apostrophe and Vercel/Netlify is telling you that it isn't advisable to use those characters on a production site.

The Security Risk

By using apostrophes, quotation marks or any other symbols on your keyboard , it opens up your site to external injection attacks. Those characters, easy as they are make it easy as well for hacker to add code to your site or app.


The Solution - HTML Entities

Long ago, in the before time there were code, character codes that aided us in displaying characters on websites - HTML Entities

With the advancement of technology, our keyboards became more versatile and those entities got relegated to the back benches. They didn't away, they just got forgotten.

But in rare occasions, you will come across them whether by accident or because you need a specific character.

I am sure you have seen these combinations of characters. In most cases they follow the pattern of ampersand, the specific code (a word or number) and a semicolon. A common one is © which would display the copyright symbol.

Some Useful Entities

I've complied a table below of HTML Entities that you may find useful.

Character Entity
' '
" "
‐ or ‐
© ©
® ®
←
&rarr
↑
↓
$ &dollar or $
£ £
€

So next time when you need a common icon, before you rush to
an icon pack, consider if this forgotten spec can be of use. An added bonus; you're not adding someone else's library into your project.


Conclusion

Did you know about HTML Entities? Have you used any of them? Are there any you think I should know about? Please, let me know...


Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on Twitter, Polywork and LinkedIn

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video