Scribd
Upload
1K views25 pages

HTML Tags Chart

The document provides examples of HTML tags and their usage. It includes tags for text formatting (<b>, <i>, etc.), headings (<h1>-<h6>), paragraphs, lists, links, images, forms, and inputs. Each tag is displayed with the HTML code, browser rendering, and a brief description. This allows users to easily reference and copy HTML tags to format text, add links and images, and create forms and inputs in their web pages.

Uploaded by

dawadhali
Copyright
© © All Rights Reserved
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
1K views25 pages

HTML Tags Chart

The document provides examples of HTML tags and their usage. It includes tags for text formatting (<b>, <i>, etc.), headings (<h1>-<h6>), paragraphs, lists, links, images, forms, and inputs. Each tag is displayed with the HTML code, browser rendering, and a brief description. This allows users to easily reference and copy HTML tags to format text, add links and images, and create forms and inputs in their web pages.

Uploaded by

dawadhali
Copyright
© © All Rights Reserved
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/ 25

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.

Browser
Tag Name Code Example
View
<!--This can be viewed in the HTML Nothing will
<!-- comment
show
part of a document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example
body of
HTML <body>The content of your HTML Contents of
<body> documen page</body> your web page
t
<br> line The contents of your page<br>The The contents of
your web page
break contents of your page The contents of
your web page
<center>This will center your This will center
<center> center your contents
contents</center>
<dl>
<dt>Definition Term</dt>
Definition Term
definitio <dd>Definition of the term</dd> Definition
n <dt>Definition Term</dt> of the term
<dd> descript Definition Term
<dd>Definition of the term</dd>
ion Definition
</dl> of the term

<dl> definitio <dl> Definition Term


n list Definition
<dt>Definition Term</dt> of the term
<dd>Definition of the term</dd> Definition Term
Definition
<dt>Definition Term</dt> of the term
<dd>Definition of the term</dd>
</dl>
<dl> Definition
Term
<dt>Definition Term</dt> Definition
definiti
<dd>Definition of the term</dd> of the term
<dt> on Definition
<dt>Definition Term</dt>
term Term
<dd>Definition of the term</dd> Definition
</dl> of the term
This is an
Example of
empha This is an <em>Example</em> of
<em> using
sis using the emphasis tag the emphasis
tag
<font face="Times New
<font> font Example
Roman">Example</font>
<font face="Times New Roman"
<font> font Example
size="4">Example</font>
<font> font <font face="Times New Roman" Example
size="+3"
color="#ff0000">Example</font>
<form
action="mailto:[email protected]
om">
Name: <input name="Name"
Name:
value="" size="10"><br>
<form> form Email:
Email: <input name="Email" Submit

value="" size="10"><br>
<center><input
type="submit"></center>
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>
heading 2
<h2> heading 3 <h2>Heading 2 Example</h2>
<h3> heading 4 <h3>Heading 3 Example</h3>
heading 5
<h4> heading 6 <h4>Heading 4 Example</h4>
<h5> <h5>Heading 5 Example</h5>
<h6> <h6>Heading 6 Example</h6>
heading
of
HTML
<head>Contains elements Nothing
<head> documen
t describing the document</head> will show

horizo Contents of your


<hr> ntal <hr /> web page (Tip)

rule Contents of your


web page
Contents of
horizo your web page
<hr> ntal <hr width="50%" size="3" />
rule Contents of
your web page
Contents of
horizo your web page
<hr width="50%" size="3" noshade
<hr> ntal
/> Contents of
rule
your web page
Contents of
horizo your web page
<hr> <hr width="75%" color="#ff0000"
ntal
(Internet
Explorer) size="4" /> Contents of
rule
your web page
Contents of
horizo your web page
<hr> <hr width="25%" color="#6699ff"
(Internet ntal
Explorer) size="6" /> Contents of
rule
your web page
<html> hypertex <html> Contents of
t markup your web page
language
<head>
<meta>
<title>Title of your web
page</title>
</head>
<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" />
Example 1:

<form method=post action="/cgi-


<input input bin/example.cgi"> Example 1:
> field <input type="text" size="10" Submit

maxlength="30">
<input type="Submit" value="Submit">
</form>
<input> input Example 2: Example 2:
<form method=post action="/cgi-
bin/example.cgi">
<input type="text" style="color: #ffffff; font-
(Internet
Explorer) field family: Verdana; font-weight: bold; font-size: Submit

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"
input cellpadding="2"><tr><td
Example 3:

<input> bgcolor="#8463ff"><input type="text"


field
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-


bin/example.cgi">
Example 4:
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>
<input> input Example 5:
<form method=post action="/cgi- Example 5:
field
bin/example.cgi"> Tip)
<center>
Select an option: Select an
<select> option:
<option >option 1</option>
<option selected>option 2</option> Submit
<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 Example 6: Example 6:
field <form method=post action="/cgi-
bin/example.cgi"> Select an
Select an option:<br> option:
<input type="radio" name="option"> Option
1
Option 1
<input type="radio" name="option" checked> Option 2
Option 2 Option 3
<input type="radio" name="option"> Option
3
<br> Select an
<br> option:
Select an option:<br>
<input type="checkbox" name="selection"> Selection
Selection 1 1
<input type="checkbox" name="selection" Selection
checked> Selection 2
<input type="checkbox" name="selection"> 2
Selection 3 Selection
<input type="Submit" value="Submit"> 3
</form> Submit

<li> list Example 1: Example 1:


item List

