HTML character codes are essential for web developers and content creators.
They are needed to display text accurately and consistently across various web browsers and platforms.
These codes provide a way to represent every character you might need to use in an HTML document, including those that are not readily available on a keyboard.
By using HTML character codes, you can insert special characters, symbols, and letters from an array of different languages directly into your web pages.
What are character codes?
HTML character codes are sequences of text that you can use in your HTML code to represent particular characters.
They come in two main forms: numeric codes and entity names.
A numeric code, typically prefaced by an ampersand (&
) and a hash symbol (#
), is followed by a number and then a semicolon (;
). For example, the numeric code &
translates to an ampersand (&).
Meanwhile, an entity name is an intuitive word that makes remembering the code easier, such as &
for the same ampersand.
These codes are part of the broader Unicode standard, which encompasses a wide range of characters across multiple languages and scripts.
Using character codes
Using HTML character codes is crucial because some characters have special roles in HTML.
For instance, you cannot place a less than sign (<
) directly into your HTML, as the browser interprets it as the start of an HTML tag.
Instead, you use the character code <
to display it properly on the web page.
These codes also allow for a consistent display of symbols and text across different systems and browsers, maintaining the integrity and layout of your content.
They bridge the gap between the limited keys on a keyboard and the vast array of text symbols required in digital communications.
HTML character entities
Here’s an extensive table of HTML character entities, divided into convenient categories. We are including commonly used entities, but please note that there are many more.
Remember:
- Entity Name: Begins with
&
and ends with;
(Example:©
) - Entity Number: Begins with
&#
and ends with;
(Example:©
)
Commonly used entities
The following table lists HTML entities for symbols you’ll frequently need:
Character | Entity Name | Entity Number | Description |
---|---|---|---|
< | < | < | Less than |
> | > | > | Greater than |
& | & | & | Ampersand |
“ | " | " | Double quotation mark |
‘ | ' | ' | Single quotation mark/Apostrophe |
Whitespace characters
Whitespace in HTML includes spaces and non-breaking spaces.
They are used to format the text:
Character | Entity Name | Entity Number | Description |
---|---|---|---|
” “ | |   | Non-Breaking Space |
” “ |   | Space |
The non-breaking space prevents an automatic line break at its position.
Currency symbols
Currency symbols are essential for any webpage that deals with financial information. HTML provides special entities for these symbols as well.
For instance, a currency sign can be displayed with ¤
, the euro sign with €
, the pound sign with £
, the yen sign with ¥
, and the cent sign with ¢
.
Here is a list that showcases the codes for popular currency symbols:
Character | Entity Name | Entity Number | Description |
---|---|---|---|
$ | $ | $ | Dollar sign |
¢ | ¢ | ¢ | Cent sign |
£ | £ | £ | Pound sterling |
€ | € | € | Euro sign |
¥ | ¥ | ¥ | Yen sign |
Arrows
Character | Entity Name | Entity Number | Description |
---|---|---|---|
← | ← | ← | Left arrow |
↑ | ↑ | ↑ | Up arrow |
→ | → | → | Right arrow |
↓ | ↓ | ↓ | Down arrow |
↔ | ↔ | ↔ | Left-right arrow |
Mathematical symbols
Character | Entity Name | Entity Number | Description |
---|---|---|---|
+ | + | + | Plus |
− | − | − | Minus |
× | × | × | Multiplication |
÷ | ÷ | ÷ | Division |
= | = | = | Equals |
≠ | ≠ | Not equal to | |
≈ | ≈ | ≈ | Approximately equal to |
Greek letters
Character | Entity Name | Entity Number | Description |
---|---|---|---|
Α | Α | Α | Capital alpha |
Β | Β | Β | Capital beta |
Γ | Γ | Γ | Capital gamma |
Δ | Δ | Δ | Capital delta |
… | … | … | … |
α | α | α | Lowercase alpha |
β | β | β | Lowercase beta |
γ | γ | γ | Lowercase gamma |
δ | δ | δ | Lowercase delta |
… | … | … | … |
Punctuation marks
Properly displaying punctuation marks is essential for clear communication on your website. Below are the codes for various punctuation marks:
Punctuation | Entity Name | Entity Number | Character |
---|---|---|---|
, | , | Comma | |
. | . | Period | |
; | ; | Semicolon | |
: | : | Colon | |
? | ? | Question Mark | |
! | ! | Exclamation Mark |
International letters
You’ll often need to display international letters on web pages to accommodate different languages.
For example, to show Latin characters with diacritical marks, you can use HTML entities like Á
for a Latin capital letter A with acute (Á
), or ñ
to represent a Latin small letter n with tilde (ñ
).
Below is a compact table listing some of these characters:
Character | HTML Entity | Description |
---|---|---|
Á | Á | Latin capital letter A with acute |
É | É | Latin capital letter E with acute |
Ñ | Ñ | Latin capital letter N with tilde |
Ó | Ó | Latin capital letter O with acute |
Ú | Ú | Latin capital letter U with acute |
á | á | Latin small letter a with acute |
é | é | Latin small letter e with acute |
í | í | Latin small letter i with acute |
ó | ó | Latin small letter o with acute |
ú | ú | Latin small letter u with acute |
Using Unicodes
Beyond these basic entities, you can use Unicode to represent characters from various languages and symbols.
For example, ©
is used to create a copyright symbol (©). Every character has a corresponding Unicode code that can be used in HTML.
Best practices for character encoding
When working with HTML character codes, a few best practices will ensure your content is both accessible and accurately rendered:
- Use named entities for common characters to increase the legibility of your code.
©
for © is easier to understand than©
.- Where possible, use the correct character encoding in your document, typically UTF-8.
- This ensures that your HTML will properly handle Unicode character codes.
- Always follow the syntax
&
followed by theentity name
or#
andentity number
, then a;
. - For example, to insert an em dash, you’ll use
—
or—
. - Keep a reference guide at hand to find the codes you need efficiently.
- There are thousands of character codes, and memorizing them all isn’t practical.
By applying HTML character codes appropriately, you enhance the clarity of your content on the web. This ensures characters are depicted as intended on every browser and device.