LEARNHUB

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.domain.com/">Visit Our Site </a> Our Site (Tip)
<b bold <b>Example </b> Example
<big boig(text) <big>Example </big> Example (Tip)
<body> body <body>
  The content of your HTML page
</body> 		Contents of your web page (Tip)
<br> linebreak The contents of your page<br>The contentsof your page The contents of your page
The contentsof your page
<centre> center <centre>This will center your contents </centre> This will center your contents
<dd> definitiondescription <dl>
<dt>Definition Term </dt>
<dd>Definition of the term</dd>
<dt>Definition Term </dt>
<dd>Definition of Term </dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<dl> definitionlist <dl>
<dt>Definition Term </dt>
<dd>Definition of the term</dd>
<dt>Definition Term </dt>
<dd>Definition of Term </dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<dt> definitionterm <dl>
<dt>Definition Term </dt>
<dd>Definition of the term</dd>
<dt>Definition Term </dt>
<dd>Definition of Term </dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<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">
<embed embed object <embed src="" autostart="true" hidden="false" loop="false"> <noembed> <bgsound src="yourfile.mid" loop="1"> </noembed> (Tip)
<font font <font face="Times New Roman">Example </font> Example (Tip)
<font font <font face="Times New Roman" size="4">Example </font> Example
<font font <font face="Times New Roman" size="+3" color="#ff0000">Example </font> Example>Example
<fon font <font face="Times New Roman" size="+3" color="#ff0000">Example </font> Example>Example
<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:
Email:
(Tip)
<h1> to <h6> heading 1 to heading 6 
<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 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
(Tip)
<head> heading of HTML document 
<head>Contains elements describing the document</head>
 Nothing will show (Tip)
<hr> horizontal rule 
<hr />
<hr> horizontal rule 
<hr width="50%" size="3" />
<hr> horizontal rule 
<hr width="50%" size="3" noshade />
<hr> horizontal rule (Internet Explorer) 
<hr width="75%" color="#ff0000" size="4" />
<hr> horizontal rule (Internet Explorer) 
<hr width="25%" color="#6699ff" size="6" />
(Tip)
<html> hypertext markup language 
<html>
  <head>
    <meta>
    <title>Title of your web page</title>
  </head>
  <body>HTML web page contents</body>
</html>
Contents of your web page (Tip)
<i> italic 
<i>Example</i>
 Example
<img> image 
<img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" />
 text describing the image
<input> input field 
<form method="post" action="/cgi-bin/example.cgi">
  <input type="text" size="10" maxlength="30">
  <input type="Submit" value="Submit">
</form>
<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) inputfield 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" cellpadding="3" cellspacing="0">
<tr><td bgcolor="#8436ff"><input type="text" size="10" maxlength="30"></td>
<td bgcolor="#8436ff" 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>
Enter Your Comments:
<input> input field Example 5:
<form method=post action="/cgi-bin/example.cgi">
<center>Select an option:<br>
<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>
<input type="Submit" value="Submit"></center>
</form>
Select an option:
<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 <br><input type="submit" value="Submit"> </form>
Select an option:
Option 1 Option 2 Option 3

Select an option:
Selection 1 Selection 2 Selection 3
<li> list item 
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:
  • 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
<link> link 
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
Nothing visible (used for stylesheets)
<marquee> scrolling text 
<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">
  Example Marquee
</marquee>
Example Marquee (Tip)
<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
    •
    <meta> meta 
    <meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">
    		Nothing will show
    <meta> meta 
    <meta HTTP-EQUIV="Refresh" 
  CONTENT="4;URL=http://www.yourdomain.com/">
    		Nothing will show (auto-refreshes page)
    <meta> meta <meta http-equiv='Pragma' content='no-cache'> Nothing will show
    <meta> meta <meta name='rating' content='General'> Nothing will show
    <meta> meta <meta name='robots' content='all'> Nothing will show
    <meta> meta <meta name='robots' content='noindex,follow'> Nothing will show
    <ol> Numbered <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    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>
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    <option> listbox 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>
</center>
</form>
    Select an option:
    <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:
<p align="left">
This is an example<br>
displaying the use<br>
of the paragraph tag.

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

Example 3:
<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 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.

    <small> small (text) <small>Example</small> Example
    <strike> deleted text <strike>Example</strike> Example
    <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>
    Column 1 Column 2 
         Example 2
    
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2" width="100%">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
    Column 1 Column 2 
         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>
    Column 1 Column 2
    Row 2 Row 2
    <td> table data 
    <table border="2" cellpadding="2" 
cellspacing="2" width="100%">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
  </tr>
</table>
    Column 1 Column 2
    <th> table header 
    <div align="center">
<table>
  <tr>
    <th><b>Column 1</b></th>
    <th><b>Column 2</b></th>
    <th><b>Column 3</b></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 2Row 2Row 2
    Row 3Row 3Row 3
    Row 4Row 4Row 4
    <title> document title 
    <title>Title of your 
  <b>HTML</b> page</title>
    		Title of your web page will be viewable in the title bar
    <tr> table row 
    <table border="2" cellpadding="2" 
cellspacing="2" width="100%">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
    Column 1 Column 2
    <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>
  <li>List item 2</li>
</ul>
    		Example 1:
    • List item 1
    • List item 2
    		 
    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 2:
    • List item 1
    • List item 2
      • List item 3
      • List item 4