What is an HTML Entity?

If you've worked with HTML before or have spent your fair share of time editing online content, you might have seen HTML entities. These are short strings that represent reserved or invisible characters. For instance, if you need a white‑space character added to a string, you could write  . The chances are high that if you've ever come across the sort of automatically‑generated code that a web builder like Dreamweaver produces, you will have seen a whole lot of   in there!

When viewed via the browser, this entity is translated and you end up with just a space rather than any of the code you entered, or that appears in the markup. There are all kinds of HTML entities out there, some that represent symbols like the trademark or copyright symbols (™ and © respectively), some that represent punctuation (such as & for ampersands), mathematical symbols and even non‑English alphabets. However, they all begin with an ampersand (&) and end with a colon (;).

HTML entities can be written in named reference style (which is the style I'm using here as it's the clearest), decimal character code, or hexadecimal character code style. You can also write them in unicode (although these don't make use of the ampersand and semicolon). Some entities will not have translations in all of these styles. For example, there's no named reference for the vast majority of characters available on the standard keyboard.

Each of these styles look a little different from the other ‑ for instance, the HTML entity codes available for the degree celsius signifier (℃) are: Unicode (U+02103), Hexadecimal (℃), and Decimal (℃). It doesn't have a named reference, although you could achieve similar by adjoining the degrees symbol with a capital C: °C.

In the world of JSX development, HTML entities have fallen into the background a little bit it is still an extremely valuable skill to master. You can find a handy list of HTML entities (which, coincidentally, I helped curate) here.