When creating HTML, you might come across some characters you can't type for one reason or another. For example, suppose you wanted to produce this output on a page:
I learned that 7 < 10.
If we just type that in a <p> element, then the < is assumed to be the start of a tag. This will cause errors in the validator and probably in browsers.
In order to display a “<” (or other special characters) on a page, we need to use a character reference. The actual code we type in the HTML file to display the above is:
I learned that 7 < 10.
The < is a character reference: it starts with a ampersand and ends with a semicolon.
References for Special Characters
There are a few more special characters that you can't just type literally in HTML documents, and you need to use entities to produce these. These come up often, and are probably worth remembering.
| Character | Reference | Description |
|---|---|---|
| < | < | less-than (usually starts a tag) |
| > | > | greater-than (usually ends a tag) |
| & | & | ampersand (usually starts a reference) |
| " | " | double quote (usually wraps attribute values) |
| ' | ' | apostrophe/single quote (can wrap attribute values) |
The " and ' references are only needed in attribute values. You can use a quote character in text “<p>He said "hello"</p>” but not inside a quoted value: “<p title="with a "quote"">…</p>”.
Other Characters
There may be other characters that you want to use on a page, but can't type because of your keyboard (or other input method). Character references can be used for these as well.
There are many characters in this category, and you certainly aren't expected to remember them all, but here are a few that you might find useful.
| Character | Reference | Description |
|---|---|---|
| € | € | Euro sign |
| © | © | Copyright symbol |
| “ | “ | left double-quote |
| ” | ” | right double-quote |
| … | … | ellipsis |
| λ | λ | Greek lowercase lambda |
| ✓ | ✓ | checkmark |
You can refer to an HTML character reference chart or a character search when you need another character.
Numeric Character References
There are even more characters available than have named references in the chart. The characters available in HTML are the (120,000 or so) defined in the Unicode character set.
Since there aren't names for these characters, we can refer to them by number. Numeric references have a # to indicate a numeric (not named) reference and look like this ♪ to produce the character “♪”. You might also see references that start with #x like ♪ which also produces the “♪” character: they are equivalent and it doesn't matter which you use (likely whichever you find in the reference/search you use).
Again, a character search is likely the most practical way to find one of these characters when you need it. (If you search for “eighth note” you should find the character from the last paragraph.)
By the way, the element <meta charset="UTF-8" /> we have been putting in the <head> is indicating that we're using the Unicode character set, and that our editor is saving the characters to a text file in a certain way (known as UTF-8).
Example
Here is a longer example with different types of character references:
I was told that <abbr title="A "great" thing">AGT</abbr> costs >€70. I wonder if it will really be “great” & if it will be worth it… probably not. 😆
And what it looks like in this browser:
I was told that AGT costs >€70. I wonder if it will really be “great” & if it will be worth it… probably not. 😆