HTML Tags Chart

Download as pdf or txt
Download as pdf or txt
You are on page 1of 10

HTML Tags Chart

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part
<!-- comment Nothing will show (Tip)
of a document-->
<A HREF="http:/ /www.yourdomain.
<A - anchor Visit Our Site (Tip)
com/">Visit 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 page
<BR> line break
contents of your page The contents of your web
page
<CENTER>This will center your
<CENTER> center This will center your contents
contents</CENTER>
<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 src="yourfile. mid"
embed
<EMBED> width="100%" height="60"
object (Tip)
align="center">
embed <EMBED src="yourfile. mid"
<EMBED>
object autostart="true" hidden="false"
loop="false"> Music will begin playing when
<noembed><bgsound src="yourfile. mid" your page is loaded and will
loop="1"></noembed> only 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 Example (Tip)
SIZE="4">Example</FONT>
<FONT FACE="Times New Roman"
<FONT> font SIZE="+3"
COLOR="#FF0000">Example</FONT>
Example (Tip)
<FORM action="mailto:
you@yourdomain. com">
Name: <INPUT name="Name" value="" Name: (Tip)
size="10"><BR> Email:
<FORM> form Email: <INPUT name="Email" value="" Submit Query
size="10"><BR>
<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
<HEAD> HTML Nothing will show
the 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
<HR> horizontal <HR WIDTH="50%" SIZE="3" Contents of your web page
rule NOSHADE>
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
<HTML><HEAD><META><TITLE>Title
hypertext
of your web
<HTML> markup Contents of your web page
page</TITLE></HEAD><BODY>HTML
language
web page contents</BODY></HTML>
<I> italic <I>Example</I> Example
<IMG SRC="Earth.gif" WIDTH="41"
<IMG> image HEIGHT="41" BORDER="0" ALT="a
(Tip)
sentence about your web site">
Example 1:

<FORM METHOD=post ACTION="/cgi- Example 1: (Tip)


bin/example. cgi">
<INPUT> input field <INPUT type="text" size="10" Submit
maxlength="30">
<INPUT type="Submit"
VALUE="Submit">
</FORM>
Example 2:

<FORM METHOD=post ACTION="/cgi-


bin/example. cgi">
Example 2: (Tip)
<INPUT type="text" STYLE="color:
<INPUT>
#FFFFFF; font-family: Verdana; font-
(Internet input field Submit
weight: bold; font-size: 12px;
Explorer)
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">
<INPUT> input field
<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 4:

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

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


bin/example. cgi">
Option 1
Select an option:<BR>
<INPUT> input field <INPUT type="radio" name="option"> Option 2
Option 1
Option 3
<INPUT type="radio" name="option"
CHECKED> Option 2
Select an option:
<INPUT type="radio" name="option">
Option 3 Selection 1
<BR>
Selection 2
<BR>
Select an option:<BR> Selection 3
<INPUT type="checkbox" Submit
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 1:
Example 1: (Tip)
<MENU>
<LI type="disc">List item 1 List item 1
<LI type="circle">List item 2 List item 2
<LI type="square">List item 3 List item 3
</MENU>

<LI> list item


Example 2: Example 2:

<OL type="i"> i. List item 1


<LI>List item 1 ii. List item 2
<LI>List item 2 iii. List item 3
<LI>List item 3 iv. List item 4
<LI>List item 4
</OL>
Visit our <A HREF="http:/
<LINK> link Visit our site
/www.yourdomain. com/">site</A>

<MARQUEE bgcolor="#CCCCCC"
<MARQUEE>
scrolling loop="-1" scrollamount= "2"
(Internet
text width="100%">Example
Explorer)
Marquee</MARQUEE>
(Tip)
<MENU>
List item 1
<LI type="disc">List item 1
List item 2
<MENU> menu <LI type="circle">List item 2
List item 3
<LI type="square">List item 3
</MENU>
<META name="Description"
content="Descriptio n of your site">
<META> meta Nothing will show (Tip)
<META name="keywords"
content="keywords describing your site">
<META> meta <META HTTP-EQUIV=" Refresh" Nothing will show (Tip)
CONTENT="4;URL= http://www.
yourdomain. com/">
<META http-equiv=" Pragma"
<META> meta Nothing will show (Tip)
content="no- cache">
<META name="rating"
<META> meta Nothing will show (Tip)
content="General">
<META name="ROBOTS"
<META> meta Nothing will show (Tip)
content="ALL">
<META NAME="ROBOTS"
<META> meta Nothing will show (Tip)
content="NOINDEX, FOLLOW">
Numbered Numbered

