HTML Entities 😀

Reserved characters in HTML must be replaced with character entities.

HTML Entities

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name;
OR

&#entity_number;

Non-breaking Space

A commonly used entity in HTML is the non-breaking space:  

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

  • § 10
  • 10 km/h
  • 10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

Tip: The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.

Some Useful HTML Character Entities

Result Description Entity Name Entity Number Try it
non-breaking space &nbsp; &#160; Edit it yourself
< less than &lt; &#60; Edit it yourself
> greater than &gt; &#62; Edit it yourself
& ampersand &amp; &#38; Edit it yourself
" double quotation mark &quot; &#34; Edit it yourself
' single quotation mark (apostrophe) &apos; &#39; Edit it yourself
¢ cent &cent; &#162; Edit it yourself
£ pound &pound; &#163; Edit it yourself
v yen &yen; &#165; Edit it yourself
euro &euro; &#8364; Edit it yourself
© copyright &copy; &#169; Edit it yourself
® registered trademark &reg; &#174; Edit it yourself

Combining Diacritical Marks

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

iacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

Mark Character Construct Result Try it
` a a&#768; &#160; Edit it yourself
́ a a&#769; &#60; Edit it yourself
̂ a a&#770; &#62; Edit it yourself
̃ a a&#771; &#38; Edit it yourself
̀ o O&#768; &#34; Edit it yourself
́ o O&#769; &#39; Edit it yourself
̂ o O&#770; &#162; Edit it yourself
̃ o O&#771; &#163; Edit it yourself