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:
- Entity Names: These are descriptive names, like
<
(less than) or&
(ampersand), making them easier to remember. The format is&entity_name;
- 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 |
---|---|---|
< |
< |
< |
> |
> |
> |
& |
& |
& |
" |
" |
" |
' |
' |
' |
Note that entity names are case-sensitive.
Non-Breaking Space
The non-breaking space entity,
(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 | ã |
ã |