HTML Character And Entity References

By: Daniel Imbellino
Updated: March 10, 2013

Using Character entity references you can display many special characters in your web pages, such as © & ~ $ < > ® ™ etc. Character entity references have many uses in web design with HTML. For one, when using XHTML, the use of the symbols <, >, and & are illegal since they present the start or end to a given element, and the & symbol specifies the start of an entity reference. With the use of character entities you can have a way to represent those "less than" and "greater than" symbols without breaking the rules. Heres an example:
<h1>Heading</h1>
Here we used the &lt; and &gt; entity references to create the "less than" and "greater than" symbols.
Entity references start with & symbol and end with a semi-colon as shown above.
Here is a list of common entity references:
& &amp;  ampersand
 © &copy;  copyright
  '  &apos;  apostrophe
  " &quote;  quotation marks
™ &trade; trademark
 ® &reg; registered trademark
&nbsp; used to indent text
¢ &cent; used to present a monetary number in cents
&lt; produces a < symbol on the screen
&gt; produces a > symbol on the screen
&sup; produces a super script
&sub; produces a sub script

What we viewed above was the "Entity References of certain symbols, but we can also use "Character References" in our HTML to represent characters and symbols. Character references start with an & symbols followed by a pound sign # like this &#36; which represents a $ sign in HTML. Here is a list of some commonly used character references you can use in your webpages:
&#33; this produces an exclamation point !
&#34; this produces a double quote "
&#35; this produces an pound sign #
&#36; this produces a dollar sign $
&#37; this produces an percent symbol %
&#38; this produces a ampersand symbol &
&#39; this produces a apostrophe '
&#40; this produces a left parenthesis (
&#41; this produces a right parenthesis )
&#42; this produces a asterisk *
&#43; this produces a plus sign +
&#44; this produces a comma ,
&#45; this produces a hyphen -
&#46; this produces a period .
&#47; this produces a forward slash /
&#48; thru &#57; these produce the numerals 0-9
&#58; this produces a colon :
&#59; this produces a semi-colon ;
&#60; this produces a less-than symbol <
&#61; this produces a equals sign =
&#62; this produces a greater-than symbol >
&#63; this produces a question mark ?
&#64; this produces a commercial at for sign @
&#65; thru &#90; these produce the uppercase letters of the alphabet from A to Z
&#91; this produces a left square bracket [
&#92; this produces a back slash \
&#93; this produces a right square bracket ]
&#94; this produces a caret ^
&#95; this produces a underscore _
&#96; this produces a grave accent `
&#97; thru &#122; these produce the lowercase letters of the alphabet from a-z
&#123; this produces a left curly brace {
&#124; this produces a vertical bar |
&#125; this produces a right curly brace }
&#126; this produces a tilde ~
&#130; this produces a comma ‚