Special Entities of HTML

Share this article

When you type text into any reasonably modern word processing program, even though your keyboard key shows that ubiquitous ASCII double quote symbol, you see nice “curly” opening and closing punctuation marks when you hit it. These special quotes can’t be found on your keyboard. But word processing programs understand that when you put something in quotes, you want nice left and right quotes, and it replaces the characters you typed in with the correct ones. The same goes with apostrophes. Have you ever seen an ASCII apostrophe like the one on your keyboard in a book or brochure? Of course not. What we usually see in printed material is a closing single quote. In fact, there exists a vast array of characters that aren’t represented on a standard keyboard, though these characters show up on web pages and in printed material. Now, that’s all well and good for people using word processors. But for those of us typing text into an HTML document, there’s no system to automatically replace the characters from our keyboards with their grammatically correct equivalents. Depending on which type of character encoding your web site uses, when you paste these characters directly into an HTML document, you may see a bunch of gibberish on the rendered page. Also, the inclusion in text of characters that are used by HTML, like < and >, will wreak havoc in your page, as they cause the beginning or ending of HTML code. For these reasons, a series of special codes or entities has been created—we type these into our HTML documents to produce correct punctuation marks and just about any special character that we could need. The examples in the table below are just a sample of the many HTML character codes that exist. The code on the far left is known as an entity name or keyword. For instance, to produce a copyright symbol in your document, enter copy directly into your HTML; you’ll see a © in the rendered page. Each of these entities also has a numerical equivalent; the numerical equivalent of copy is #169 which produces the same symbol. Sample list of HTML character entity references

Entity Character Description
&lt; < Less than
&gt; > Greater than
&amp; & Ampersand
&lsquo; Left single quote
&rsquo; Right single quote
&ldquo; Left double quote
&rdquo; Right double quote
&laquo; « Left angle quote
&raquo; » Right angle quote
&reg; ® Registered trademark
&trade; Trademark
&copy; © Copyright
&cent; ¢ Cent
&pound; £ Pound
&euro; Euro
&yen; ¥ Yen
&frac14; ¼ One quarter
&frac12; ½ One half
&frac34; ¾ Three quarters
For a more complete list of codes and their alternative entity numbers, check out W3Schools’ HTML Entities page. We’ve all had adventures using special characters online. What pitfalls have you fallen prey to? And what advice can you give to help others avoid them?

Frequently Asked Questions about Using Special Characters Online

How can I use special characters in HTML?

Special characters in HTML are represented by entities. These entities start with an ampersand (&) and end with a semicolon (;). For example, to represent a less than sign (<), you would use the entity <. This is because the less than sign has a special meaning in HTML, it’s used to start tags. So, if you want to display it as a character, you need to use its entity.

What are the most common special characters used in HTML?

Some of the most common special characters used in HTML include the less than sign (<), the greater than sign (>), the ampersand (&), the quotation mark (“), and the apostrophe (‘). These characters are used frequently in HTML code, so it’s important to know their entities.

How can I find the entity for a specific special character?

There are many online resources where you can find a list of HTML entities for special characters. These resources usually provide a table with the character, its entity, and a description. You can also use an online character map tool to find the entity for a specific character.

Can I use special characters in URLs?

Yes, you can use special characters in URLs, but they need to be encoded. This is because some characters have a special meaning in URLs. For example, the slash (/) is used to separate different parts of the URL. So, if you want to include a slash as a character in the URL, you need to use its encoded form, which is %2F.

What is the difference between named and numeric entities?

Named entities use a name to represent a special character, while numeric entities use a number. For example, the entity for the less than sign can be written as < (named) or < (numeric). Both forms are equivalent and you can use whichever you prefer.

How can I use special characters in CSS?

In CSS, you can use special characters by using their Unicode representation. This is a number that represents the character in the Unicode standard. For example, to use the less than sign, you would write it as \003C.

Are there any special characters that I should avoid using?

In general, you should avoid using special characters that have a special meaning in the context where you are using them. For example, in HTML, you should avoid using the less than and greater than signs, because they are used to start and end tags. Instead, you should use their entities.

Can I use special characters in JavaScript?

Yes, you can use special characters in JavaScript, but you need to escape them. This means that you need to add a backslash () before the character. For example, to use a quotation mark, you would write it as “.

How can I use special characters in a form input?

To use special characters in a form input, you need to use their entities. This is because some characters, like the less than and greater than signs, have a special meaning in HTML and could cause problems if used directly.

Can I use emojis as special characters?

Yes, you can use emojis as special characters. Emojis are represented by a specific Unicode sequence. However, keep in mind that not all devices and browsers may support all emojis.

Jason BeairdJason Beaird
View Author

Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.

tutorial
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week