Scribd
Upload
56 views

HTML Tags Chart: Tag Name Code Example Browser View

This document provides a chart summarizing common HTML tags, including their name, code example, and how they appear in the browser. It lists tags such as <A> for anchors, <B> for bold text, <FORM> for forms, and <IMG> for images. The chart serves as a quick reference to HTML tags and their functions.

Uploaded by

Nikhil Rajadhyax
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
56 views

HTML Tags Chart: Tag Name Code Example Browser View

This document provides a chart summarizing common HTML tags, including their name, code example, and how they appear in the browser. It lists tags such as <A> for anchors, <B> for bold text, <FORM> for forms, and <IMG> for images. The chart serves as a quick reference to HTML tags and their functions.

Uploaded by

Nikhil Rajadhyax
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Tags Chart

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show (Tip)
document-->
<A HREF="http://www.yourdomain.com/">Visit
<A - anchor Visit Our Site (Tip)
Our Site</A>
<B> bold <B>Example</B> Example
<BIG> big (text) <BIG>Example</BIG> Example (Tip)
body of
<BODY>The content of your HTML Contents of your web page
<BODY> HTML
page</BODY> (Tip)
document
The contents of your web
The contents of your page<BR>The contents of page
<BR> line break
your page The contents of your web
page
<CENTER>This will center your
<CENTER> center
contents</CENTER> This will center your contents
<DL> Definition Term
<DT>Definition Term Definition of the
definition <DD>Definition of the term term
<DD>
description <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the
</DL> term
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DL>
list <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DT>
term <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
This is an <EM>Example</EM> of using This is an Example of using
<EM> emphasis
the emphasis tag the emphasis tag
embed <EMBED src="yourfile.mid" width="100%"
<EMBED>
object height="60" align="center"> (Tip)

<EMBED src="yourfile.mid" autostart="true"


embed hidden="false" loop="false">
<EMBED>
object <noembed><bgsound src="yourfile.mid"
loop="1"></noembed> 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 FACE="Times New
<FONT> font
Roman">Example</FONT>
Example (Tip)
<FONT FACE="Times New Roman"
<FONT> font
SIZE="4">Example</FONT> Example (Tip)
<FONT> font
<FONT FACE="Times New Roman" SIZE="+3"
COLOR="#FF0000">Example</FONT> Example (Tip)
<FORM action="mailto:[email protected]">
Name: <INPUT name="Name" value=""
Name: (Tip)
size="10"><BR>
<FORM> form Email: <INPUT name="Email" value="" Email:
size="10"><BR>
Submit Query
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1> heading 1 <H1>Heading 1 Example</H1> Heading 1


Example
<H2> heading 2 <H2>Heading 2 Example</H2> Heading 2
Example
<H3> heading 3 <H3>Heading 3 Example</H3>
Heading 3 Example
<H4> heading 4 <H4>Heading 4 Example</H4>
Heading 4 Example

<H5> heading 5 <H5>Heading 5 Example</H5>


Heading 5 Example

<H6> heading 6 <H6>Heading 6 Example</H6>


Heading 6 Example

heading of
<HEAD>Contains elements describing the
<HEAD> HTML Nothing will show
document</HEAD>
document

Contents of your web page


horizontal
<HR> <HR> (Tip)
rule
Contents of your web page
Contents of your web page
horizontal
<HR> <HR WIDTH="50%" SIZE="3">
rule
Contents of your web page
Contents of your web page
horizontal
<HR> <HR WIDTH="50%" SIZE="3" NOSHADE>
rule
Contents of your web page
<HR> Contents of your web page
horizontal <HR WIDTH="75%" COLOR="#FF0000"
(Internet
rule SIZE="4">
Explorer) Contents of your web page
<HR> Contents of your web page
horizontal <HR WIDTH="25%" COLOR="#6699FF"
(Internet
rule SIZE="6">
Explorer) Contents of your web page
hypertext <HTML><HEAD><META><TITLE>Title of your
<HTML> markup web page</TITLE></HEAD><BODY>HTML web Contents of your web page
language page contents</BODY></HTML>
<I> italic <I>Example</I> Example
<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41"
<IMG> image BORDER="0" ALT="a sentence about your web
site"> (Tip)
<INPUT> input field Example 1: Example 1: (Tip)
<FORM METHOD=post ACTION="/cgi-
bin/example.cgi">
<INPUT type="text" size="10" maxlength="30"> Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 2:

