HTML & CSS: Special Characters

When writing content in HTML, sometimes there are symbols you just can't (or shouldn't) write. This may be because these are characters reserved characters by the language, or maybe just because the characters aren't naturally supported by your document encoding. If you wanted to write something using angle brackets for example (like I have to with almost every one of my HTML/CSS tutorials), you can't write them in the usual way as they are part of the HTML language itself. The "secret", if you like, to displaying these characters, is to use special codes which represent certain characters - these are called character entities or character codes.

Character Entities

So this is going to be a bit drab and linear, but unfortunately that's kind of just the way that character codes are. The text-encoding more complicated side of this can get a bit confusing, but essentially, any Unicode symbol can be written in HTML by either using a specific numeric code or sometimes using a specific name code. The syntax for this is either &character_name; or &#numeric_code;. For example an ampersand ('&' sign) can be written by writing &, or writing &. A list of just a couple of the commonly used symbols on the web with their entities are below.

  • " " - non-breaking space -   or  
  • "<" - less than - &lt; or &#60;
  • ">" - greater than - &gt; or &#62;
  • "&" - ampersand - &amp; or &#38;
  • "¢" - cent - &cent; or &#162;
  • "£" - pound - &pound; or &#163;
  • "¥" - yen - &yen; or &#165;
  • "€" - euro - &euro; or &#8364;
  • "§" - section - &sect; or &#167;
  • "©" - copyright - &copy; or &#169;
  • "™" - trademark - &trade; or &#153;

If you want a comprehensive list, there are a whole bunch of resources you can use -- for the more general characters, a list like this should do fine, but for other more complicated characters, you may have to look into further detail (☃, for example).

So if you wanted to write a <br/> element on your page (as I commonly do) without it being treated as HTML - you could write something like the following:

1

&#60;br/&#62;

If you look at any of these tutorials, you should see that I use character codes a whole lot!