HTML Entities – Codeskill

Special characters and symbols

HTML entities let you display characters that would otherwise break your markup or aren’t easy to type on a keyboard – things like <, &, ©, and €.

What are HTML entities?

An entity is a short code that represents a character. The browser renders the character, but your HTML source stays valid because reserved symbols aren’t written literally.

Why use them?

Reserved characters: < and > are part of HTML syntax. To show them as text, use entities.
Hard-to-type characters: entities let you display symbols like © or € without hunting for them on your keyboard.
Consistency: entities render the same across browsers and platforms.

Common HTML entities

Ones you’ll see regularly:

< and > for < and >.
& for &.
" for ".
' for '.
  for a non-breaking space.
© for ©.
® for ®.
€ for €.

Example usage

<p>The less than symbol looks like this: &lt; and the greater than symbol looks like this: &gt;</p>
<p>To display an ampersand, use &amp;</p>

Symbols in web design

Entities aren’t just for reserved characters. There’s a wide range of symbols available for arrows, maths marks, and other icons.

Symbols and icons

For example, → gives you → and + gives you +.

Typographical entities

HTML also has entities for longer dashes (— and –), but a plain hyphen works fine for most headings and ranges. Keep it simple unless you specifically need the longer dash characters.

Example: punctuation in markup

<p>Thoughts on Web Design - Trends &amp; Patterns</p>
<p>Ranges: 10-20</p>

How to write an entity

The pattern is simple:

Start with an ampersand &.
Follow with the entity name, or a # and the entity number.
End with a semicolon ;.

Named vs numeric entities

Named entities like < are easier to read. Numeric codes like < work everywhere if the name isn’t supported.

Entities and accessibility

Some entities help assistive technology. Using … for an ellipsis, for example, can be read more reliably than three full stops typed in a row.

Unicode beyond basic entities

For characters outside the common set, numeric Unicode references work. Unicode covers characters from many languages and scripts.

Example: a Unicode character

<p>The Japanese character for water is: &#27700;</p>

Best practices

Use entities for reserved characters: always escape <, >, and & when you mean to display them as text.
Prefer named entities: they’re easier to read and remember.
Check your character encoding: make sure your page encoding supports the characters you’re using, especially for non-Latin scripts.

Entities are a small detail, but getting them right stops broken markup and odd rendering. Worth knowing even if you only reach for the common ones day to day.