Scribd
Upload
988 views

HTML Codes Chart

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 will play a major role in your success. Learning HTML coding will also save you a great deal of money, as you will be able to avoid hiring a professional web designer.

Uploaded by

ZAHID
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
988 views

HTML Codes Chart

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 will play a major role in your success. Learning HTML coding will also save you a great deal of money, as you will be able to avoid hiring a professional web designer.

Uploaded by

ZAHID
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML Tags / Codes / Web Page Design Page 1 of 12

Your Guide to Professional • HTML Tips • Web Design Tips • CSS Tutorial
Web Site Design and • HTML Codes • JavaScript Codes • JavaScript Tutorial
Development • Web • 216 Web Safe • ASCII Character
Development Colors Codes

Search Terms any terms insensitive Thursday, August 27, 2009

| Web Site Development | HTML Codes | HTML Tips | Web Design Tips | Javascript Snippets | 216 Safe Colors | Symbols | CSS
Tutorial | JavaScript Tutorial |

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.

BlackBerry® Smartphones
There Is A BlackBerry For Everyone. Find Your
New BlackBerry Today.
www.BlackBerry.com/UAE

Visual Basic Code


Network with IT Pros. Get VB Codes for Free &
Do Your Job Better!
VisualBasic.ITtoolbox.com

Organization Charts eTips Member


Make Organization Charts Fast See Examples. Login
Free Trial!
www.SmartDraw.com Enter your email
address and password to
enter the private
membership area:

Email:
Creating an HTML Page
Password:
A web page is created using a language called, Hypertext Markup Language, better Submit
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.
Lost Password?

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 2 of 12

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. Email:
Submit
The opening bracket is followed by an element, which is a browser command, and
ends with the closing bracket.
Not yet a member?
<font size=2>
Click here to see what
An element may also be followed by attributes, which are words describing the you're missing! Club
properties of the element, and further instruct the browser. members receive access
to dozens of free video
<font size=2> tutorials, utilities and
ebooks.
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.
Our Products
The value follows the equal sign and is enclosed in quotes.
• Web Design Mastery
<font size=2>
• Mastering Web Hosting
• eBook Starter

Basic HTML Document Code Structure


Our Other Sites
Begin writing your HTML tags by creating your document's basic layout. Copy and
paste this code into your text or HTML editor.
• ShelleyLowery.com
• Web Design Mastery
<html>
• Mastering Web Hosting
<head>
• eBook Starter
<title>Your Page Title</title>
• Board Your Ship
</head>
• Residual Income
<body>
Opportunity Secrets
• Work From Home
This area will contain everything that will be visible through a web browser,
Business Guide
such as text and graphics. All of the information will be HTML coded.
• Raging Hearts
For a complete list of HTML codes, tags and examples, see the HTML chart
below.
Partner Sites
</body>
</html>
• Articles Fly
• Web Hosting
• Flash Templates
Easy Organization Charts • Building Website
Organization Chart Software See Examples. • Plug-in Profits
Free Trial! • Site Build It!
www.SmartDraw.com • Web Site Templates

Javascript Menu Designs


Cross-Browser, Powerful, Easy to Use, Web Site Design
Affordable Menu Builder!
www.likno.com

• HTML Tips
Phone Ethiopia? • PC Security
Phone Ethiopia Cheap from UAE Vbuzzer, Top • CSS Tutorial
• HTML Codes
Quality Global Calls • Video Tutorials
www.imustvoip.info
• Web Design Tips
• JavaScript Codes
• JavaScript Tutorial
• Java Applet Tutorial
<html> - Begins your HTML document. • 216 Web Safe Colors
• Web Site Development

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 3 of 12

<head> - Contains information about the page such as the TITLE, META tags for • ASCII Character Codes
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’ Web Site Tools
browser.

</title> - Closes the HTML <title> tag. • Domain Search


• Format Your Text
</head> - Closes the HTML <head> tag. • Create Meta Tags
• Text to HTML
<body> - This is where you will begin writing your document and placing your HTML Converter
codes. • Color Code Converter
• CSS Generator
</body> - Closes the HTML <body> tag. • Bookmark Site
Generator
</html> - Closes the <html> tag. • Button Generator
• Rollover Button
Generator
• Rollover Text Button
How to Copy and Paste HTML Tags / Codes Generator
• Colored Scrollbar
To copy and paste the HTML tags / codes from the HTML chart below into the HTML of Generator
your web page, place your mouse pointer over the beginning of the HTML code you • Table Generator
would like to copy. Next, click and hold your left mouse button and drag your mouse • Article Syndication
over all the HTML code you would like to copy (Example of highlighted text). Your • Free Classified Ads
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.

