HTML Codes

 

HTML Codes /  Tags

HTML codes are used to create web pages. Each tag has a specific purpose, such as formatting text, adding music, videos or creating links, tables and forms.

The HTML codes chart below provides you with a variety of HTML tags and tips to assist you. You simply locate the coding you’d like and copy and paste it into the HTML portion of your web page.

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 (This text is highlighted). 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 additional information about coding in HTML, see the ‘How to Code in HTML‘ section.

 

 

Name HTML Tag HTML Code Example Browser View
HTML Anchor <a> <a href="http://www.domain.com/">Visit Our Site</a> Visit Our Site
HTML Bold <b> <b>Example</b> Example
HTML Big Text <big> <big>Example</big> Example
HTML Body <body> <body>The content of your HTML page</body> Contents of your web page
HTML Center <center> <center>This will center your contents</center>

This will center your contents

HTML Comment <!– <!–This can be viewed in the HTML part of a document–> Nothing will show
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 Deleted Text <strike> <strike>Example</strike> Example
HTML Document Heading <head> <head>Contains elements describing the document</head> Nothing will show
HTML Document Title <title> <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar.
HTML Embed Object <embed> <embed height="50" width="100" src="yourfile.mp3"> html_embed
HTML Embed Object <embed> <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.
HTML Emphasis <em> This is an <em> Example</em> of using the emphasis tag This is an Example of using the emphasis tag
HTML Font <font> <font face="Times New Roman">Example</font> Example
HTML Font <font> <font face="Times New Roman" size="4">Example</font> Example
HTML Font <font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font> Example
HTML Form <form> <form action="mailto:you@yourdomain.com">
Name: <input name="Name" value=""><br />
Email: <input name="Email" value=""><br />
<input type="submit">
</form>
html_form

 

 

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>

headings

HTML Horizontal Rule <hr> <hr /> Contents of your web page

html-horizontal-rule1

Contents of your web page

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

html-horizontal-rule2

Contents of your web page

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

html-horizontal-rule3
Contents of your web page

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

html-horizontal-rule4

Contents of your web page

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

html-horizontal-rule5

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 Image <img> <img src="globe.gif" width="41" height="41" border="0" alt="text describing the image" /> globe
HTML Input Field <input> <form method=post action="/cgi-bin/example.cgi"><input type="text">
<input type="Submit" value="Submit">
</form>
inputsubmit
HTML Input Password <input> <form method=post action="/cgi-bin/example.cgi">
<input type="password">
<input type="Submit" value="Submit">
</form>
html_input_password
HTML Input Background Color <input>(Internet Explorer) <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;" maxlength="30">
<input type="Submit" value="Submit">
</form>
html_input_background_color
HTML Input Image Submit <input> <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>
html_input_image_submit
HTML Input <input> <form method=post action="/cgi-bin/example.cgi">Enter Your Comments:<br />
<textarea wrap="virtual" name="Comments"></textarea><br />
<input type="Submit" value="Submit">
</form>
html-input-comment-box
HTML Input Radio <input> <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>
html_radio_form
HTML Input Checkbox <input> <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>
html_selection_form
HTML Italic <i> <i>Example</i> Example
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 Link <link> <head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
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:

HTML List Item

Example 2:

html-list-item1

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>
html-menu
HTML Meta <meta> <meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">
Nothing will show
HTML Meta <meta> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show
HTML Meta <meta> <meta http-equiv="Pragma" content="no-cache"> Nothing will show
HTML Meta <meta> <meta name="rating" content="General"> Nothing will show
HTML Meta <meta> <meta name="robots" content="all"> Nothing will show
HTML Meta <meta> <meta name="robots" content="noindex,follow"> Nothing will show

 

 

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 <option> <form method=post action="/cgi-bin/example.cgi">
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>
</form>
html_listbox_option
HTML Mailto Email Link <a> <a href="mailto:you@domain.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 Scrolling Text <marquee>(Internet Explorer) <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> Example Marquee
HTML Small Text <small> <small>Example</small> 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>

html-table1

html-table2

html-table3

HTML Table Data <td> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
html-table-data
HTML Table Header <th> <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>
html-table-header
HTML Table Row <tr> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
html-table-row
HTML Teletype <tt> <tt>Example</tt> Example
HTML Underline <u> <u>Example</u> Example
HTML Unordered List <ul> Example 1:<br /><ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>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>
html_unordered_list