Reserved characters in HTML must be replaced with character entities.
Some characters are reserved in HTML.
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:
To display a less than sign (<) we must write: < or <
Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for entity numbers is good.
A commonly used entity in HTML is the non-breaking space:
A non-breaking space is a space that will not break into a new line.
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.
- § 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|| || ||Try it »|
|<||less than||<||<||Try it »|
|>||greater than||>||>||Try it »|
|&||ampersand||&||&||Try it »|
|“||double quotation mark||"||"||Try it »|
|‘||single quotation mark (apostrophe)||'||'||Try it »|
|¢||cent||¢||¢||Try it »|
|£||pound||£||£||Try it »|
|¥||yen||¥||¥||Try it »|
|€||euro||€||€||Try it »|
|©||copyright||©||©||Try it »|
|®||registered trademark||®||®||Try it »|
Note: Entity names are case sensitive.
Combining Diacritical Marks
A diacritical mark is a “glyph” added to a letter.
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.
Diacritical 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:
|̀||a||à||à||Try it »|
|́||a||á||á||Try it »|
|̂||a||â||â||Try it »|
|̃||a||ã||ã||Try it »|
|̀||O||Ò||Ò||Try it »|
|́||O||Ó||Ó||Try it »|
|̂||O||Ô||Ô||Try it »|
|̃||O||Õ||Õ||Try it »|
You will see more HTML symbols in the next chapter of this tutorial.