Computer languages commonly use special characters as part of their coding syntax. This means that a character in your page content that is also used in a computer language's code can cause a conflict, and your page may appear “broken.” If you want to display a special character and not have it parsed as part of the coding language, it's best to use ampersand notion, in place of the special character itself. Using ampersand notation helps the browser to know that your character is part of your content and not part of your code.
Ampersand notations are the HTML code equivalent of the character they represent. The ampersand, a symbol that represents "and," has a long history with programming languages. In HTML, each special character is created by starting with the ampersand. This symbol is typically followed by an abbreviation of the name of the character and ends with a semicolon (;) so that the browser knows that this is the end of the entity's code.
For example: In HTML we frequently use the characters < and > to write tags. Let's say you wanted to show a p-tag in your page content. How would you write out the tag for a paragraph and not have it parsed as part of your code?
We need to create the angle brackets using ampersand notation. These two characters are made with the following code:
| < = < | > = > |
| < p > = <p> | |
Do you see how "lt" and "gt" are abbreviations for "less than" and "greater than"? Almost all characters made with ampersand notation use that approach to make them easier to remember.
Here are a few other characters that are useful when writing content on a website. Click on each character to see its notation, explanation, and an example of how it's used.
| Character | Notation | Explanation | Example |
|---|---|---|---|
|
& |
An ampersand can be written in text content as "&", but it is considered best to use & to avoid potentially confusing the browser. |
peanut butter & jelly |
|
|
© |
This entity creates the symbol for copyright, which many designers will place in the footer of their websites. |
Website © Jane Doe. All rights reserved. |
|
|
— |
The em dash is a very long dash. It is most commonly used to create a break or to add emphasis in a sentence. The em dash can be used in place of commas, parentheses, or colons to add more effect. |
She received the email too late—three whole days past the deadline. |
|
|
– |
The en dash is closer to the length of a hyphen than the em dash. The en dash should be used when showing a span between numbers, including times and dates. |
The meeting will be held Mondays, 8–10 a.m. |
|
|
“ |
Instead of generic quotation marks that are vertical, these entities create quotation marks that curve to show whether they are beginning or ending a quote. |
“To be, or not to be.” |
|
|
|
The non-breaking space displays as one normal space. If you need to fill a table cell that should look empty or if you need a double space between text, you use a non-breaking-space since HTML only recognizes a single space when formatting text. |
1 2 3 |
You Try!
Using your own text editor or the coding space below, practice using ampersand notation in your HTML elements to see how they display. There are hundreds of different notations available. Below are a few more to practice with. Try to guess what they are by their notation before practicing with them!
| ← | ↑ | → | ↓ |
| ® | ™ | ? | ¿ |
| ✗ | ✓ | ☆ | ☎ |
