Scribd
Upload
137 views10 pages

HTML Tags Chart: Tag Name Code Example Browser View

<input> allows users to enter text into forms. Common types include text, submit, checkbox, radio, file. Styles can customize appearance. <form> tags wrap the entire form and define where input data gets sent via GET or POST methods. <textarea> provides a multi-line text input with customizable number of rows and columns. Together these tags allow users to input and submit data through web forms.

Uploaded by

musho-artik
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
137 views10 pages

HTML Tags Chart: Tag Name Code Example Browser View

<input> allows users to enter text into forms. Common types include text, submit, checkbox, radio, file. Styles can customize appearance. <form> tags wrap the entire form and define where input data gets sent via GET or POST methods. <textarea> provides a multi-line text input with customizable number of rows and columns. Together these tags allow users to input and submit data through web forms.

Uploaded by

musho-artik
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code you'd like and copy and
paste it into your web page.

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part of Nothing will show
<!-- comment
a document--> (Tip)
<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
body of
HTML <body>The content of your HTML Contents of your web
<body>
documen page</body> page (Tip)
t
The contents of your
line The contents of your page<br>The contents web page
<br>
break of your page The contents of your
web page

<center>This will center your


<center> center This will center your
contents</center>
contents
<dl> Definition Term
<dt>Definition Term</dt> Definition of
definition
<dd>Definition of the term</dd> the term
<dd> descripti
<dt>Definition Term</dt> Definition Term
on
<dd>Definition of the term</dd> Definition of
</dl> the term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dl>
list <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
This is an <em>Example</em> of using This is an Example of
<em> emphasis
the emphasis tag using the emphasis tag
embed <embed src="yourfile.mid" width="100%"
<embed>
object height="60" align="center"> (Tip)
<bgsound
src="wonderfu.mid"
autostart="false"
loop="1" />
<embed src="yourfile.mid" autostart="true"
Music will begin
embed hidden="false" loop="false">
<embed> playing when your page
object <noembed><bgsound src="yourfile.mid"
is loaded and will only
loop="1"></noembed>
play one time. A
control panel will be
displayed to enable
your visitors to stop the
music.
<font face="Times New
<font> font Example (Tip)
Roman">Example</font>
<font face="Times New Roman"
<font> font
size="4">Example</font>
Example (Tip)
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font> Example (Tip)
<form
action="mailto:[email protected]">
Name: <input name="Name" value="" Name: (Tip)
size="10"><br>
<form> form Email:
Email: <input name="Email" value=""
size="10"><br> Submit
<center><input type="submit"></center>
</form>
heading
1
heading
<h1> 2 <h1>Heading 1 Example</h1>
<h2> heading <h2>Heading 2 Example</h2>
<h3> 3 <h3>Heading 3 Example</h3>
<h4> heading <h4>Heading 4 Example</h4>
<h5> 4 <h5>Heading 5 Example</h5>
<h6> heading <h6>Heading 6 Example</h6>
5
heading
6
heading
of
<head>Contains elements describing the
<head> HTML Nothing will show
document</head>
documen
t
<hr> horizonta <hr />
l rule Contents of your web
page (Tip)

Contents of your web


page
Contents of your web
page
horizonta
<hr> <hr width="50%" size="3" />
l rule
Contents of your web
page
Contents of your web
page
horizonta
<hr> <hr width="50%" size="3" noshade />
l rule
Contents of your web
page
Contents of your web
<hr> page
horizonta <hr width="75%" color="#ff0000"
(Internet
l rule size="4" />
Explorer) Contents of your web
page
Contents of your web
<hr> page
horizonta <hr width="25%" color="#6699ff"
(Internet
l rule size="6" />
Explorer) Contents of your web
page
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title> Contents of your web
<html> markup
</head> page
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41"
<img> image height="41" border="0" alt="text describing
the image" /> (Tip)
Example 1:

<form method=post action="/cgi- Example 1: (Tip)


input bin/example.cgi">
<input>
field <input type="text" size="10" Submit
maxlength="30">
<input type="Submit" value="Submit">
</form>
<input> input Example 2: Example 2: (Tip)
(Internet field
Explorer) <form method=post action="/cgi- Submit
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 3:

<form method=post action="/cgi-


bin/example.cgi">
<table border="0" cellspacing="0" Example 3: (Tip)
input cellpadding="2"><tr><td
<input>
field 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 4:

<form method=post action="/cgi- Example 4: (Tip)


bin/example.cgi">
Enter Your Comments:<br>
input
<input> <textarea wrap="virtual" name="Comments"
field
rows=3 cols=20
maxlength=100></textarea><br>
Submit Clear
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgi-


bin/example.cgi">
<center>
Select an option:
<select> Example 5: Tip)
<option >option 1</option>
input
<input> <option selected>option 2</option> Select an option:
field
<option>option 3</option>
<option>option 4</option>
Submit
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
<input> input Example 6: Example 6: (Tip)
field
<form method=post action="/cgi- Select an option:
bin/example.cgi">
Option 1
Select an option:<br>
<input type="radio" name="option"> Option Option 2
1
<input type="radio" name="option"
checked> Option 2
<input type="radio" name="option"> Option
3 Option 3
<br>
<br> Select an option:
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
Selection 1 Selection 2
<input type="checkbox" name="selection"
checked> Selection 2 Selection 3
<input type="checkbox" name="selection"> Submit
Selection 3
<input type="Submit" value="Submit">
</form>
Example 1:
Example 1: (Tip)
 List item 1
<menu>
<li type="disc">List item 1</li>
o List item 2
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
 List item 3