<menu> item 1
<li type="disc">List item 1</li>
<li type="circle">List item 2</li> o List
<li type="square">List item 3</li> item 2
</MENU>  List
item 3
Example 2:
Example 2:
<ol type="i"> i. List
<li>List item 1</li> item 1
<li>List item 2</li> ii. List
<li>List item 3</li> item 2
<li>List item 4</li> iii. List
</ol> item 3
iv. List
item 4
<marquee bgcolor="#cccccc"
<marqu
scrolli loop="-1" scrollamount="2"
ee>
(Internet ng text width="100%">Example
Explorer)
Marquee</marquee>
<menu> menu <menu>  List
<li type="disc">List item 1</li>
item 1
<li type="circle">List item 2</li>
<li type="square">List item 3</li> o List
</menu> item 2
 List
item 3
<meta name="Description"
content="Description of your site">
Nothing
<meta> meta <meta name="keywords"
will show
content="keywords describing your
site">
<meta HTTP-EQUIV="Refresh"
Nothing
<meta> meta CONTENT="4;URL=http://www.y
will show
ourdomain.com/">
<meta> meta <meta http-equiv="Pragma" Nothing
content="no-cache"> will show
<meta name="rating" Nothing
<meta> meta
content="General"> will show
<meta name="robots" Nothing
<meta> meta
content="all"> will show
<ol> ordere Numbered
Numbered
d list 1. List item 1
2. List item 2
<ol> 3. List item 3
<li>List item 1</li> 4. List item 4
<li>List item 2</li> Numbered Special Start
<li>List item 3</li>
5. List item 1
<li>List item 4</li> 6. List item 2
</ol> 7. List item 3
8. List item 4

Numbered Special Start Lowercase Letters

a. List item 1
<ol start="5"> b. List item 2
c. List item 3
<li>List item 1</li>
d. List item 4
<li>List item 2</li>
<li>List item 3</li> Capital Letters

<li>List item 4</li> A. List item 1


B. List item 2
</ol> C. List item 3
D. List item 4
Lowercase Letters Capital Letters Special
Start
<ol type="a">
C. List item 1
<li>List item 1</li> D. List item 2

<li>List item 2</li> E. List item 3

<li>List item 3</li> F. List item 4

<li>List item 4</li> Lowercase Roman


Numerals
</ol>
i. List item 1
ii. List item 2
Capital Letters iii. List item 3
iv. List item 4
<ol type="A">
Capital Roman
<li>List item 1</li> Numerals
<li>List item 2</li> I. List item 1
<li>List item 3</li> II. List item 2
III. List item 3
<li>List item 4</li> IV. List item 4

</ol> Capital Roman


Numerals Special Start

Capital Letters Special Start VII.


VIII.
List item 1
List item 2

<ol type="A" start="3"> IX. List item 3


X. List item 4
<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>
<form method=post action="/cgi-
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option> Select an
<option listbox <option selected>option 2</option>
option:
> option <option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
<p> paragr This is an example displaying the use of This is an
the paragraph tag. <p> This will create a example
aph displaying the
line break and a space between lines.
use of the
paragraph tag.
Attributes:
This will create
Example 1:<br> a line break and
<br> a space
<p align="left"> between lines.
This is an example<br>
displaying the use<br> Attributes:
of the paragraph tag.<br>
<br> Example 1:
Example 2:<br>
This is an
<br>
example
<p align="right"> displaying the
This is an example<br> use
displaying the use<br> of the
of the paragraph tag.<br> paragraph tag.
<br>
Example 2:
Example 3:<br>
<br> <p align="center"> This is an
This is an example<br> example
displaying the use<br> displaying the
use
of the
paragraph tag.
Example 3:
of the paragraph tag.
This is an
example
displaying the
use
of the
paragraph tag.
small Example
<small> <small>Example</small>
(text) (Tip)
deleted
<strike> <strike>Example</strike> Example
text
<strong strong
> emphasis <strong>Example</strong> Example
Example 1: Example 1:
<table border="4" cellpadding="2"
cellspacing="2" width="100%"> Colu Colu
<tr> mn 1 mn 2
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 2: (Internet Explorer)


Example 2:
<table> table
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2"
width="100%">
Colu Colu
<tr> mn 1 mn 2
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 3:

<table cellpadding="2" cellspacing="2"


width="100%"> Example 3:
<tr>
<td bgcolor="#cccccc">Column 1</td> Colu Colu
<td bgcolor="#cccccc">Column 2</td>
</tr>
mn 1 mn 2
<tr> Row Row
<td>Row 2</td> 2 2
<td>Row 2</td>
</tr>
</table>
<td> table <table border="2" cellpadding="2"
cellspacing="2" width="100%">
data Colu Colu
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
mn 1 mn 2
</table>

<th> table <div align="center"> Colum Colu


n 1 mn 2
Colum
n3
<table>
header <tr> Row 2 Row 2
Row 3 Row 3
Row 2
Row 3
<th>Column 1</th> Row 4 Row 4 Row 4

<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 border="2" cellpadding="2"


cellspacing="2" width="100%">
table <tr> Colum Colum
<tr> <td>Column 1</td> n1 n2
row <td>Column 2</td>
</tr>
</table>

<tt> teletype <tt>Example</tt> Example


underlin
<u> e
<u>Example</u> Example
<ul> unorde Example 1:<br> Example 1:
red list <br>
<ul>
 List item 1
 List item 2
<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"> Example 2:
<li>List item 3</li>  List item 1
<li>List item 4</li>  List item 2

</ul> o List item 3

</ul>
o List item 4

You might also like