HTML Tags / Codes / Web Page Design
If you're doing business on the Internet, taking the time to learn how to design your own web site and write your own HTML code (hypertext markup language) will play a major role in your success. Not only will learning HTML coding provide you with the freedom to update your own HTML documents, but it will also save you a great deal of money, as you will be able to avoid hiring a professional web designer.
If you're looking for some HTML tags to spice up your web site, you've come to the right place. You will find a variety of HTML codes and tips to assist you below.
However, before reviewing the HTML tags, if you're new to HTML and web site design, the following section will assist you in creating an HTML web page. For additional web site design information, make sure you don't miss the web design articles and tutorials at the bottom of this page.
Creating an HTML Page
A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you.
HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.
The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.
font size=2An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.
Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.
The value follows the equal sign and is enclosed in quotes.
font size=2Basic HTML Document Code Structure
Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.
HTMLHEAD
TITLE Your Page Title
TITLE
HEAD
BODY
This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded.
For a complete list of HTML codes, tags and examples, see the HTML chart below.
BODYHTML
HTML - Begins your HTML document.
HEAD - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
TITLE - The TITLE of your page. This will be visible in the title bar of the viewers’ browser.
TITLE - Closes the HTML TITLE tag.
HEAD - Closes the HTML HEAD tag.
BODY - This is where you will begin writing your document and placing your HTML codes.
BODY - Closes the HTML BODY tag.
HTML - Closes the HTML tag.
How to Copy and Paste HTML Tags / Codes
To copy and paste the HTML tags / codes from the HTML chart below into the HTML of your web page, place your mouse pointer over the beginning of the HTML code you would like to copy. Next, click and hold your left mouse button and drag your mouse over all the HTML code you would like to copy (Example of highlighted text). Your HTML code should now be highlighted. Go to "Edit" - "Copy" on your web browser's toolbar and then place your cursor within your HTML code where you would like to place the code. Right click on your mouse and go to "Paste." Your HTML code should now be displaying within your HTML document.
HTML Tags ChartTo use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. |
|||||||||||||||
Tag |
Name |
Code Example |
Browser View |
||||||||||||
| <!-- | comment | <!--This can be viewed in the HTML part of a document--> | Nothing will show (Tip) | ||||||||||||
| <A - | anchor | <A HREF="http://www.yourdomain.com/">Visit Our Site</A> | Visit Our Site (Tip) | ||||||||||||
| <B> | bold | <B>Example</B> | Example | ||||||||||||
| <BIG> | big (text) | <BIG>Example</BIG> | Example (Tip) | ||||||||||||
| <BODY> | body of HTML document | <BODY>The content of your HTML page</BODY> | Contents of your web page (Tip) | ||||||||||||
| <BR> | line break | The contents of your page<BR>The contents of your page | The contents of your web
page The contents of your web page |
||||||||||||
| <CENTER> | center | <CENTER>This will center your contents</CENTER> | This will center your contents |
||||||||||||
| <DD> | definition description | <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> |
|
||||||||||||
| <DL> | definition list | <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> |
|
||||||||||||
| <DT> | definition term | <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> |
|
||||||||||||
| <EM> | emphasis | This is an <EM>Example</EM> of using the emphasis tag | This is an Example of using the emphasis tag | ||||||||||||
| <EMBED> |
embed object | <EMBED src="yourfile.mid" width="100%" height="60" align="center"> | (Tip) |
||||||||||||
| <EMBED> | embed object | <EMBED src="yourfile.mid"
autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed> |
Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. |
||||||||||||
| <FONT> | font | <FONT FACE="Times New Roman">Example</FONT> | Example (Tip) | ||||||||||||
| <FONT> | font | <FONT FACE="Times New Roman" SIZE="4">Example</FONT> | Example (Tip) | ||||||||||||
| <FONT> | font | <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> | Example (Tip) | ||||||||||||
| <FORM> | form | <FORM
action="mailto:you@yourdomain.com"> Name: <INPUT name="Name" value="" size="10"><BR> Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM> |
|||||||||||||
| <H1> | heading 1 | <H1>Heading 1 Example</H1> | Heading 1 Example |
||||||||||||
| <H2> | heading 2 | <H2>Heading 2 Example</H2> | Heading 2 Example |
||||||||||||
| <H3> | heading 3 | <H3>Heading 3 Example</H3> | Heading 3 Example |
||||||||||||
| <H4> | heading 4 | <H4>Heading 4 Example</H4> | Heading 4 Example |
||||||||||||
| <H5> | heading 5 | <H5>Heading 5 Example</H5> | Heading 5 Example |
||||||||||||
| <H6> | heading 6 | <H6>Heading 6 Example</H6> | Heading 6 Example |
||||||||||||
| <HEAD> | heading of HTML document | <HEAD>Contains elements describing the document</HEAD> | Nothing will show | ||||||||||||
| <HR> | horizontal rule | <HR> | Contents of your web page (Tip) Contents of your web page |
||||||||||||
| <HR> | horizontal rule | <HR WIDTH="50%" SIZE="3"> | Contents of your web
page Contents of your web page |
||||||||||||
| <HR> | horizontal rule | <HR WIDTH="50%" SIZE="3" NOSHADE> | Contents of your web
page Contents of your web page |
||||||||||||
| <HR> (Internet Explorer) |
horizontal rule | <HR WIDTH=";75%" COLOR="#FF0000" SIZE="4"> | Contents of your web
page Contents of your web page |
||||||||||||
| <HR> (Internet Explorer) |
horizontal rule | <HR WIDTH="25%" COLOR="#6699FF" SIZE="6"> | Contents of your web
page Contents of your web page |
||||||||||||
| &;lt;HTML>; | hypertext markup language | <HTML><HEAD><META>&;lt;TITLE>Title of your web page</TITLE></HEAD><BODY>HTML web page contents</BODY></HTML> | Contents of your web page | ||||||||||||
| <I> | italic | <I>Example</I> | Example | ||||||||||||
| <IMG> | image | <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your web site"> | |||||||||||||
| <INPUT> | input field | Example 1: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> |
|||||||||||||
| <INPUT> (Internet Explorer) |
input field | Example 2: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> |
|||||||||||||
| <INPUT> | input field | Example 3: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT type="text" size="10" MAXLENGTH="30"></TD><TD BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image" name="submit" src="yourimage.gif"></TD></TR> </TABLE> </FORM> |
|||||||||||||
| <INPUT> | input field | Example 4: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Enter Your Comments:<BR> <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR> <INPUT type="Submit" VALUE="Submit"> <INPUT type="Reset" VALUE="Clear"> </FORM> |
|||||||||||||
| <INPUT> | input field | Example 5: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION >option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> <INPUT type="Submit" VALUE="Submit"></CENTER> </FORM> |
|||||||||||||
| <INPUT> | input field | Example 6: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Select an option:<BR> <INPUT type="radio" name="option"> Option 1 <INPUT type="radio" name="option" CHECKED> Option 2 <INPUT type="radio" name="option"> Option 3 <BR> <BR> Select an option:<BR> <INPUT type="checkbox" name="selection"> Selection 1 <INPUT type="checkbox" name="selection" CHECKED> Selection 2 <INPUT type="checkbox" name="selection"> Selection 3 <INPUT type="Submit" VALUE="Submit"> </FORM> |
|||||||||||||
| <LI> | list item | Example 1: <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> Example 2: <OL type="i"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> |
Example 1:
(Tip)
|
||||||||||||
| <LINK> | link | Visit our <A HREF="http://www.yourdomain.com/">site</A> | Visit our site | ||||||||||||
| <MARQUEE> (Internet Explorer) |
scrolling text | <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> | (Tip) | ||||||||||||
| <MENU> | menu | <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> |
|
||||||||||||
| <META> | meta | <META name="Description"
content="Description of your site"> <META name="keywords" content="keywords describing your site"> |
Nothing will show (Tip) | ||||||||||||
| <META> | meta | <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> | Nothing will show (Tip) | ||||||||||||
| <META> | meta | <META http-equiv="Pragma" content="no-cache"> | Nothing will show (Tip) | ||||||||||||
| <META> | meta | <META name="rating" content="General"> | Nothing will show (Tip) | ||||||||||||
| <META> | meta | <META name="ROBOTS" content="ALL"> | Nothing will show (Tip) | ||||||||||||
| <META> | meta | <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> | Nothing will show (Tip) | ||||||||||||
| <OL> | ordered list | Numbered <OL> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Numbered Special Start <OL start="5"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Lowercase Letters
<OL type="a">
<OL type="A">
<OL type="A"
start="3">
<OL type="i">
<OL type="I">
<OL type="I"
start="7"> |
Numbered
Numbered Special
Start
Lowercase Letters
Capital Letters
Capital Letters Special
Start
Lowercase Roman
Numerals
Capital Roman
Numerals
Capital Roman Numerals Special
Start
|
||||||||||||
| <OPTION> | listbox option | <FORM METHOD=post
ACTION="/cgi-bin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> </CENTER> </FORM> |
|||||||||||||
| <P> | paragraph | This is an example displaying
the use of the paragraph tag. <P> This will create a line break and
a space between lines. Attributes: Example 1:<BR> <BR> <P align="left"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 2:<BR> <BR> <P align="right"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 3:<BR> <BR> <P align="center"> This is an example<BR> displaying the use<BR> of the paragraph tag. |
This is an example displaying the use of the paragraph tag.
This will create a line break and
a space between lines.
Example 2:
Example 3: |
||||||||||||
| <SMALL> | small (text) | <SMALL>Example</SMALL> | Example (Tip) | ||||||||||||
| <STRONG> | strong emphasis | <STRONG>Example</STRONG> | Example | ||||||||||||
| <TABLE> | table | Example 1: <TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 2: (Internet Explorer) <TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD BGCOLOR="#CCCCCC">Column 1</TD> <TD BGCOLOR="#CCCCCC">Column 2</TD> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> </TR> </TABLE> |
Example 1:
(Tip)
|
||||||||||||
| <TD> | table data | <TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> |
|
||||||||||||
| <TH> | table header | <DIV
align="center"><TABLE> <TR> <TH>Column 1</TH> <TH>Column 2</TH> <TH>Column 3</TH> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> <TD>Row 2</TD> </TR> <TR> <TD>Row 3</TD> <TD>Row 3</TD> <TD>Row 3</TD> </TR> <TR> <TD>Row 4</TD> <TD>Row 4</TD> <TD>Row 4</TD> </TR> </TABLE> </DIV> |
|
||||||||||||
| <TITLE> | document title | <TITLE>Title of your HTML page</TITLE> | Title of your web page will be viewable in the title bar. (Tip) | ||||||||||||
| <TR> | table row | <TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> |
|
||||||||||||
| <TT> | teletype | <TT>Example</TT> | Example | ||||||||||||
| <U> | underline | <U>Example</U> | Example | ||||||||||||
| <UL> | unordered list | Example 1:<BR> <BR> <UL> <LI>List item 1 <LI>List item 2 </UL> <BR> Example 2:<BR> <UL type="disc"> <LI>List item 1 <LI>List item 2 <UL type="circle"> <LI>List item 3 <LI>List item 4 </UL> </UL> |
Example 1:
|
||||||||||||
MouseOver PopUps provided
by: |
|||||||||||||||
216 Web Safe Colors Hexadecimal RGB Values
If you're looking for a 216 web safe color chart, you've come to the right place. However, before reviewing the chart, you may be interested in learning a little bit about the 216 web safe colors.
Netscape specified 216 colors that have precedence in web browsers based on the 256 colors displayed within an 8-bit system. As 40 colors displayed differently between PCs and MACs, they were eliminated.
These 216 colors, known as web safe colors, are recognized by all web browsers and operating systems, which means these colors will look about the same within any browser.
RGB and Hexadecimal Color Codes
Colors are made up of 3 sets of RGB numbers representing the amount of Red, Green and Blue contained within a color. These colors are represented as hexadecimal values.
For example, the hexadecimal numbers for black is #000000. The first two numbers (00) represent the amount of red the color contains. The second two numbers (00) represent the amount of green and the last two numbers (00) represent the amount of blue the color contains. When a color, such as black, contains 00 amount of red, green or blue, this means it contains no amount of that color or 0%.
However, colors containing RGB values of FF contain the most amount of a color or 100%. For example, the hexadecimal value for white is #FFFFFF, which means it contains the most amount of red, green and blue.
The hexadecimal numbers for red are FF0000. To help you to understand this a little bit better, if we break down the hexadecimal numbers, we will find that the color red contains FF amount of red, which is the highest amount. It contains 00 amount of green and 00 amount of blue, both of which are the lowest.
Specifying Colors Within a Web Page:
If you would like to specify colors within your web page, you must set color attributes. Attributes determine the appearance of a web page, such as background color, text colors and fonts.
To specify a specific color, you must use the hexadecimal color code within your HTML coding. The hexadecimal color codes can be used throughout your entire web page to specify all of the following:
.Web page background color
.Font colors
.Table background colors
.Table border colors
To ensure your colors will be displayed to most Internet users as you had intended, you should always select your colors from the 216 web safe colors, as displayed in the 216 web safe color chart below.
When using colors within your HTML, you can also use the actual color "word" for basic colors such as black, white, red, green, blue and yellow. Your color code might look something like this:
BGCOLOR="RED"Color |
Red |
Green |
Blue |
Hexadecimal |
| Black | 0 | 0 | 0 | #000000 |
| White | 255 | 255 | 255 | #FFFFFF |
| Red | 255 | 0 | 0 | #FF0000 |
| Green | 0 | 192 | 0 | #00C000 |
| Blue | 0 | 0 | 255 | #0000FF |
| Yellow | 255 | 255 | 0 | #FFFF00 |
To specify the background and text color of a web page, place the following color attributes, indicated in bold, within the BODY tag of your web page:
BODY BGCOLOR="#FFFFFF" TEXT="#0000FF"
To specify link colors within a web page, place the following color attributes, indicated in bold, within the BODY tag of your web page:
BODY LINK="#003399" VLINK="#0000CC" ALINK="#9966CC"
To specify the border color within an HTML table, place the following code within your TABLE code:
TABLE BORDER="2" BORDERCOLOR="#CCCCCC"
To specify the background color within a specific TABLE cell, place the following code, indicated in bold, within your TABLE code:
TD BGCOLOR="#CCCCCC" Your Cell Text
Edit the hexadecimal color codes indicated in red to suit your needs.
Although you can change the background color of your web page, it is highly recommended that you use the default background color of white and the default text color of black, as this is the easiest color options to read within a web browser.
In addition, it is highly recommended that you use the default link colors within your web pages, as these colors are what your visitors will be expecting. Changing the link colors may cause confusion.
Each color displayed within the color chart below contains the hexadecimal values and the RGB (Red, Green, Blue) Values. Select a color and copy & paste the hexadecimal value into your HTML document.
Example:
Hexadecimal Value - #FFFFFF RGB Color Code - R=255 G=255 B=255
| #FFFFFF R=255 G=255 B=255 |
#FFFFCC R=255 G=255 B=204 |
#FFFF99 R=255 G=255 B=153 |
#FFFF66 R=255 G=255 B=102 |
#FFFF33 R=255 G=255 B=51 |
#FFFF00 R=255 G=255 B=0 |
| #FFCCFF R=255 G=204 B=255 |
#FFCCCC R=255 G=204 B=204 |
#FFCC99 R=255 G=204 B=153 |
#FFCC66 R=255 G=204 B=102 |
#FFCC33 R=255 G=204 B=51 |
#FFCC00 R=255 G=204 B=0 |
| #FF99FF R=255 G=153 B=255 |
#FF99CC R=255 G=153 B=204 |
#FF9999 R=255 G=153 B=153 |
#FF9966 R=255 G=153 B=102 |
#FF9933 R=255 G=153 B=51 |
#FF9900 R=255 G=153 B=0 |
| #FF66FF R=255 G=102 B=255 |
#FF66CC R=255 G=102 B=204 |
#FF6699 R=255 G=102 B=153 |
#FF6666 R=255 G=102 B=102 |
#FF6633 R=255 G=102 B=51 |
#FF6600 R=255 G=102 B=0 |
| #FF33FF R=255 G=51 B=255 |
#FF33CC R=255 G=51 B=204 |
#FF3399 R=255 G=51 B=153 |
#FF3366 R=255 G=51 B=102 |
#FF3333 R=255 G=51 B=51 |
#FF3300 R=255 G=51 B=0 |
| #FF00FF R=255 G=0 B=255 |
#FF00CC R=255 G=0 B=204 |
#FF0099 R=255 G=0 B=153 |
#FF0066 R=255 G=0 B=102 |
#FF0033 R=255 G=0 B=51 |
#FF0000 R=255 G=0 B=0 |
| #CCFFFF R=204 G=255 B=255 |
#CCFFCC R=204 G=255 B=204 |
#CCFF99 R=204 G=255 B=153 |
#CCFF66 R=204 G=255 B=102 |
#CCFF33 R=204 G=255 B=51 |
#CCFF00 R=204 G=255 B=0 |
| #CCCCFF R=204 G=204 B=255 |
#CCCCCC R=204 G=204 B=204 |
#CCCC99 R=204 G=204 B=153 |
#CCCC66 R=204 G=204 B=102 |
#CCCC33 R=204 G=204 B=51 |
#CCCC00 R=204 G=204 B=0 |
| #CC99FF R=204 G=153 B=255 |
#CC99CC R=204 G=153 B=204 |
#CC9999 R=204 G=153 B=153 |
#CC9966 R=204 G=153 B=102 |
#CC9933 R=204 G=153 B=51 |
#CC9900 R=204 G=153 B=0 |
| #CC66FF R=204 G=102 B=255 |
#CC66CC R=204 G=102 B=204 |
#CC6699 R=204 G=102 B=153 |
#CC6666 R=204 G=102 B=102 |
#CC6633 R=204 G=102 B=51 |
#CC6600 R=204 G=102 B=0 |
| #CC33FF R=204 G=51 B=255 |
#CC33CC R=204 G=51 B=204 |
#CC3399 R=204 G=51 B=153 |
#CC3366 R=204 G=51 B=102 |
#CC3333 R=204 G=51 B=51 |
#CC3300 R=204 G=51 B=0 |
| #CC00FF R=204 G=0 B=255 |
#CC00CC R=204 G=0 B=204 |
#CC0099 R=204 G=0 B=153 |
#CC0066 R=204 G=0 B=102 |
#CC0033 R=204 G=0 B=51 |
#CC0000 R=204 G=0 B=0 |
| #99FFFF R=153 G=255 B=255 |
#99FFCC R=153 G=255 B=204 |
#99FF99 R=153 G=255 B=153 |
#99FF66 R=153 G=255 B=102 |
#99FF33 R=153 G=255 B=51 |
#99FF00 R=153 G=255 B=0 |
| #99CCFF R=153 G=204 B=255 |
#99CCCC R=153 G=204 B=204 |
#99CC99 R=153 G=204 B=153 |
#99CC66 R=153 G=204 B=102 |
#99CC33 R=153 G=204 B=51 |
#99CC00 R=153 G=204 B=0 |
| #9999FF R=153 G=153 B=255 |
#9999CC R=153 G=153 B=204 |
#999999 R=153 G=153 B=153 |
#999966 R=153 G=153 B=102 |
#999933 R=153 G=153 B=51 |
#999900 R=153 G=153 B=0 |
| #9966FF R=153 G=102 B=255 |
#9966CC R=153 G=102 B=204 |
#996699 R=153 G=102 B=153 |
#996666 R=153 G=102 B=102 |
#996633 R=153 G=102 B=51 |
#996600 R=153 G=102 B=0 |
| #9933FF R=153 G=51 B=255 |
#9933CC R=153 G=51 B=204 |
#993399 R=153 G=51 B=153 |
#993366 R=153 G=51 B=102 |
#993333 R=153 G=51 B=51 |
#993300 R=153 G=51 B=0 |
| #9900FF R=153 G=0 B=255 |
#9900CC R=153 G=0 B=204 |
#990099 R=153 G=0 B=153 |
#990066 R=153 G=0 B=102 |
#990033 R=153 G=0 B=51 |
#990000 R=153 G=0 B=0 |
| #66FFFF R=102 G=255 B=255 |
#66FFCC R=102 G=255 B=204 |
#66FF99 R=102 G=255 B=153 |
#66FF66 R=102 G=255 B=102 |
#66FF33 R=102 G=255 B=51 |
#66FF00 R=102 G=255 B=0 |
| #66CCFF R=102 G=204 B=255 |
#66CCCC R=102 G=204 B=204 |
#66CC99 R=102 G=204 B=153 |
#66CC66 R=102 G=204 B=102 |
#66CC33 R=102 G=204 B=51 |
#66CC00 R=102 G=204 B=0 |
| #6699FF R=102 G=153 B=255 |
#6699CC R=102 G=153 B=204 |
#669999 R=102 G=153 B=153 |
#669966 R=102 G=153 B=102 |
#669933 R=102 G=153 B=51 |
#669900 R=102 G=153 B=0 |
| #6666FF ; R=102 G=102 B=255 |
#6666CC R=102 G=102 B=204 |
#666699 R=102 G=102 B=153 |
#666666 R=102 G=102 B=102 |
#666633 R=102 G=102 B=51 |
#666600 R=102 G=102 B=0 |
| #6633FF R=102 G=51 B=255 |
#6633CC R=102 G=51 B=204 |
#663399 R=102 G=51 B=153 |
#663366 R=102 G=51 B=102 |
#663333 R=102 G=51 B=51 |
#663300 R=102 G=51 B=0 |
| #6600FF R=102 G=0 B=255 |
#6600CC R=102 G=0 B=204 |
#660099 R=102 G=0 B=153 |
#660066 R=102 G=0 B=102 |
#660033 R=102 G=0 B=51 |
#660000 R=102 G=0 B=0 |
| #33FFFF R=51 G=255 B=255 |
#33FFCC R=51 G=255 B=204 |
#33FF99 R=51 G=255 B=153 |
#33FF66 R=51 G=255 B=102 |
#33FF33 R=51 G=255 B=51 |
#33FF00 R=51 G=255 B=0 |
| #33CCFF R=51 G=204 B=255 |
#33CCCC R=51 G=204 B=204 |
#33CC99 R=51 G=204 B=153 |
#33CC66 R=51 G=204 B=102 |
#33CC33 R=51 G=204 B=51 |
#33CC00 R=51 G=204 B=0 |
| #3399FF R=51 G=153 B=255 |
#3399CC R=51 G=153 B=204 |
#339999 R=51 G=153 B=153 |
#339966 R=51 G=153 B=102 |
#339933 R=51 G=153 B=51 |
#339900 R=51 G=153 B=0 |
| #3366FF R=51 G=102 B=255 |
#3366CC R=51 G=102 B=204 |
#336699 R=51 G=102 B=153 |
#336666 R=51 G=102 B=102 |
#336633 R=51 G=102 B=51 |
#336600 R=51 G=102 B=0 |
| #3333FF R=51 G=51 B=255 |
#3333CC R=51 G=51 B=204 |
#333399 R=51 G=51 B=153 |
#333366 R=51 G=51 B=102 |
#333333 R=51 G=51 B=51 |
#333300 R=51 G=51 B=0 |
| #3300FF R=51 G=0 B=255 |
#3300CC R=51 G=0 B=204 |
#330099 R=51 G=0 B=153 |
#330066 R=51 G=0 B=102 |
#330033 R=51 G=0 B=51 |
#330000 R=51 G=0 B=0 |
| #00FFFF R=0 G=255 B=255 |
#00FFCC R=0 G=255 B=204 |
#00FF99 R=0 G=255 B=153 |
#00FF66 R=0 G=255 B=102 |
#00FF33 R=0 G=255 B=51 |
#00FF00 R=0 G=255 B=0 |
| #00CCFF R=0 G=204 B=255 |
#00CCCC R=0 G=204 B=204 |
#00CC99 R=0 G=204 B=153 |
#00CC66 R=0 G=204 B=102 |
#00CC33 R=0 G=204 B=51 |
#00CC00 R=0 G=204 B=0 |
| #0099FF R=0 G=153 B=255 |
#0099CC R=0 G=153 B=204 |
#009999 R=0 G=153 B=153 |
#009966 R=0 G=153 B=102 |
#009933 R=0 G=153 B=51 |
#009900 R=0 G=153 B=0 |
| #0066FF R=0 G=102 B=255 |
#0066CC R=0 G=102 B=204 |
#006699 R=0 G=102 B=153 |
#006666 R=0 G=102 B=102 |
#006633 R=0 G=102 B=51 |
#006600 R=0 G=102 B=0 |
| #0033FF R=0 G=51 B=255 |
#0033CC R=0 G=51 B=204 |
#003399 R=0 G=51 B=153 |
#003366 R=0 G=51 B=102 |
#003333 R=0 G=51 B=51 |
#003300 R=0 G=51 B=0 |
| #0000FF R=0 G=0 B=255 |
#0000CC R=0 G=0 B=204 |
#000099 R=0 G=0 B=153 |
#000066 R=0 G=0 B=102 |
#000033 R=0 G=0 B=51 |
#000000 R=0 G=0 B=0 |
ASCII Character Codes Chart (Symbols)
ASCII stands for American Standard Code for Information Interchange. It is the standard format used for text files within computers and online.
As computers can only understand numbers, the ASCII code is the numerical representation of alphabetic and special characters, such as 'a' and/or the '©' symbol.
In order to display special characters or symbols within your HTML pages, you must use a special ASCII code. The codes below display the HTML code and the character when displayed on your web page.
For example, if you'd like to place your copyright information on your web site, you will need to include a special ASCII Character Code within your HTML that looks like this:
©When you place this ASCII Character Code within the HTML of your web page, it will display the copyright symbol, which will look like this:
©Here's how your HTML code might look:
Copyright © YEAR YOUR COMPANY NAME
The above HTML code will display like this within your web page:
Copyright © YEAR YOUR COMPANY NAME
Another example of using an ASCII code is for the trademark symbol. To display the trademark symbol within a web page, you must use the ASCII Character Code that looks like this:
When you place this ASCII Character Code within the HTML of your web page, it will display the trademark symbol, which will look like this:
™Here's how your HTML code might look:
Business™
The above HTML code will display like this within your web page:
Business™
Another great use for the ASCII code is display your email address. For example, instead of dispaying your email address within your HTML with the @ symbol, use the ASCII code equivalent. Your HTML code will look something like this:
you@yourdomain.com
Your email address will look like this within your web page:
you@yourdomain.com
This provides a great way to prevent your email address from being harvested by spam bots.
To use any of the characters displayed within the ASCII codes chart, copy & paste the HTML code to the left of the character you would like to use.
HTML Code |
Browser View |
HTML Code |
Browser View |
HTML Code |
Browser View |
HTML Code |
Browser View |
HTML Code |
Browser View |
| © | © | ! | ! | _ | _ |  | | Û | Û |
| ® | ® | " | " | ` | ` | ž | | Ü | Ü |
| | # | # | a | a | Ÿ | | Ý | Ý | |
| " | " | $ | $ | b | b |   | Þ | Þ | |
| & | & | % | % | c | c | ¡ | ¡ | ß | ß |
| < | < | & | & | d | d | ¢ | ¢ | à | à |
| > | > | ' | ' | e | e | £ | £ | á | á |
| À | À | ( | ( | f | f | ¤ | ¤ | â | â |
| Á | Á | ) | ) | g | g | ¥ | ¥ | ã | ã |
| Â | Â | * | * | h | h | ¦ | ¦ | ä | ä |
| Ã | Ã | + | + | i | i | § | § | å | å |
| Ä | Ä | , | , | j | j | ¨ | ¨ | æ | æ |
| Å | Å | - | - | k | k | © | © | ç | ç |
| Æ | Æ | . | . | l | l | ª | ª | è | è |
| Ç | Ç | / | / | m | m | « | « | é | é |
| È | È | 0 | 0 | n | n | ¬ | ¬ | ê | ê |
| É | É | 1 | 1 | o | o | ­ | | ë | ë |
| Ê | Ê | 2 | 2 | p | p | ® | ® | ì | ì |
| Ë | Ë | 3 | 3 | q | q | ¯ | ¯ | í | í |
| Ì | Ì | 4 | 4 | r | r | ° | ° | î | î |
| Í | Í | 5 | 5 | s | s | ± | ± | ï | ï |
| Î | Î | 6 | 6 | t | t | ² | ² | ð | ð |
| Ï | Ï | 7 | 7 | u | u | ³ | ³ | ñ | ñ |
| Ð | Ð | 8 | 8 | v | v | ´ | ´ | ò | ò |
| Ñ | Ñ | 9 | 9 | w | w | µ | µ | ó | ó |
| Õ | Õ | : | : | x | x | ¶ | ¶ | ô | ô |
| Ö | Ö | ; | ; | y | y | · | · | õ | õ |
| Ø | Ø | < | < | z | z | ¸ | ¸ | ö | ö |
| Ù | Ù | = | = | { | { | ¹ | ¹ | ÷ | ÷ |
| Ú | Ú | > | > | | | | | º | º | ø | ø |
| Û | Û | ? | ? | } | } | » | » | ù | ù |
| Ü | Ü | @ | @ | ~ | ~ | ¼ | ¼ | ú | ú |
| Ý | Ý | A | A |  | ? | ½ | ½ | û | û |
| Þ | Þ | B | B | € | | ¾ | ¾ | ü | ü |
| ß | ß | C | C |  | | ¿ | ¿ | ý | ý |
| à | à | D | D | ‚ | | À | À | þ | þ |
| á | á | E | E | ƒ | | Á | Á | ÿ | ÿ |
| å | å | F | F | „ | | Â | Â | ||
| æ | æ | G | G | … | Ã | Ã | |||
| ç | ç | H | H | † | | Ä | Ä | ||
| è | è | I | I | ‡ | | Å | Å | ||
| é | é | J | J | ˆ | | Æ | Æ | ||
| ê | ê | K | K | ‰ | | Ç | Ç | ||
| ë | ë | L | L | Š | | È | È | ||
| ì | ì | M | M | ‹ | | É | É | ||
| í | í | N | N | Œ | | Ê | ? | ||
| î | î | O | O |  | | Ë | Ë | ||
| ï | ï | P | P | Ž | | Ì | Ì | ||
| ð | ð | Q | Q |  | | Í | Í | ||
| ñ | ñ | R | R |  | | Î | Î | ||
| ò | ò | S | S | ‘ | | Ï | Ï | ||
| ó | ó | T | T | ’ | | Ð | Ð | ||
| ô | ô | U | U | “ | | Ñ | Ñ | ||
| õ | õ | V | V | ” | | Ò | Ò | ||
| ö | ö | W | W | • | | Ó | Ó | ||
| ø | ø | &;amp;#88; | X | – | | Ô | Ô | ||
| ù | ù | Y | Y | — | | Õ | Õ | ||
| ú | ú | Z | Z | ˜ | | Ö | Ö | ||
| û | û | [ | [ | ™ | | × | × | ||
| ý | ý | \ | \ | š | | Ø | Ø | ||
| þ | þ | ] | ] | › | | Ù | Ù | ||
| ÿ | ÿ | ^ | ^ | œ | | Ú | Ú |