Character Entities
 
 
         
 



 

HTML Character Entities

Many folks email or ask me at eBay U how to go about inserting a special symbol like ™ into their item description pages or About Me page. It's very easy! Nothing complicated, it's all done with Character Entities!

A character entity is a small set of keyboard characters which utilize either numeric or ISO codes. When these entities are then parsed by a web browser, they will display a related special symbol or character not found on your computer keyboard.  For example, in order to insert a ™ into your listing description, you would type:

™

That's an ampersand, followed by a pound sign, then a "1", a "5", a "3" and finally a semicolon.

Here are some other popular character entities which rely on numeric codes:


¢ = ¢ (Cent sign)
£ = £ (Pound sterling)
¥ = ¥ (Yen sign)
© = © (Copyright)
® = ® (Registered trademark)


Some character entities utilize ISO Latin 1 codes instead of numeric codes. Here is a good example.

If you type more than one space between words or objects in an HTML document, all web browsers will ignore any spaces after the first one. For example, if I type

"word      word"

with six spaces between each "word", the web page will still display

"word word"

In order to add the extra spaces, we need to insert a special character entity for the "non breaking space". It looks like this:

 

If we type six of these character entities between each "word":

"word       word"

We get this:

"word      word"

 


Another good use of ISO character entities is for displaying actual HTML formatting tags on a web page. 

If you wanted to show someone how to create a link using a web page as your tutorial space (hmmmm.... kinda like this site!) you might type the following into your HTML document:

<A href=http://www.ebay.com> Visit eBay! </A>

but when you went to view it from within a web browser, you would see:

Visit eBay!

instead of the actual HTML. In order to display the actual HTML link tags within a web browser, you would need to substitute character entities for the "lesser than" and "greater than" tags. Those character entities look like this:

&lt; (which equals the "<" character)

That's an ampersand followed by the lower case letter "L", the lowercase letter "T" and finally a semicolon.

&gt; (which equals the ">" character)

That's an ampersand followed by the lower case letter "G", the lowercase letter "T" and finally a semicolon.

By substituting these character entities, you effectively "break" the ability of the web browser to parse and display the HTML as an actual link. This is good since your intention is not to create a link, but to display the HTML needed in order to create a link!

With the character entity substitutions, you would type:

&lt;A href=http://www.ebay.com&gt; Visit eBay! &lt;/A&gt;

and the web browser would parse this and display it as:

<A href=http://www.ebay.com> Visit eBay! </A>


SPECIAL QUIZ QUESTION!

When I was a regular on the eBay chat forums, I would use this character entity trick to display HTML tags for users who had questions about how to create a link. Other users would notice that I had effectively displayed HTML tags without the tags being parsed by the web browser. They would ask me, "how did you do that?" I would then show them how. Again, note that if I type what I typed to create the "inactive" HTML link:

&lt;A href=http://www.ebay.com&gt; Visit eBay! &lt;/A&gt;

that the following would display:

<A href=http://www.ebay.com> Visit eBay! </A>

What would one type into their HTML text document in order to display the following text inside a web browser?

&lt;A href=http://www.ebay.com&gt; Visit eBay! &lt;/A&gt;

HINT! It involves a character entity substitution for one of the characters within the character entities for &lt; and &gt;

Can you figure it out? If you do, email me with the answer! 

griff@ebay.com 

First person to send in the correct answer will be announced here!

UPDATE! Dec 17, 2001 - And the winner, (Finally! A Winner!) is Eddie (eBay Id lancashire-lad )

Eddie wrote:

"...I guess you used the character &amp;lt; to show &lt;..."

Which is absolutely correct. Eddie wins a snazzy eBay baseball cap signed by Uncle hisself.

In order to display the actual character entity without the web browser parsing the entity and displaying the character, you substitute a character entity for one of the characters inside the original entity. In this case, we substituted the character entity for ampersand &amp; for the & character.

This could go on forever in an endless regression of nested character entities but I will assume you got the point and will spare you the tedium of actually printing out an endless regression of nested character entities but I will assume you got the point and will spare you the tedium of actually printing out an endless regression of nested character entities but I will assume you got the point and will spare you the tedium of actually printing out an endless regression of nested character entities but I will assume you got the point and will spare you the tedium of actually printing out an endless regression of nested character entities...


Character entities also come in handy when you need to insert special non-English alphabet characters into your text, for example, ä or ö ("a" and "o" umlaut). 

You can find many complete lists of other numeric code and ISO Latin 1 HTML Character Entities by going to any good search engine (like Uncle's favorite, www.google.com) and searching on the phrase:

"character entities"

Close this Window