START A COURSE

The HTML and CSS Blog:

Learn HTML: Special Character Codes

Why Special Character Codes in HTML?

What You Learn in This HTML Lesson

In this HTML lesson you’ll learn why some things you type in HTML need to be translated into special codes and how to use these special HTML symbols. We’ll also provide a list of the most common special characters in HTML.

Special Characters

Special Character Codes in HTML

HTML bunny wants you to code like a boss.

HTML bunny wants you to code like a boss.

Many symbols are used in HTML code, so when the browser sees a symbol it thinks it is code (rather than your content). Browsers think a  /  indicates a folder; browsers think anything following  <  is an HTML tag. So what do you do when you want to display a symbol in your HTML content? Special character codes to the rescue! There are some subtle symbols that you might not think to use…but it makes a difference. Your pages will be more readable and look more polished if you use symbols for dashes and quote marks. “This quotation doesn’t use symbols–it feels kinda like a typewriter was used.” "This quotation is using symbols for the em dash and quotation marks—doesn’t it look more professional?" The html code for the paragraph using character codes looks like:

 

The Pattern of HTML Special Character Codes

I think it’s good to memorize the pattern, and look up the individual codes as needed.

Special character codes in HTML all start with  &  and end with ;

Special character codes begin with & and end with ;

If you just remember that pattern it will make it easier  for you to recognize symbol codes and easier to implement them, too.

Dreamweaver Tip Do you use Dreamweaver? If you just type  &  in the code window, Dreamweaver will pop up with a code hint window showing all the symbols. Just double-click the symbol you want and the code is inserted automatically.

Common Special Characters Used in HTML

percentage animated gif

Here are some of the most common special character codes in HTML:

  • &nbsp;  non-breaking space
  • &copy;  copyright sign
  • &ldquo;  left-pointing quotation mark
  • &rdquo;  right-pointing quotation mark
  • &deg;  degrees sign
  • &acute;  accent
  • &trade;  trademark symbol

There are special characters for just about any symbol in popular usage, including most currencies, languages and mathematical symbols.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.