Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

 

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

how to write html
html tags, html codes, html help

HTML Codes

If you're looking for some HTML codes to spice up your website, you've come to the right place. You will find a variety of HTML tags and tips to assist you below.


Text Codes

» HTML Bold Code
» HTML Strong Code
» HTML Italic Code
» HTML Emphasis Code
» HTML Underline Code
» HTML Small (Text) Code
» HTML Big (Text) Code
» HTML Font Codes
» HTML Paragraph Code
» HTML Line Break Code
» HTML Heading Codes
» HTML Deleted Text Code
» HTML Center Code
» HTML Horizontal Rule Codes

 

Link Codes

» HTML Link Code
» HTML Anchor Code
» HTML Email Link Code

 

Image Codes

» HTML Image Codes

 

Table Codes

» HTML Table Codes
» HTML Table Header Code
» HTML Table Row Code
» HTML Table Data Code


 

List Codes

» HTML List Item Codes
» HTML Ordered List Code
» HTML Unordered List Code
» HTML Definition List Code
» HTML Definition Term Code
» HTML Definition Description Code
» HTML Menu Code

 

Form Codes

» HTML Form Codes
» HTML Input Field Codes
» HTML Input Field Password
» HTML Listbox Option Codes
» HTML Input Background Color Codes
» HTML Input Image Submit Button Codes
» HTML Input Comment Box Code
» HTML Input Radio Button Code
» HTML Input Checkbox Code

 

Music / Video Codes

» HTML Embed Object Codes

 

Marquee Codes

» HTML Scrolling Text Codes

 

Web Page Codes

» HTML Hypertext Markup Language Codes
» HTML Body Code
» HTML Head Code
» HTML Meta Codes
» HTML Title Code
» HTML Comment Code


How to Copy and Paste Codes

To copy and paste the HTML 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.

For a basic HTML tutorial, visit the 'How to Code in HTML' section.

 

 

HTML Tags

Name
HTML Tag
HTML Code Example
Browser View
HTML Comment <!-- <!--This can be viewed in the HTML part of a document--> Nothing will show (Tip)
HTML Anchor <a> <a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
HTML Bold <b> <b>Example</b> Example
HTML Big (Text) <big> <big>Example</big> Example (Tip)
Body of HTML Document <body> <body>The content of your HTML page</body> Contents of your web page (Tip)
HTML Line Break <br> The contents of your page<br>The contents of your page The contents of your page
The contents of your page
HTML Center <center> <center>This will center your contents</center>

This will center your contents

HTML Definition Description <dd> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Definition List <dl> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Definition Term <dt> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Emphasis <em> This is an <em>Example</em> of using the emphasis tag This is an Example of using the emphasis tag
HTML Embed Object <embed>
<embed src="yourfile.mid" width="100%" height="60" align="center">
(Tip)
HTML Embed Object <embed> <embed src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>

<bgsound src="wonderfu.mid" autostart="false" loop="1" />
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.
HTML Font <font> <font face="Times New Roman">Example</font> Example (Tip)
HTML Font <font> <font face="Times New Roman" size="4">Example</font> Example (Tip)
HTML Font <font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font> Example (Tip)
HTML 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>
Name: (Tip)
Email:

Name
HTML Tag
HTML Code Example
Browser View
HTML Heading 1
HTML Heading 2
HTML Heading 3
HTML Heading 4
HTML Heading 5
HTML Heading 6
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>

Heading of HTML Document <head> <head>Contains elements describing the document</head> Nothing will show
HTML Horizontal Rule <hr> <hr />
Contents of your web page (Tip)

Contents of your web page
HTML Horizontal Rule <hr> <hr width="50%" size="3" /> Contents of your web page

Contents of your web page
HTML Horizontal Rule <hr> <hr width="50%" size="3" noshade /> Contents of your web page

Contents of your web page
HTML Horizontal Rule <hr>
(Internet
Explorer)
<hr width="75%" color="#ff0000" size="4" /> Contents of your web page

Contents of your web page
HTML Horizontal Rule <hr>
(Internet
Explorer)
<hr width="25%" color="#6699ff" size="6" /> Contents of your web page

Contents of your web page
HTML Hypertext Markup Language <html> <html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>
Contents of your web page
HTML Italic <i> <i>Example</i> Example
HTML Image <img> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> a sentence about your site (Tip)
HTML Input Field <input> Example:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)