Ads by Google

Made-in-China.com
China Manufacturers directories help global
buyers sourcing easily.

Made-in-China.com

Note: For additional tutorials to assist you in HTML and much more, click here to sign up for our free
membership club. You will instantly receive a wealth of quality information, such as dozens of video
tutorials, several informative ebooks, utilities to assist you in creating buttons, tables, meta tags, and
more. Best of all, it's completely free.

HTML Tags Chart


To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web
page.

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 4 of 12

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show (Tip)
document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example

<big> big (text) <big>Example</big> Example (Tip)


body of
<body> HTML <body>The content of your HTML page</body> Contents of your web page (Tip)
document
The contents of your page<br>The contents of The contents of your web page
<br> line break
your page The contents of your web page
<center> center <center>This will center your contents</center> This will center your contents
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dd>
description <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dl>
list <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
This is an <em>Example</em> of using This is an Example of using
<em> emphasis
the emphasis tag the emphasis tag
embed <embed src="yourfile.mid" width="100%"
<embed>
object height="60" align="center"> (Tip)

<embed src="yourfile.mid" autostart="true"


embed hidden="false" loop="false"> Music will begin playing when your
<embed> page is loaded and will only play
object <noembed><bgsound src="yourfile.mid"
loop="1"></noembed> one time. A control panel will be
displayed to enable your visitors to
stop the music.
<font face="Times New
<font> font Example (Tip)
Roman">Example</font>
<font face="Times New Roman"
<font> font
size="4">Example</font>
Example (Tip)
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font> Example (Tip)

<form action="mailto:[email protected]">
Name: <input name="Name" value=""
Name: (Tip)
size="10"><br>
<form> form Email: <input name="Email" value="" Email:
size="10"><br>
Submit Query
<center><input type="submit"></center>
</form>

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 5 of 12

<h1> heading 1 <h1>Heading 1 Example</h1>


<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>

heading of
<head>Contains elements describing the
<head> HTML Nothing will show
document</head>
document

horizontal Contents of your web page (Tip)


<hr> <hr />
rule
Contents of your web page
Contents of your web page
horizontal
<hr> <hr width="50%" size="3" />
rule
Contents of your web page
Contents of your web page
horizontal
<hr> <hr width="50%" size="3" noshade />
rule
Contents of your web page
<hr> Contents of your web page
horizontal
(Internet <hr width="75%" color="#ff0000" size="4" />
rule
Explorer) Contents of your web page

<hr> Contents of your web page


horizontal
(Internet <hr width="25%" color="#6699ff" size="6" />
rule
Explorer) Contents of your web page
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title>
<html> markup Contents of your web page
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example

<img src="Earth.gif" width="41" height="41"


<img> image
border="0" alt="text describing the image" />
(Tip)
Example 1:

<form method=post action="/cgi- Example 1: (Tip)


<input> input field bin/example.cgi">
<input type="text" size="10" maxlength="30"> Submit
<input type="Submit" value="Submit">
</form>
Example 2:

<form method=post action="/cgi-


bin/example.cgi"> Example 2: (Tip)
<input>
<input type="text" style="color: #ffffff; font-
(Internet input field
family: Verdana; font-weight: bold; font-size: Submit
Explorer)
12px; background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 6 of 12

Example 3:

<form method=post action="/cgi-


bin/example.cgi">
<table border="0" cellspacing="0" Example 3: (Tip)
cellpadding="2"><tr><td
<input> input field
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>
Example 4:
Example 4: (Tip)
<form method=post action="/cgi-
bin/example.cgi">
Enter Your Comments:<br>
<input> input field
<textarea wrap="virtual" name="Comments"
rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit"> Submit Clear
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgi-


bin/example.cgi">
<center>
Select an option:
Example 5: Tip)
<select>
<option >option 1</option>
<input> input field Select an option: option 2
<option selected>option 2</option>
<option>option 3</option> Submit
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Example 6:

<form method=post action="/cgi-


