Categories


(X)HTML Symbols and Characters

There are times when you may want to include special symbols or characters in your HTML and XHTML pages without having to go through the hassle of creating a graphic image.

This might be as simple as putting a bullet before items in a list or nothing more than using ’empty space’ to hold a column open. In most cases, what ever you are trying to do can be accomplished using (X)HTML code – rather than a graphic.

The most commonly used symbols and characters fall into these general categories:

  • Characters with special meaning
  • Accented characters (from Western European Languages)
  • Punctuation characters
  • Mathematical and technical characters
  • Greek characters
  • Shapes and arrows

Manipulating Symbols

Once you’ve decided which symbol or character you want to use, you can change its attributes to a certain degree by using tags as well as the standard tags for bolding, italics, etc..  The font and other enhancements you make are the same as those you would use for any text string.

  • Size
  • Color
  • Bold
  • Italics, etc.

For example: To have a standard black diamond suit symbol   ♦   display larger, in italics, bold and red in color you would use the following code:

Enhanced code: will display as 

Note:  The  code above is for HTML, if you want to use ‘enhanced’ symbols in Word Press – like we’ve done here – you’ll need to follow the Word Press format.  The HTML code for web pages does not work the same in Word Press.

When enhancing symbols and characters you must use the same rules as for text.

If using standard HTML, you must place the closing tag for the attribute after the symbol code, i.e., . If you’re writing the page in XHTML you would need to use the appropriate closing tag . . . . Read more about the differences between HTML and XHTML here.

Symbol | Character Table

To help get you started using symbols, we’ve put together a table with some of the more commonly used symbols and characters. You can review the table and its contents from this link . . . http://www.powertoearnmoney.com/HTML/HTMLSymbolsCharacters.html.


Comments are closed.