HTML entities are a set of special encoded characters reserved for use in the HTML.

Entities can represent arrows, currency, letters, mathematical operators, numbers, punctuation, symbols, shapes and more. Some of the most familiar are a copyright character - © or a heart symbol - ♥.

Entities are also useful when you need to insert a reserved character inside HTML tag like < or > signs. These signs are used by HTML, but you can use < or > entities to display them.

Another useful enity is   which is non breakable space. The name says it all. If you want to add several spaces to your HTML you’ll need to use several   entities, each one will represent one space. Otherwise if you enter multiple spaces on a keyboard HTML will trim them to one sinle space.

Each entity starts with an ampersand & and ends with a semicolon ;. The middle part can be:

• entity name;
• decimal code;
• hexadecimal code.

Examples

Below just a few examples of some of the entities.

The best part about entities is that you might not need an icon library, complex CSS or SVG to display a special character or a symbol.

And since entities are strings, you can apply different implementations like HTML, CSS and JavaScript.

You just add the necessary entity code to your HTML and that’s it. The example below uses entity name.

HTML:

<p>&copy; Copyright</p>

Example with non breakable space

HTML:

<p>A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Z</p>

You can access the data attribute of an HTML tag containing the entity code in CSS. The example below uses hexadecimal code.

HTML:

<p class="price" data-entity="&#x020AC;">19.95</p>

CSS:

.price::before {
  content: attr(data-entity);
}

Lastly, you can insert an entity code with JavaScript. The example below uses decimal code.

HTML:

<p id="entity">Like</p>

JavaScript:

const entity = document.getElementById('entity')
entity.innerHTML += '♥'

The results will look like this:

See the Pen rPYOZb by Nikita Hlopov (@nikitahl) on CodePen.

Resources

There are hundreds of various entities available. The following links contains a vast list of entities with visual and encoded representations with a name/decimal/hexadecimal values.

https://dev.w3.org/html5/html-author/charref - Official W3C entity reference https://www.toptal.com/designers/htmlarrows/symbols - Designers collection of entities with categories, search and view