Using HTML Entities: Displaying Special Characters Correctly

Learn how to use HTML entities to display special characters (like <, >, &, etc.) correctly in your web pages. This tutorial explains different ways to represent HTML entities (decimal, named), provides examples, and demonstrates their use in creating well-formed and correctly displayed HTML content.



Using HTML Entities

Why Use HTML Entities?

Some characters have special meanings in HTML (like the less-than symbol, <, which starts an HTML tag). To display these characters literally in your text, you must use HTML entities. These are special codes that represent reserved characters.

Entity Types

There are two ways to represent HTML entities:

  1. Entity Names: These are descriptive names, like < (less than) or & (ampersand), making them easier to remember. The format is &entity_name;
  2. Entity Numbers: These are numeric codes representing the character. The format is &#entity_number;. Entity numbers are less intuitive than entity names.

Examples:

Character Entity Name Entity Number
< &lt; <
> &gt; >
& &amp; &
" &quot; "
' &apos; '

Note that entity names are case-sensitive.

Non-Breaking Space

The non-breaking space entity, &nbsp; (or  ), creates a space that prevents a line break. This is helpful for keeping certain words or numbers together.

Combining Diacritical Marks

Diacritical marks (accents and other glyphs added to letters) can be combined with characters using HTML entities to create characters not directly available in the page's character set. This is particularly useful for internationalization.

Examples:

Mark Character Entity Combination Result
Grave Accent (̀) a à
Acute Accent (́) a á
Circumflex (̂) a â
Tilde (̃) a ã