bin/example.cgi"> Example 6: (Tip)
Select an option:<br>
<input type="radio" name="option"> Option 1 Select an option:
<input type="radio" name="option" checked> Option 1
Option 2 Option 2
<input type="radio" name="option"> Option 3
<br> Option 3
<input> input field
<br>
Select an option:<br> Select an option:
<input type="checkbox" name="selection"> Selection 1
Selection 1 Selection 2
<input type="checkbox" name="selection"
checked> Selection 2 Selection 3
<input type="checkbox" name="selection"> Submit
Selection 3
<input type="Submit" value="Submit">
</form>

Example 1:

<menu> Example 1: (Tip)


<li type="disc">List item 1</li>
<li type="circle">List item 2</li>  List item 1
<li type="square">List item 3</li>  List item 2

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 7 of 12

</MENU>  List item 3

Example 2:
Example 2:
<ol type="i">
<li> list item
<li>List item 1</li>
<li>List item 2</li> i. List item 1
<li>List item 3</li> ii. List item 2
<li>List item 4</li> iii. List item 3
</ol> iv. List item 4

<head>
<link rel="stylesheet" type="text/css"
<link> link
href="style.css" />
</head>
<marquee> <marquee bgcolor="#cccccc" loop="-1"
scrolling Example Marquee
(Internet scrollamount="2" width="100%">Example
text (Tip)
Explorer) Marquee</marquee>
<menu>
<li type="disc">List item 1</li>  List item 1
<menu> menu <li type="circle">List item 2</li>  List item 2
<li type="square">List item 3</li>  List item 3
</menu>
<meta name="Description" content="Description
of your site">
<meta> meta Nothing will show (Tip)
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta Nothing will show (Tip)
CONTENT="4;URL=http://www.yourdomain.com/">
<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)
Numbered
Numbered
1. List item 1
<ol> 2. List item 2
<li>List item 1</li> 3. List item 3
<li>List item 2</li> 4. List item 4
<li>List item 3</li>
<li>List item 4</li>
Numbered Special Start
</ol>

Numbered Special Start 5. List item 1


6. List item 2
<ol start="5"> 7. List item 3
<li>List item 1</li> 8. List item 4
<li>List item 2</li>
<li>List item 3</li> Lowercase Letters
<li>List item 4</li>
</ol>
a. List item 1
b. List item 2
Lowercase Letters
c. List item 3
d. List item 4
<ol type="a">
<li>List item 1</li>
Capital Letters
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li> A. List item 1
</ol> B. List item 2
C. List item 3
Capital Letters D. List item 4

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 8 of 12

<ol type="A"> Capital Letters Special Start


<li>List item 1</li>
<li>List item 2</li> C. List item 1
<li>List item 3</li> D. List item 2
<li>List item 4</li> E. List item 3
</ol> F. List item 4

Capital Letters Special Start


Lowercase Roman Numerals

<ol type="A" start="3">


<li>List item 1</li> i. List item 1
<li>List item 2</li> ii. List item 2
<li>List item 3</li> iii. List item 3
<li>List item 4</li> iv. List item 4
</ol>
Capital Roman Numerals
Lowercase Roman Numerals
I. List item 1
<ol type="i"> II. List item 2
<li>List item 1</li> III. List item 3
ordered <li>List item 2</li> IV. List item 4
<ol>
list <li>List item 3</li>
<li>List item 4</li> Capital Roman Numerals
</ol> Special Start

Capital Roman Numerals


VII. List item 1
VIII. List item 2
<ol type="I"> IX. List item 3
<li>List item 1</li> X. List item 4
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals Special Start

<ol type="I" start="7">


<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<form method=post action="/cgi-
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
listbox <option selected>option 2</option> Select an option: Tip)
<option>
option <option>option 3</option> option 2
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>

This is an example displaying the use of the This is an example displaying the
paragraph tag. <p> This will create a line break use of the paragraph tag.
and a space between lines.
This will create a line break and a
Attributes: space between lines.

Example 1:<br> Attributes:

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 9 of 12

<br>
<p align="left"> Example 1:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
<br> of the paragraph tag.
Example 2:<br>
<br> Example 2:
<p align="right">
<p> paragraph This is an example<br> This is an example
displaying the use<br> displaying the use
of the paragraph tag.<br> of the paragraph tag.
<br>
Example 3:<br>
<br> Example 3:
<p align="center">
This is an example<br> This is an example
displaying the use<br> displaying the use
of the paragraph tag. of the paragraph tag.

