Scribd
Upload
97 views

HTML Tags Chart: Web Design Tips HTML Tips Javascript Code

The document provides an HTML tags chart that lists common HTML tags, their name, code example, and brief description. It summarizes over 30 different tags including headings, paragraphs, images, links, lists, and forms. The chart is intended to help users copy and paste HTML tags into their web pages.

Uploaded by

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

HTML Tags Chart: Web Design Tips HTML Tips Javascript Code

The document provides an HTML tags chart that lists common HTML tags, their name, code example, and brief description. It summarizes over 30 different tags including headings, paragraphs, images, links, lists, and forms. The chart is intended to help users copy and paste HTML tags into their web pages.

Uploaded by

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

Note: For special effect codes and tips, make sure you don't miss our

Web Design Tips, HTML Tips and Javascript code sections.

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 a
<!-- comment Nothing will show (Tip)
document-->
<A
<A - anchor HREF="http://www.yourdomain.com/">Visit 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
<BODY> HTML
page</BODY> page (Tip)
document
The contents of your
The contents of your page<BR>The contents web page
<BR> line 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 Definition of
definition
<DD>Definition of the term the term
<DD> descriptio
<DT>Definition Term Definition Term
n
<DD>Definition of the term Definition of
</DL> the term
<DL> Definition Term
<DT>Definition Term Definition of the
definition <DD>Definition of the term term
<DL>
list <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the
</DL> term
<DL> Definition Term
<DT>Definition Term Definition of the
definition <DD>Definition of the term term
<DT>
term <DT>Definition Term Definition Term
<DD>Definition of the term 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)
<EMBED> embed <EMBED src="yourfile.mid" autostart="true"
object hidden="false" loop="false"> <bgsound
src="wonderfu.mid"
autostart="false"
loop="1">
Music will begin playing
<noembed><bgsound src="yourfile.mid" when your page is
loop="1"></noembed> 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 FACE="Times New Roman"
<FONT> font 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
<CENTER><INPUT
type="submit"></CENTER>
</FORM>

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

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
<HEAD>Contains elements describing the
<HEAD> of HTML Nothing will show
document</HEAD>
document
<HR> horizontal <HR>
rule
Contents of your web
page (Tip)

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
Contents of your web
<HR> page
horizontal <HR WIDTH="75%" COLOR="#FF0000"
(Internet
rule SIZE="4">
Explorer) Contents of your web
page
Contents of your web
<HR> page
horizontal <HR WIDTH="25%" COLOR="#6699FF"
(Internet
rule SIZE="6">
Explorer) Contents of your web
page
<HTML><HEAD><META><TITLE>Title of
hypertext
your web Contents of your web
<HTML> markup
page</TITLE></HEAD><BODY>HTML web page
language
page contents</BODY></HTML>
<I> italic <I>Example</I> Example
<IMG SRC="Earth.gif" WIDTH="41"
<IMG> image HEIGHT="41" BORDER="0" ALT="a
sentence about your web site"> (Tip)
Example 1:

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


<INPUT> input field bin/example.cgi">
<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>
(Internet input field <INPUT type="text" STYLE="color: #FFFFFF;
Explorer) font-family: Verdana; font-weight: bold; font- Submit
size: 12px; background-color: #72A4D2;"
size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
<INPUT> input field Example 3: Example 3: (Tip)

<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>
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
Option 2
<INPUT type="radio" name="option" Option 3
CHECKED> Option 2
<INPUT type="radio" name="option"> Option
3 Select an option:
<BR> Selection 1
<BR>
Select an option:<BR> Selection 2
<INPUT type="checkbox" name="selection">
Selection 1 Selection 3
<INPUT type="checkbox" name="selection" Submit
CHECKED> Selection 2
<INPUT type="checkbox" name="selection">
Selection 3
<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 HREF="http://www.yourdomain.com/">site Visit our site
</A>

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


> scrolling
scrollamount="2" width="100%">Example
(Internet 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.c Nothing will show (Tip)
om/">
<META http-equiv="Pragma" content="no-
<META> meta Nothing will show (Tip)
cache">
<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
Numbered Special
</OL>
Start
Numbered Special Start
5. List item 1
<OL start="5"> 6. List item 2
<LI>List item 1
<LI>List item 2 7. List item 3
<LI>List item 3 8. List item 4
<LI>List item 4
</OL> Lowercase Letters

Lowercase Letters a. List item 1


b. List item 2
<OL type="a"> c. List item 3
<LI>List item 1
<LI>List item 2 d. List item 4
<LI>List item 3
<LI>List item 4 Capital Letters
</OL>
A. List item 1
Capital Letters
B. List item 2
C. List item 3
<OL type="A">
<LI>List item 1 D. List item 4
<LI>List item 2
<LI>List item 3 Capital Letters Special
<LI>List item 4 Start
</OL>
C. List item 1
Capital Letters Special Start
D. List item 2
E. List item 3
<OL type="A" start="3">
<LI>List item 1 F. List item 4
<LI>List item 2
<LI>List item 3 Lowercase Roman
<LI>List item 4 Numerals
</OL>
i. List item 1
Lowercase 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
<LI>List item 4 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
<LI>List item 4 Numerals 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 X. List item 4
<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
listbox <OPTION SELECTED>option 2 Select an option: (Tip)
<OPTION>
option <OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
This is an example
This is an example displaying the use of the displaying the use of the
paragraph tag. <P> This will create a line paragraph tag.
break and a space between lines.
This will create a line
Attributes: break and a space
between lines.
Example 1:<BR>
<BR> Attributes:
<P align="left">
This is an example<BR>
displaying the use<BR> Example 1:
of the paragraph tag.<BR>
<BR> This is an example
<P> paragraph displaying the use
Example 2:<BR>
<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)
strong
<STRONG> <STRONG>Example</STRONG> Example
emphasis
Example 1:
Example 1: (Tip)
<TABLE> table
<TABLE BORDER="4" CELLPADDING="2" Column 1 Column 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> Example 2: (Tip)
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR> Column 1 Column 2
</TABLE>

Example 3:
Example 3: (Tip)
<TABLE CELLPADDING="2"
CELLSPACING="2" WIDTH="100%"> Column 1 Column 2
<TR> Row 2 Row 2
<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>
<TH> table <DIV align="center"><TABLE> Column Column Column
header <TR> 1 2 3
<TH>Column 1</TH> Row 2 Row 2 Row 2
<TH>Column 2</TH> Row 3 Row 3 Row 3
<TH>Column 3</TH>
Row 4 Row 4 Row 4
</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 of your web page
document
<TITLE> <TITLE>Title of your HTML page</TITLE> will be viewable in the
title
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>  List item 1
<LI>List item 1  List item 2
<LI>List item 2
</UL>
<BR> Example 2:
unordere Example 2:<BR>
<UL>
d list <UL type="disc">
<LI>List item 1  List item 1
<LI>List item 2  List item 2
<UL type="circle"> o List item
<LI>List item 3 3
<LI>List item 4
</UL> o List item
</UL> 4

You might also like