<OL> 1. List item 1


<LI>List item 1 2. List item 2
<LI>List item 2 3. List item 3
<LI>List item 3 4. List item 4
<LI>List item 4
</OL> Numbered Special Start

Numbered Special Start 5. List item 1


6. List item 2
<OL start="5"> 7. List item 3
<LI>List item 1 8. List item 4
<LI>List item 2
<LI>List item 3 Lowercase Letters
<LI>List item 4
</OL> a. List item 1
ordered b. List item 2
<OL>
list Lowercase Letters c. List item 3
<OL type="a"> d. List item 4
<LI>List item 1
<LI>List item 2 Capital Letters
<LI>List item 3
<LI>List item 4 A. List item 1
</OL> B. List item 2
C. List item 3
Capital Letters D. List item 4
<OL type="A">
<LI>List item 1 Capital Letters Special Start
<LI>List item 2
<LI>List item 3 C. List item 1
<LI>List item 4 D. List item 2
</OL> E. List item 3
F. List item 4
Capital Letters Special Start
<OL type="A" start="3"> Lowercase Roman
<LI>List item 1 Numerals
<LI>List item 2
<LI>List item 3 i. List item 1
<LI>List item 4 ii. List item 2
</OL> iii. List item 3
iv. List item 4
Lowercase Roman Numerals
<OL type="i"> Capital Roman Numerals
<LI>List item 1
<LI>List item 2 I. List item 1
<LI>List item 3 II. List item 2
<LI>List item 4 III. List item 3
</OL> IV. List item 4

Capital Roman Numerals Capital Roman Numerals


<OL type="I"> Special Start
<LI>List item 1
<LI>List item 2 VII. List item 1
<LI>List item 3 VIII. List item 2
<LI>List item 4 IX. List item 3
</OL> X. List item 4

Capital Roman Numerals Special Start


<OL type="I" start="7">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
<FORM METHOD=post ACTION="/cgi-
bin/example. cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1 Select an option: (Tip)
listbox <OPTION SELECTED>option 2 option 2
<OPTION>
option <OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
This is an example displaying the use of This is an example displaying
the paragraph tag. <P> This will create a the use of the paragraph tag.
<P> paragraph
line break and a space between lines. This will create a line break
and a space between lines.
Attributes:
Attributes:
Example 1:<BR>
<BR> Example 1:
<P align="left">
This is an example<BR> This is an example
displaying the use<BR> displaying the use
of the paragraph tag.<BR> of the paragraph tag.
<BR> Example 2:
Example 2:<BR>
<BR> This is an example
<P align="right"> displaying the use
This is an example<BR> of the paragraph tag.
displaying the use<BR> Example 3:
of the paragraph tag.<BR>
<BR> This is an example
Example 3:<BR> displaying the use
<BR> of the paragraph tag.
<P align="center">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.
<SMALL> small (text) <SMALL>Example</SMALL> Example (Tip)
strong
<STRONG> <STRONG>Example</STRONG> Example
emphasis
Example 1:

<TABLE BORDER="4" CELLPADDING=


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

<TABLE BORDER="2" Example 3: (Tip)


BORDERCOLOR= "#336699" Column 1 Column 2
CELLPADDING= "2" CELLSPACING=
Row 2 Row 2
"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>
<TABLE BORDER="2" CELLPADDING=
"2" CELLSPACING= "2"
WIDTH="100%">
<TR>
<TD> table data
<TD>Column 1</TD> 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>
<TD>Row 2</TD> Column Column Column
</TR> 1 2 3
table
<TH> <TR> Row 2 Row 2 Row 2
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>Title of your HTML Title of your web page will be
<TITLE>
title page</TITLE> viewable in the title bar. (Tip)
<TABLE BORDER="2" CELLPADDING=
"2" CELLSPACING= "2"
WIDTH="100%">
<TR>
<TR> table row Column 1 Column 2
<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>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
unordered Example 2:<BR>
<UL>
list <UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL

You might also like