HTML Input Password <input> <form method=post action="/cgi-bin/example.cgi">
<input type="password" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
HTML Input
(Background Color)
<input>
(Internet Explorer)
Example:

<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>
Example: (Tip)

HTML Input
(Image Submit Button)
<input> Example:

<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>
Example: (Tip)

HTML Input
(Comment Box)
<input> Example:

<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>
Example: (Tip)


HTML Input
(Radio Button)
<input> Example:

<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
<input type="Submit" value="Submit">
</form>
Example: (Tip)

Select an option:
Option 1
Option 2
Option 3
HTML Input
(Checkbox)
<input> Example:

<form method=post action="/cgi-bin/example.cgi">
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>
Example: (Tip)

Select an option:
Selection 1
Selection 2
Selection 3
HTML List Item <li> Example 1:

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

Example 2:

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Example 1: (Tip)
  • List item 1
  • List item 2
  • List item 3


Example 2:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
HTML Link <link> <head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
HTML Scrolling Text <marquee>
(Internet
Explorer)
<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> Example Marquee (Tip)
HTML Menu <menu> <menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
  • List item 1
  • List item 2
  • List item 3
HTML Meta <meta> <meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">
Nothing will show (Tip)
HTML Meta <meta> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show (Tip)
HTML Meta <meta> <meta http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)
HTML Meta <meta> <meta name="rating" content="General"> Nothing will show (Tip)
HTML Meta <meta> <meta name="robots" content="all"> Nothing will show (Tip)
HTML Meta <meta> <meta name="robots" content="noindex,follow"> Nothing will show (Tip)

Name
HTML Tag
HTML Code Example
Browser View
HTML Ordered List <ol> Numbered

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered Special Start

<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Letters

<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters

<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters Special Start

<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Roman Numerals

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals

<ol type="I">
<li>List item 1</li>
<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>

Numbered
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Numbered Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Lowercase Letters

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Capital Letters

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Capital Letters Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Lowercase Roman Numerals

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Capital Roman Numerals

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Capital Roman Numerals Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
HTML Listbox Option (Drop Down Box)
<option> <form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
Select an option: (Tip)

HTML Mailto Email Link <a> <a href="mailto:you@yourdomain.com">Email Link</a> Email Link
HTML Paragraph <p> This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.

Attributes:

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

This is an example displaying the use of the HTML paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

HTML Small (Text) <small> <small>Example</small> Example (Tip)
HTML Deleted Text <strike> <strike>Example</strike> Example
HTML Strong <strong> <strong>Example</strong> Example
HTML 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)
Column 1 Column 2


Example 2: (Tip)

Column 1 Column 2


Example 3: (Tip)

Column 1 Column 2
Row 2 Row 2
HTML Table Data <td> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>

</tr>
</table>

Column 1 Column 2

HTML Table Header <th> <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>
Column 1 Column 2 Column 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4
HTML Document Title <title> <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar. (Tip)
HTML Table Row <tr> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1 Column 2

HTML Teletype <tt> <tt>Example</tt> Example
HTML Underline <u> <u>Example</u> Example
HTML Unordered List <ul> Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>
Example 1:

  • List item 1
  • List item 2


Example 2:

  • List item 1
  • List item 2
    • List item 3
    • List item 4

 

For additional information about coding in HTML, see the 'How to Code in HTML' section.

 

Note: All of the HTML codes and tutorials are by Shelley Lowery. For additional tutorials to assist you in web design 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.

eTips Member Login

Enter your email address and password to enter the private membership area:

Email:
Password:

Lost Password?

Email:

Not yet a member?

Click here to see what you're missing! Club members receive access to dozens of free video tutorials, utilities and ebooks.

Our Products


Web Design Mastery
Mastering Web Hosting
eBook Starter

Partner Sites


100% Free Websites
Plug-in Profits
Site Build It!
Web Site Templates

Web Site Design


HTML Tips
PC Security
CSS Tutorial
HTML Codes
Video Tutorials
Web Design Tips
JavaScript Codes
JavaScript Tutorial
Java Applet Tutorial
216 Web Safe Colors
Web Site Development
ASCII Character Codes

Web Site Tools


Domain Search
Format Your Text
Create Meta Tags
Text to HTML Converter
Color Code Converter
CSS Generator
Bookmark Site Generator
Button Generator
Rollover Button Generator
Rollover Text Button Generator
Colored Scrollbar Generator
Table Generator
Article Syndication
Free Classified Ads

 

 


Would you like to learn how to design 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


Related Information:

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

 

Back