<FORM METHOD=post ACTION="/cgi-


bin/example.cgi"> Example 2: (Tip)
<INPUT>
(Internet input field <INPUT type="text" STYLE="color: #FFFFFF;
Explorer) font-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- Example 3: (Tip)


bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0"
<INPUT> input field 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 4:
Example 4: (Tip)
<FORM METHOD=post ACTION="/cgi-
bin/example.cgi">
Enter Your Comments:<BR>
<INPUT> input field <TEXTAREA wrap="virtual" name="Comments"
rows=3 cols=20
MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
Submit Clear
<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
<INPUT> input field <OPTION SELECTED>option 2 Select an option:
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5 Submit
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit"
VALUE="Submit"></CENTER>
</FORM>
<INPUT> input field Example 6: Example 6: (Tip)

<FORM METHOD=post ACTION="/cgi- Select an option:


bin/example.cgi">
Select an option:<BR> Option 1
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED>
Option 2
Option 2 Option 3
<INPUT type="radio" name="option"> Option 3
<BR>
Select an option:
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
Selection 1
<INPUT type="checkbox" name="selection" Selection 2
CHECKED> Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
Selection 3 Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 1: (Tip)
Example 1:
 List item 1
<MENU>
<LI type="disc">List item 1 o List item 2
<LI type="circle">List item 2
<LI type="square">List item 3  List item 3
</MENU>
<LI> list item
Example 2: Example 2:
<OL type="i">
<LI>List item 1 i. List item 1
<LI>List item 2 ii. List item 2
<LI>List item 3 iii. List item 3
<LI>List item 4
</OL>
iv. List item 4
Visit our <A
<LINK> link Visit our site
HREF="http://www.yourdomain.com/">site</A>

<MARQUEE> <MARQUEE bgcolor="#CCCCCC" loop="-1"


scrolling
(Internet scrollamount="2" width="100%">Example
text
Explorer) Marquee</MARQUEE>
(Tip)

<MENU>  List item 1


<LI type="disc">List item 1
<MENU> menu <LI type="circle">List item 2 o List item 2
<LI type="square">List item 3
</MENU>
 List item 3
<META name="Description" content="Description
of your site">
<META> meta Nothing will show (Tip)
<META name="keywords" content="keywords
describing your site">
<META HTTP-EQUIV="Refresh"
<META> meta 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 NAME="ROBOTS"
<META> meta Nothing will show (Tip)
content="NOINDEX,FOLLOW">
<OL> ordered Numbered Numbered
list 1. List item 1
<OL> 2. List item 2
<LI>List item 1 3. List item 3
<LI>List item 2
<LI>List item 3
4. List item 4
<LI>List item 4
</OL> Numbered Special Start
5. List item 1
Numbered Special Start 6. List item 2
7. List item 3
<OL start="5"> 8. List item 4
<LI>List item 1
<LI>List item 2
<LI>List item 3 Lowercase Letters
<LI>List item 4
</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>List item 2
<LI>List item 3
<LI>List item 4
</OL>
Capital Letters
Capital Letters
A. List item 1
<OL type="A"> B. List item 2
<LI>List item 1 C. List item 3
<LI>List item 2
<LI>List item 3 D. List item 4
<LI>List item 4
</OL> Capital Letters Special Start

Capital Letters Special Start C. List item 1


D. List item 2
<OL type="A" start="3">
E. List item 3
<LI>List item 1
<LI>List item 2 F. List item 4
<LI>List item 3
<LI>List item 4 Lowercase Roman
</OL> Numerals

Lowercase Roman Numerals i. List item 1


