buttons, tables, meta tags, and more. Best of all, it's completely
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> | 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</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
|
| <dl> | definition list | <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
|
| <dt> | definition term | <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
|
| <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> |
<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. |
| <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> |
Name:
(Tip)
Email:
|
<h1>
<h2>
<h3>
<h4>
<h5>
<h6> | heading 1
heading 2
heading 3
heading 4
heading 5
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> |
|
| <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 |
| <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 |
| <i> | italic | <i>Example</i> | Example |
| <img> | image | <img src="Earth.gif" width="41" height="41"
border="0" alt="text
describing the image" /> | 
(Tip) |
| <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> |
Example 1:
(Tip)
|
<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> |
Example 2:
(Tip)
|
| <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> |
Example 3:
(Tip)
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td bgcolor="#8463ff"> </td>
<td valign="Middle" bgcolor="#8463ff"> </td>
</tr>
</table>
|
| <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> |
Example 4:
(Tip)
|
| <input> | input field | Example 5:
<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>
<input type="Submit" value="Submit"></center>
</form> |
Example 5:
Tip)
Select an option:
option 1
option 2
option 3
option 4
option 5
option 6
|
| <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> |
Example 6:
(Tip)
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:
(Tip)
List item 1
List item 2
List item 3
Example 2:
List item 1
List item 2
List item 3
List item 4
|
| <link> | link | <head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head> |
|
<marquee>
(Internet
Explorer) | 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
(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>
<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
List item 1
List item 2
List item 3
List item 4
Numbered Special Start
List item 1
List item 2
List item 3
List item 4
Lowercase Letters
List item 1
List item 2
List item 3
List item 4
Capital Letters
List item 1
List item 2
List item 3
List item 4
Capital Letters Special Start
List item 1
List item 2
List item 3
List item 4
Lowercase Roman Numerals
List item 1
List item 2
List item 3
List item 4
Capital Roman Numerals
List item 1
List item 2
List item 3
List item 4
Capital Roman Numerals Special Start
List item 1
List item 2
List item 3
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><br>
</center>
</form> |
Select an option:
(Tip)
option 1
option 2
option 3
option 4
option 5
option 6
|
| <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:
<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 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.
|
| <small> | small (text) | <small>Example</small> | Example
(Tip) |
| <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>
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)
<table width="100%" border="4" cellpadding="2">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 2:
(Tip)
<table width="100%" border="2" bordercolor="#336699" cellpadding="2" cellspacing="2">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 3:
(Tip)
<table width="100%" cellpadding="2" cellspacing="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>
|
| <td> | table data | <table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table> |
<table width="100%" border="2" cellpadding="2" cellspacing="2">
<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> |
<table> <tr> Column 1 Column 2 Column 3 </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> |
| <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> |
<table width="100%" border="2" cellpadding="2" cellspacing="2">
<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>
<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:
Example 2:
List item 1
List item 2
List item 3
List item 4
</li>
|
الثلاثاء أكتوبر 22, 2013 6:34 pm من طرف 
موضوع: HTML Tags Chart 