small
<small> <small>Example</small> Example (Tip)
(text)
deleted
<strike> <strike>Example</strike> Example
text
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1:

<table border="4" cellpadding="2"


cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 1: (Tip)
Example 2: (Internet Explorer)
Column 1 Column 2
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td> Example 2: (Tip)
<table> table <td>Column 2</td> Column 1 Column 2
</tr>
</table>

Example 3: Example 3: (Tip)


Column 1 Column 2
<table cellpadding="2" cellspacing="2"
width="100%"> Row 2 Row 2
<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>

<table border="2" cellpadding="2" cellspacing="2"


width="100%">
<td> table data <tr> Column 1 Column 2
<td>Column 1</td>
<td>Column 2</td>

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 10 of 12

</tr>
</table>
<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> Column Column Column
<td>Row 2</td> 1 2 3
table </tr>
<th> Row 2 Row 2 Row 2
header <tr>
<td>Row 3</td> Row 3 Row 3 Row 3
<td>Row 3</td> Row 4 Row 4 Row 4
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
document Title of your web page will be
<title> <title>Title of your HTML page</title>
title viewable in the title bar. (Tip)
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<tr> table row <td>Column 1</td> Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:<br>
<br>
Example 1:
<ul>
<li>List item 1</li>
<li>List item 2</li>  List item 1
</ul>  List item 2
<br>
unordered Example 2:<br>
<ul>
list <ul type="disc"> Example 2:
<li>List item 1</li>
<li>List item 2</li>
 List item 1
<ul type="circle">
 List item 2
<li>List item 3</li>
 List item 3
<li>List item 4</li>
 List item 4
</ul>
</ul>

MouseOver PopUps provided by:

Would you like to learn how to design

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 11 of 12

your own web site?


Whether you are a complete beginner or have some web site design
experience, this web design course will teach you how to plan, design, build
and market your own web site

If you like these codes, you'll love Web Design Mastery. Get these codes and
many more.

"I have learned more from this web design course than I did from a
course I took in college!" - Joseph Seeles

More

Web Design Information:

Web Development
HTML Codes
HTML Tips
Web Design Tips
Javascript Snippets
216 Safe Colors
Symbols

Web Design Articles:

Selecting a Quality Domain Name


Selecting the Best Web Design Language for Your Project
Bring Your Web Site to Life With PHP
The Birth of a Professional Web Site (10 part series)
Increase Your Traffic by Recovering Your Lost Visitors
Using HTML Tables to Format Your Web Page
HTML Forms -- Back to the Basics and Beyond Part One - Basic Forms Tutorial
HTML Forms -- Back to the Basics and Beyond Part Two - Advanced Forms
HTML Forms -- Back to the Basics and Beyond Part Three - Form Tips & Tricks
35 Deadly Web Site Sins that will Kill Your Business!
Selecting A Quality Web Host
Mini-Sites -- Highly Targeted Sales Generators
Spice Up Your Web Site with JavaScript
Use CGI to Automate Your Web Site
Give Your Graphics A Professional Look without the Price
Use JavaScript to Dynamically Update Your Website
10 Website Essentials to Increase Your Sales
Is Your Domain Name A Trademark Infringement?
Steps to Optimizing Your HTML Codes
The Secrets to Building a Successful Website

Web Development Tutorials:

Creating an Ebook
Internet Marketing Strategies

http://www.web-source.net/html_codes_chart.htm 8/27/2009
HTML Tags / Codes / Web Page Design Page 12 of 12

Internet Marketing Tools


Developing an Internet Business
Developing a Professional Web Site
Free Content
Webpage Optimization
Hosting Your Site
Promotion
Internet Marketing
Web Site Building
Listing Your Site
Internet Advertising
Developing Traffic
Web Development Strategies

Back

| Web Site Development | HTML Codes | HTML Tips | Javascript Snippets |


| Web Resources | 216 Safe Colors | Symbols | Web Development Strategies | Web Site Templates |
| Contact Us | About | Privacy Policy | Terms & Conditions | Site Map | Advertise | Affiliate Program |

Web-Source.net http://www.web-source.net
Your Guide to Professional Web Site Design and Development
Hosted with Host4Profit.
Copyright © 1997- 2009 Brajusta Publishing, Inc., All Rights Reserved

http://www.web-source.net/html_codes_chart.htm 8/27/2009

You might also like