ii. List item 2
<OL type="i">
iii. List item 3
<LI>List item 1
<LI>List item 2 iv. List item 4
<LI>List item 3
<LI>List item 4 Capital Roman Numerals
</OL>
I. List item 1
Capital Roman Numerals
II. List item 2
III. List item 3
<OL type="I">
<LI>List item 1 IV. List item 4
<LI>List item 2
<LI>List item 3 Capital Roman Numerals
<LI>List item 4 Special Start
</OL>
VII. List item 1
Capital Roman Numerals Special Start VIII. List item 2
IX. List item 3
<OL type="I" start="7">
<LI>List item 1
<LI>List item 2 X. List item 4
<LI>List item 3
<LI>List item 4
</OL>
<OPTION> listbox <FORM METHOD=post ACTION="/cgi- Select an option: (Tip)
option bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
This is an example displaying the use of the This is an example displaying
paragraph tag. <P> This will create a line break the use of the paragraph tag.
and a space between lines.
This will create a line break
Attributes: and a space between lines.

Example 1:<BR> Attributes:


<BR>
<P align="left">
This is an example<BR> Example 1:
displaying the use<BR>
of the paragraph tag.<BR> This is an example
<BR> displaying the use
<P> paragraph of the paragraph tag.
Example 2:<BR>
<BR>
<P align="right"> Example 2:
This is an example<BR>
displaying the use<BR> This is an example
of the paragraph tag.<BR> displaying the use
<BR> of the paragraph tag.
Example 3:<BR>
<BR> Example 3:
<P align="center">
This is an example<BR> This is an example
displaying the use<BR> displaying the use
of the paragraph tag. of the paragraph tag.
<SMALL> small (text) <SMALL>Example</SMALL> Example (Tip)
strong
<STRONG>
emphasis
<STRONG>Example</STRONG> Example
Example 1:

<TABLE BORDER="4" CELLPADDING="2"


CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD> Example 1: (Tip)
<TD>Column 2</TD> Column 1 Column 2
</TR>
</TABLE>

Example 2: (Internet Explorer) Example 2: (Tip)

<TABLE> table <TABLE BORDER="2"


Column 1 Column 2
BORDERCOLOR="#336699" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD> Example 3: (Tip)
<TD>Column 2</TD>
</TR>
</TABLE> Column 1 Column 2
Row 2 Row 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>
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD> table data <TD>Column 1</TD>
<TD>Column 2</TD> Column 1 Column 2
</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>
<TD>Row 2</TD> Column Colum Colum
</TR> 1 n2 n3
table Row 2 Row 2 Row 2
<TH> <TR>
header
<TD>Row 3</TD> Row 3 Row 3 Row 3
<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>
document Title of your web page will be
<TITLE> <TITLE>Title of your HTML page</TITLE>
title viewable in the title bar. (Tip)
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TR> table row <TD>Column 1</TD> Column 1 Column 2
<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>
<LI>List item 1  List item 1
<LI>List item 2  List item 2
</UL>
<BR>
unordered Example 2:<BR> Example 2:
<UL>
list <UL type="disc">
<LI>List item 1
<LI>List item 2  List item 1
<UL type="circle">  List item 2
<LI>List item 3 o List item 3
<LI>List item 4
</UL>
o List item 4
</UL>
<map name="Map">
<area shape="rect" coords="171,6,233,72" href="Aries.htm">
<area shape="rect" coords="315,166,393,230" href="Cancer.htm">
<area shape="rect" coords="175,315,236,391" href="Libra.htm">
<area shape="rect" coords="3,178,92,235" href="Capricorn.htm">
<area shape="rect" coords="76,45,139,95" href="Pisces.htm">
<area shape="rect" coords="247,28,307,87" href="Taurus.htm">
<area shape="rect" coords="317,79,367,142" href="Gemini.htm">
<area shape="rect" coords="312,250,367,311" href="Leo.htm">
<area shape="rect" coords="258,304,307,366" href="Virgo.htm">
<area shape="rect" coords="83,304,154,360" href="Scorpio.htm">
<area shape="rect" coords="24,255,130,296" href="Sagittarius.htm">
<area shape="rect" coords="37,112,104,159" href="Aquarius.htm">
</map>

You might also like