HTML Tags Chart
|
Tag
|
Name
|
Code Example
|
|
<!--
|
comment
|
<!--This can be viewed in the HTML part of a document-->
|
|
<a -
|
anchor
|
<a href="http://www.domain.com/">
Visit Our Site</a> |
|
<b>
|
bold
|
<b>Example</b>
|
|
<big>
|
big (text)
|
<big>Example</big>
|
|
<body>
|
body of HTML document
|
<body>The content of your HTML page</body>
|
|
<br>
|
line break
|
The contents of your page<br>The contents of your
page
|
|
<center>
|
center
|
<center>This will center your
contents</center>
|
|
<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> |
|
<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> |
|
<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> |
|
<em>
|
emphasis
|
This is an <em>Example</em> of using the emphasis tag
|
|
<embed>
|
embed object
|
<embed src="yourfile.mid"
width="100%" height="60" align="center">
|
|
<embed>
|
embed object
|
<embed src="yourfile.mid"
autostart="true" hidden="false"
loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed> |
|
<font>
|
font
|
<font face="Times
New Roman">Example</font>
|
|
<font>
|
font
|
<font face="Times
New Roman" size="4">Example</font>
|
|
<font>
|
font
|
<font face="Times
New Roman" size="+3" color="#ff0000">Example</font>
|
|
<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> |
|
<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>
|
|
<hr>
|
horizontal rule
|
<hr />
|
|
<hr>
|
horizontal rule
|
<hr width="50%"
size="3" />
|
|
<hr>
|
horizontal rule
|
<hr width="50%"
size="3" noshade />
|
|
<hr>
(Internet Explorer) |
horizontal rule
|
<hr width="75%"
color="#ff0000" size="4" />
|
|
<hr>
(Internet Explorer) |
horizontal rule
|
<hr width="25%"
color="#6699ff" size="6" />
|
|
<html>
|
hypertext markup language
|
<html>
<head> <meta> <title>Title of your web page</title> </head> <body>HTML web page contents </body> </html> |
|
<i>
|
italic
|
<i>Example</i>
|
|
<img>
|
image
|
<img src="Earth.gif"
width="41" height="41" border="0"
alt="text describing the image" />
|
|
<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) |
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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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>
|
|
<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> |
|
<meta>
|
meta
|
<meta name="Description"
content="Description of your site">
<meta name="keywords" content="keywords describing your site"> |
|
<meta>
|
meta
|
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">
|
|
<meta>
|
meta
|
<meta http-equiv="Pragma"
content="no-cache">
|
|
<meta>
|
meta
|
<meta name="rating"
content="General">
|
|
<meta>
|
meta
|
<meta name="robots"
content="all">
|
|
<meta>
|
meta
|
<meta name="robots"
content="noindex,follow">
|
|
<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> |
|
<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> |
|
<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:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 2:<br> <br> <p align="right"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align="center"> This is an example<br> displaying the use<br> of the paragraph tag. |
|
<small>
|
small (text)
|
<small>Example</small>
|
|
<strike>
|
deleted text
|
<strike>Example</strike>
|
|
<strong>
|
strong emphasis
|
<strong>Example</strong>
|
|
<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> |
|
<td>
|
table data
|
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<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> |
|
<title>
|
document title
|
<title>Title of your HTML page</title>
|
|
<tr>
|
table row
|
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
|
<tt>
|
teletype
|
<tt>Example</tt>
|
|
<u>
|
underline
|
<u>Example</u>
|
|
<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> |
0 comments:
Post a Comment