</MENU>
<li> list item
Example 2:
Example 2:
<ol type="i">
i. List item 1
<li>List item 1</li>
ii. List item 2
<li>List item 2</li>
iii. List item 3
<li>List item 3</li>
<li>List item 4</li>
iv. List item 4
</ol>
<head>
<link rel="stylesheet" type="text/css"
<link> link
href="style.css" />
</head>

<marque
<marquee bgcolor="#cccccc" loop="-1"
e> scrolling
scrollamount="2" width="100%">Example
(Internet text
Marquee</marquee>
Explorer)
(Tip)
<menu>  List item 1
<li type="disc">List item 1</li>
<menu> menu <li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>
</menu>  List item 3
<meta name="Description"
content="Description of your site"> Nothing will show
<meta> meta
<meta name="keywords" (Tip)
content="keywords describing your site">
<meta HTTP-EQUIV="Refresh"
Nothing will show
<meta> meta CONTENT="4;URL=http://www.yourdomai
(Tip)
n.com/">
<meta http-equiv="Pragma" content="no- Nothing will show
<meta> meta
cache"> (Tip)
Nothing will show
<meta> meta <meta name="rating" content="General">
(Tip)
Nothing will show
<meta> meta <meta name="robots" content="all">
(Tip)
<meta name="robots" Nothing will show
<meta> meta
content="noindex,follow"> (Tip)
<ol> ordered Numbered Numbered
list 1. List item 1
<ol> 2. List item 2
<li>List item 1</li> 3. List item 3
<li>List item 2</li> 4. List item 4
<li>List item 3</li>
<li>List item 4</li> Numbered Special
</ol> Start

Numbered Special Start 5. List item 1


6. List item 2
<ol start="5"> 7. List item 3
<li>List item 1</li> 8. List item 4
<li>List item 2</li>
<li>List item 3</li> Lowercase Letters
<li>List item 4</li>
</ol> a. List item 1
b. List item 2
Lowercase Letters c. List item 3
d. List item 4
<ol type="a">
<li>List item 1</li> Capital Letters
<li>List item 2</li>
<li>List item 3</li> A. List item 1
<li>List item 4</li> B. List item 2
</ol> C. List item 3
D. List item 4
Capital Letters
Capital Letters
<ol type="A"> Special Start
<li>List item 1</li>
<li>List item 2</li> C. List item 1
<li>List item 3</li> D. List item 2
<li>List item 4</li> E. List item 3
</ol> F. List item 4

Capital Letters Special Start Lowercase Roman


<ol type="A" start="3"> Numerals
<li>List item 1</li>
<li>List item 2</li> i. List item 1
<li>List item 3</li> ii. List item 2
<li>List item 4</li> iii. List item 3
</ol> iv. List item 4

Lowercase Roman Numerals Capital Roman


Numerals
<ol type="i">
<li>List item 1</li> I. List item 1
<li>List item 2</li> II. List item 2
<li>List item 3</li> III. List item 3
<li>List item 4</li> IV. List item 4
</ol>
Capital Roman
Capital Roman Numerals Numerals Special
Start
<ol type="I">
<li>List item 1</li> VII. List item 1
<li>List item 2</li> VIII. List item 2
<li>List item 3</li> IX. List item 3
<li>List item 4</li>
</ol> X. 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>
<form method=post action="/cgi-
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
listbox <option selected>option 2</option> Select an option: (Tip)
<option>
option <option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
<p> paragrap This is an example displaying the use of the This is an example
h paragraph tag. <p> This will create a line displaying the use of
break and a space between lines.
the paragraph tag.

Attributes: This will create a line


break and a space
Example 1:<br> between lines.
<br>
<p align="left"> Attributes:
This is an example<br>
displaying the use<br> Example 1:
of the paragraph tag.<br>
<br> This is an example
Example 2:<br> displaying the use
<br> of the paragraph tag.
<p align="right">
This is an example<br> Example 2:
displaying the use<br>
of the paragraph tag.<br> This is an example
<br> displaying the use
Example 3:<br> of the paragraph tag.
<br>
<p align="center"> Example 3:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag. displaying the use
of the paragraph tag.
small
<small> <small>Example</small> Example (Tip)
(text)
deleted
<strike> <strike>Example</strike> Example
text
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1:

<table border="4" cellpadding="2" Example 1: (Tip)


cellspacing="2" width="100%"> Column 1 Column 2
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr> Example 2: (Tip)
</table>
<table> table Column 1 Column 2
Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699"


Example 3: (Tip)
cellpadding="2" cellspacing="2"
width="100%">
<tr> Column 1 Column 2
<td>Column 1</td> Row 2 Row 2
<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>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
table
<td> <td>Column 1</td>
data Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<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> Colum Colum Colum
<td>Row 2</td> n1 n2 n3
table </tr>
<th> Row 2 Row 2 Row 2
header <tr>
Row 3 Row 3 Row 3
<td>Row 3</td>
<td>Row 3</td> Row 4 Row 4 Row 4
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
Title of your web page
documen
<title> <title>Title of your HTML page</title> will be viewable in the
t title
title bar. (Tip)
<tr> table row <table border="2" cellpadding="2" Column 1 Column 2
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example

<u> underline <u>Example</u> Example


Example 1:<br>
Example 1:
<br>
<ul>  List item 1
<li>List item 1</li>  List item 2
<li>List item 2</li>
</ul>
<br> Example 2:
unordere Example 2:<br>
<ul>
d list <ul type="disc">  List item 1
<li>List item 1</li>  List item 2
<li>List item 2</li> o List item
<ul type="circle">
3
<li>List item 3</li>
<li>List item 4</li>
o List item
</ul>
4
</ul>

MouseOver PopUps provided by:

You might also like