List of HTML 4 tags

Name

Attributes

End Tag

Description

<A>

accesskey="accessibility key character"
charset="character encoding of linked source"
class="class name"
coords="client-side image maps coordinates"
dir="direction for weak/neutral text"
href="URL for linked resource"
hreflang="language code"
id="document-wide unique id"
lang="language code"
name="name of target location"
onblur="script"
onclick="script"
ondblclick="script"
onfocus="script"
onhelp="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
rel="forward link types"
rev="reverse link types"
shape="client-side image maps coordinates"
style="associated style info"
tabindex="position in tabbing order"
target="frame target, in case page is using the frames"
title="advisory title"
type="content type"

</A>

The A element is used to make the links, e.g

<A href="abc123.html">click here to open the link </A>

this will look on the browser like

click here to open the link

and when you will click on the above link, it will open the site abc123.com

<ABBR>

class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</ABBR>

The ABBR element is used to describe an abbreviated form (e.g. WWW)

e.g

<ABBR title="World Wide Web">WWW</ABBR>

This allows author to clearly indicate that it is the abbreviation

</ACRONYM>

The ACRONYM element indicates an acronym and its purpose is similar to ABBR tag

</ADDRESS>

The ADDRESS element is used to provide the information on author. This element may be used by authors to supply contact information for a document.

e.g

<ADDRESS>
<A href="abc/">abc</A>,
contact persons for the <A href="Activity">HTML Tutorial</A><BR>
</ADDRESS>

On browser it will look like

abc, contact persons for the HTML Tutorial

align="vertical or horizontal alignment"
alt="short description"
archive="comma-separated archive list"
class="class name"
code="applet class file"
codebase="optional base URI for applet"
height="initial height"
hspace="horizontal gutter"
id="document-wide unique id"
name="unique name"
object="name of applet file"
style="associated style info"
title="advisory title"
vspace="vertical gutter"
width="initial width"

</APPLET>

The APPLET element is used to insert a java applet and is deprecated

<AREA>

accesskey="accessibility key character"
alt="short description"
class="class name"
coords="client-side image maps coordinates"
dir="direction for weak/neutral text"
href="URI for linked resource"
id="document-wide unique id"
lang="language code"
nohref
onblur="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
shape="client-side image maps coordinates"
style="associated style info"
tabindex="position in tabbing order"
target="frame target"
title="advisory title"

Forbidden

The AREA element is used to define a client-side image map area. The image seen on the browser may have the hyper link and the area in which the link will be activated is defined by this tag

e.g

On the image named img1.gif, the rectangular area with the screen coordinates "22,16,103,65" will have a hyperlink to "abc.htm"

<B>

</B>

The B element is used to write the text in bold characters.

e.g

<B>
< FONT color="#000099">
This text is bold
</FONT>
</B>

On the browser it will look like

This text is bold

<BASE>

href="URI for linked resource"
target="frame target"

Forbidden

The BASE element allows authors to specify a document's base URL explicitly and if present comes under the HEAD section

e.g

<HTML>
<HEAD>
<TITLE>Base example</TITLE>
<BASE href="http://www.abc.com/index.html">
</HEAD>
<BODY>
<P>Click here to see other <A href="examples/examples.html">examples</A>
</BODY>
</HTML>

here other examples will be in http://www.abc.com/examples/examples.html

<BASEFONT>

color="color"
face="font name(s)"
id="document-wide unique id"
size="1-7 (+/-)"

Forbidden

The BASEFONT element is used to specify base font size and is deprecated.

<BDO>

class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
style="associated style info"
title="advisory title"

</BDO>

The BDO element is used in scenarios where absolute control over sequence order is required for example... to override the default text direction.

e.g.

<BDO dir="rtl">
Here is some Hebrew text
</BDO>

On the browser it will look like

Here is example of BDO tag

<BIG>

</BIG>

The BIG element displays the text in the bigger font

e.g

<FONT color="#000099">
normal text <BR>
<BIG>bigger text </BIG></FONT>

On the browser it will look like

normal text
bigger text

cite="URL of source information"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</BLOCKQUOTE>

The BLOCKQUOTE element is used to show the block-level content, by entering the long quotation

e.g

<FONT color="#000099">
<B>This text is not blockquoted.
<BR>
<BLOCKQUOTE>This text is blockquoted.</BLOCKQUOTE>
</B></FONT>

On the browser it will look like

This text is not blockquoted.

This text is blockquoted.

<BODY>

alink="color name"
background="URL of background image"
bgcolor="color name"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
link="color name"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onload="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onunload="script"
style="associated style info"
text="color name"
title="advisory title"
vlink="color name"

</BODY>
(Optional)

The BODY element is used to display the content of the page. This is what we see as the web page, all the tags except HTML, HEAD and its sub tags comes under the body tag

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<BODY>Web page content</BODY>
</HTML>

On the browser it will show

Web page content

<BR>

class="class name"
clear="left - all - right - none"
id="document-wide unique id"
style="associated style info"
title="advisory title"

Forbidden

The BR element is used to enter a forced line break

e.g

<FONT color="#000099"><B>
<P> Hi! <BR> How are you ??</P>
</B></FONT>

On the browser it will look like

Hi!
How are you ??

accesskey="accessibility key character"
class="class name"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
lang="language code"
name="name of target location"
onblur="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
tabindex="position in tabbing order"
title="advisory title"
type="content type"
value="value"

</BUTTON>

The BUTTON element is used to insert a push button on the web page

e.g

On the browser it will look like

align="left - center - right - justify - char"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</CAPTION>

The CAPTION element describes the table heading

e.g

<TABLE width="50%" border="1" bgcolor="#33CCFF">
<CAPTION>Alphabets table</CAPTION>
<TR>
<TD width="50%">ABCDEFGH</TD>
<TD width="50%">abcdefgh</TD>
</TR>
</TABLE>

On the browser it will look like

Alphabets table
ABCDEFGH	abcdefgh

<CENTER>

</CENTER>

This CENTER element aligns the text to the center and is deprecated.

<CITE>

</CITE>

The CITE element is used for the text citation.

e.g

<FONT color="#000099"><B>
<CITE>This is cite text </CITE></B></FONT>

On the browser it will look like

This is cite text

<CODE>

</CODE>

This makes the text looks like a computer code text

e.g

<FONT color="#000099"><B>
<CODE>This is a code text. </CODE></B></FONT>

On the browser it will look like

This is a code text.

<COL>

align="left - center - right - justify - char"
char="character"
charoff="number"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
span="number"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"
width="column width specification"

Forbidden

The COL element allows authors to group together attribute specifications for table columns. The COL does not group columns together structurally -- that is the role of the COLGROUP element. COL elements are empty and serve only as a support for attributes. They may appear inside or outside an explicit column group.

On the browser it will look like

</COLGROUP>
O

The COLGROUP element allows authors to create structural divisions within a table.

e.g

<TABLE width="50%" border="1" bgcolor="#FFCC00">
<COLGROUP width="20">
<COL span="2" align="right" >
<COL span="1" align="left" >
</COLGROUP>
<CAPTION>Colours</CAPTION>
<TR>
<TD width="25%">Red</TD>
<TD width="25%">Blue</TD>
<TD width="25%">Green</TD>
</TR>
</TABLE>

On the browser it will look like

Colours
Red	Blue	Green

<DD>

</DD>
O

The DD element is used to provide the definition description of any term in the Definition List

<DL>
<DT><B><FONT color="#990000">EM</FONT></B>
<DD>This tag is used for the text emphasis
</DL>

On the browser it will look like

EM: This tag is used for the text emphasis

<DEL>

cite="URL of source information"
datetime="date"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onselectstart="script"
style="associated style info"
title="advisory title"

</DEL>

The DEL element is used to show the modified document and marks the text as deleted text.

e.g

<DEL><FONT color="#CC6600">This is deleted text</FONT></DEL>

On the browser it will look like

~~This is deleted text~~

<DFN>

</DFN>

The DFN element is used to suggest that the word is a definition.

e.g

<p><font color="#000099"><dfn>URL</dfn> is the acronym for the Universal Resourse Locator</font></p>

On the bowser it will look like

URL is the acronym for the Universal Resourse Locator.

<DIR>

class="class name"
compact
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</DIR>

The DIR element is used to for directory list and is deprecated.

<DIV>

</DIV>

The DIV element is used to display the block level information and adds the structure to the page.

e.g

<P><font color="#000099">This is<DIV align="center">an example</DIV><DIV align="center" >of<P>div tag </DIV></font>

On the browser it will look like

This is

an exmple

div tag

<DL>

</DL>

The DL element is used for definition list

e.g

<DL>
<DT>EM
<DD>This tag is used for the emphasis
<DT>B
<DD>This tag is used for the bold text
</DL>

On the browser it will look like

EM: This tag is used for the emphasis
B: This tag is used for the bold text

<DT>

Optional

The DT element is used for definition term

e.g

<DL>
<DT><B><FONT color="#000099">EM</FONT></B>
<DD>This tag is used for the emphasis
<DT><B><FONT color="#000099">B</FONT></B>
<DD>This tag is used for the bold text
</DL>

On the browser it will look like

EM: This tag is used for the emphasis
B: This tag is used for the bold text

<EM>

</EM>

The EM element is used to emphasise the text

e.g

<EM><FONT color="#000099">This is an emphasised text</FONT></EM>

On the browser it will look like.

This is an emphasised text

</FIELDSET>

The FIELDSET element is used to group related controls and labels based on the category or theme.

e.g

<FORM name="form2" method="post" action=""><P>
<FIELDSET><LEGEND> Personal Information</LEGEND> First Name
<INPUT type="text" name="textfield">
<BR>
Last Name
<INPUT type="text" name="textfield2">
</FIELDSET>
<BR>
<FIELDSET><LEGEND>Qualification</LEGEND>
Education Qualification
<INPUT type="text" name="textfield3">
<BR>
Professional qualification
<INPUT type="text" name="textfield4">
</FIELDSET></P>
</FORM>

<FONT>

class="class name"
color="color"
dir="direction for weak/neutral text"
face="font name(s)"
id="document-wide unique id"
lang="language code"
size="1-7 (+/-)"
style="associated style info"
title="advisory title"

</FONT>

The FONT element is used for local change to font and is deprecated.

<FORM>

accept-charset="list of supported charsets"
action="URL of server-side form handler"
class="class name"
dir="direction for weak/neutral text"
enctype="content type"
id="document-wide unique id"
lang="language code"
method="get - post"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onreset="script"
onsubmit="script"
style="associated style info"
target="frame target"
title="advisory title"

</FORM>

The FORM element is used to add the interactivity to the web page and acts as a container for the form objects e.g List box, text box

e.g

<FORM name="form3" method="post" action="">
<P>Enter the password
<INPUT type="text" name="textfield5">
</P>
<P>
<INPUT type="submit" name="Submit" value="Submit">
</P>
</FORM>

<FRAME>

class="class name"
frameborder="0 - 1"
id="document-wide unique id"
longdesc="link to long description"
marginheight="pixels"
marginwidth="pixels"
name="name of target location"
noresize
scrolling="yes - no - auto"
src="source of frame content"
style="associated style info"
title="advisory title"

Forbidden

The FRAME element is used to divide the page into subwindows and each subwindow is called the frame.

e.g

This code will divide the page into two subwindows and each will have different html pages as source file.

class="class name"
cols="list of lengths"
id="document-wide unique id"
onload="script"
onunload="script"
rows="list of lengths"
style="associated style info"
title="advisory title"

</FRAMESET>

The FRAMESET element is used with FRAME element to divide the page.

H1,H2,H3
H4,H5,H6

</H#>

The HEADING element is used to show the heading

e.g

<FONT color="#000099">
<H1>Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
</FONT>

On the browser it will look like

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

<HEAD>

dir="direction for weak/neutral text"
lang="language code"
profile="URL"

</HEAD>
Optional

The HEAD element is used to provide the information about the current document, such as its title, keywords.

<HR>

align="left - center - right"
class="class name"
id="document-wide unique id"
noshade
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
size="pixels"
style="associated style info"
title="advisory title"
width="percentage - pixels"

Forbidden

The HR element is used to insert a horizontal rule

e.g

<HR width="100%" size="4">

On the browser it will look like

<HTML>

dir="direction for weak/neutral text"
lang="language code"
version="URL"

</HTML>
Optional

The HTML element is used to indicate the html document , it is document root element and all the other tags are contained in it.

<I>

</I>

The I element is used to display the text in italic style.

e.g

<I><FONT color="#000066">
<B>This is an italic styled text</B></FONT></I>

On the browser it will look like

This is an italic styled text

align="left - middle - right - top"
class="class name"
frameborder="0 - 1"
height="percentage - pixels"
id="document-wide unique id"
longdesc="URL"
marginheight="pixels"
marginwidth="pixels"
name="name of target location"
scrolling="yes - no - auto"
src="source of frame content"
style="associated style info"
title="advisory title"
width="frame width specification"

</IFRAME>

The IFRAME element is used to insert an inline subwindow within a block of text.

e.g

<IFRAME src="tutorials.html" width="300" height="400"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
<A href="tutorials.html">the related document.</A>]
</IFRAME>

On the browser it will look like

[Your user agent does not support frames or is currently configured not to display frames. However, you may visit <A href="tutorials.html">the related document.</A>]

<IMG>

align="left - middle - right - top"
alt="short description"
border="pixels"
class="class name"
dir="direction for weak/neutral text"
height="pixels"
hspace="pixels"
id="document-wide unique id"
ismap
lang="language code"
longdesc="URL"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
src="URL of image"
style="associated style info"
title="advisory title"
usemap="URL of client-side image map"
vspace="pixels"
width="image width"

Forbidden

The IMG element is used to embed image in the html document.

e.g

<img src="img1.gif" width="126" height="90" border="2">

On the browser it will look like

<INPUT>

accept="MIME types"
accesskey="accessibility key character"
align="left - middle - right - top"
alt="text"
checked
class="class name"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
lang="language code"
maxlength="max chars for text field"
name="name of target location"
onblur="script"
onchange="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onselect="script"
readonly
size="field size"
src="URL of image"
style="associated style info"
tabindex="number"
title="advisory title"
type="input type/text"
usemap="URL of image map"
value="value"

Forbidden

The INPUT element is used to insert the form control to provide the interactivity to the html document.

e.g

<FORM name="form4" method="post" action="abc.asp">
Please enter the password
<INPUT type="password" name="pwd">
</FORM>

On the browser it will look like

<INS>

cite="URL of source information"
class="class name"
datetime="date and time of change"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</INS>

The INS element is used for inserted text

e.g

<INS> This is an inserted text</INS>

On the browser it will look like

This is an inserted text

<ISINDEX>

class="class name"
dir="direction for weak/neutral text"
href="URI for linked resource"
id="document-wide unique id"
lang="language code"
prompt="message"
style="associated style info"
title="advisory title"

Forbidden

The ISINDEX to used to indicate the single line prompt and is deprecated.

<KDB>

</kbd>

The KDB element is used to indicate that text to be entered is by the user

<LABEL>

accesskey="accessibility key character"
class="class name"
dir="direction for weak/neutral text"
for="field ID value"
id="document-wide unique id"
lang="language code"
onblur="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</LABEL>

The LABEL element is used for form field label text.

e.g

<FORM action="..." method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">First Name</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Last Name</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

On the browser it will look like

accesskey="accessibility key character"
align="left - right - bottom - top"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

The LEGEND element is used to assign a caption to a fieldset, i.e label to the fieldset

e.g

<FORM name="form2" method="post" action=""><P>
<FIELDSET><LEGEND> Personal Information</LEGEND> First Name
<INPUT type="text" name="textfield">
<BR>
Last Name
<INPUT type="text" name="textfield2">
</FIELDSET>
<BR>
<FIELDSET><LEGEND>Qualification</LEGEND>
Education Qualification
<INPUT type="text" name="textfield3">
<BR>
Professional qualification
<INPUT type="text" name="textfield4">
</FIELDSET></P>
</FORM>

<LI>

</LI>
Optional

The LI element is used to list item.

e.g

On the browser it will look like

This is 20.
This is 30.
This is 31.

<LINK>

charset="character encoding of linked source"
class="class name"
dir="direction for weak/neutral text"
href="URI for linked resource"
hreflang="language code"
id="document-wide unique id"
lang="language code"
media="media type"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
rel="forward link types"
rev="reverse link types"
style="associated style info"
target="frame target"
title="advisory title"
type="content type"

Forbidden

The LINK element is used to define a link and is defined under the head section.

e.g

<HEAD>
<TITLE>Language lesson</TITLE>
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="next.html">
<LINK rel="Prev" href="prev.html">
</HEAD>

<MAP>

class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
name="name of target location"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</MAP>

The MAP element is used to define the client-side image map

e,g

<IMG src="img1.gif" width="126" height="90" usemap="#Map" border="0">
<MAP name="Map">
<AREA shape="rect" coords="22,16,103,65" href="abc.html" target="_self">
</MAP>

On the image named img1.gif, the rectangular area with the screen coordinates "22,16,103,65" will have a hyperlink to "abc.htm"

<MENU>

</MENU>

The MENU element is used to define single column menu lists and is deprecated

<META>

content="associated information"
dir="direction for weak/neutral text"
http-equiv="http response header name"
lang="language code"
name="name of target location"
scheme="select form of content"

Forbidden

The META element is used to identify generic properties of a document e.g., author, expiration date, a list of key words, etc.

</NOFRAMES>

The NOFRAME element is used to specify the alternate content container for non frame-based browsers

e.g

<HTML>
<HEAD>
<TITLE>NOFRAMES example</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="keywordslisting.htm">
<FRAME src="buildseopages.htm">
<NOFRAMES>
<P>Here is the <A href="main-noframes.htm">
non-frame based version of the document.</A>
</NOFRAMES>
</FRAMESET>
</HTML>

The link to main-noframes.htm will be shown when the user agent doesn't support the frames.

</NOSCRIPT>

The NOSCRIPT element is used to specify the alternate content when a script is not being executed by the user agaent/explorer

e.g

<SCRIPT">
...script is defined here in javascript or vbscript...
</SCRIPT>
<NOSCRIPT>
<P>Please go to the page <A href="http://noscript.html">noscript.</A> in case the script is not executed
</NOSCRIPT>

align="left - right - bottom - top - middle"
border="percentage - pixels"
class="class name"
classid="id"
codebase="URL for classid, data, archive"
codetype="content type for code"
data="URL to data"
declare
dir="direction for weak/neutral text"
height="percentage - pixels"
hspace="percentage - pixels"
id="document-wide unique id"
lang="language code"
name="name of target location"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
standby="message to show while loading"
style="associated style info"
tabindex="position in tabbing order"
title="advisory title"
type="content type"
usemap="URL to client-side image map"
vspace="percentage - pixels"
width="column width specification"

</OBJECT>

The OBJECT element is used to embed the object e.g image, applet in the html document.

e.g

<OBJECT id="obj1">
<PARAM name="param1">
</OBJECT>

<OL>

class="class name"
compact
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
start="starting sequence number"
style="associated style info"
title="advisory title"
type="content type"

</OL>

The OL element is used to specify the ordered list

On the browser it will look like

This is 20.
This is 30.
This is 31.

class="class name"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
label="text"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</OPTGROUP>

The OPTGROUP element is used to group the options in the list box

e.g

<SELECT name="select">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="Personal Information">
<OPTION value="fn">First Name</option>
<OPTION value="ln">Last Name</option>
</OPTGROUP>
<OPTGROUP label="Qualification">
<OPTION value="ed">Educational Degree</option>
<OPTION value="pd">Professional Degree</option>
</OPTGROUP>
</SELECT>

On the browser it will look like

class="class name"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
label="text"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
selected
style="associated style info"
title="advisory title"
value="value"

Optional

The OPTION element is used to define the selectable choice.

e.g

<SELECT name="select2">
<OPTION value="fo" selected>First Option</option>
<OPTION value="so">Second Option</option>
<OPTION value="to">Third Option</option>
</SELECT>

On the browser it will look like

<P>

align="left - center - right - justify"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"

</P>
Optional

The P element is used to represent the paragraph

e.g

<P>This is a paragraph</P>

On the browser it will look like

This is a paragraph

<PARAM>

id="document-wide unique id"
name="name of target location"
type="content type"
value="value"
valuetype="data - ref - object"

Forbidden

The PARAM element is used to specify a set of values that may be required by an object at run-time

e.g

The above example is using the class add to add the two numbers whose values are being passed with the PARAM element

<PRE>

</PRE>

The PRE element is used to specify the preformatted text

e.g

<FONT color="#000099"><B>
<PRE>
Hello.....
This is a preformatted text...
It will look like this on the browser....
</PRE>
</B></FONT>

On the browser it will look like this

Hello.....
        This is a preformatted text...
                 It will look like this on the browser....

<Q>

</Q>

The Q element is used for short inline quotation

e.g

<Q> This is short inilne quotation </Q>

On the browser it will look like

This is short inilne quotation

<S>

</S>

The S element is used to strike through the text and is deprecated.

<SAMP>

</SAMP>

The SAMP element is used to sample program output, scripts, etc.

e.g

<FONT color="#000099"><B><P>If you select the 'add' option, you will be prompted with the message
<SAMP>Please enter the numbers
</SAMP>
</P></B></FONT>

On the browser it will look like this

If you select the 'add' option, you will be prompted with the message Please enter the numbers.

charset="character encoding of linked source"
defer
event="name of event"
for="element ID"
language="predefined script language name"
src="URL of code"
type="content type"

</SCRIPT>

The SCRIPT element is used for script statements

e.g

<SCRIPT type="text/javascript">
function alertsignal()
{
alert('LION! LION!');
}
</SCRIPT>

This script when executed will pop up an alert window

class="class name"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
lang="language code"
multiple name="name of target location"
onblur="script"
onchange="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
size="number"
style="associated style info"
tabindex="position in tabbing order"
title="advisory title"

The SELECT element is used to create the menu.

e.g

<SELECT name="select2">
<OPTION value="fo" selected>First Option</option>
<OPTION value="so">Second Option</option>
<OPTION value="to">Third Option</option>
</SELECT>

On the browser it will look like this

<SMALL>

</SMALL>

The SMALL element is used to display the text in small style.

e.g

<FONT color="#000099"><b>
<SMALL>This is a small text style</SMALL>
</b></FONT>

On the browser it will look like

This is a small text style

<SPAN>

</SPAN>

The SPAN element is used to with CSS to provide structure in the html document.

<STRIKE>

</STRIKE>

The STRIKE element is used to strike-through the text and is deprecated.

</STRONG>

The STRONG element is used to make the text look like strongly emphasised.

e.g

<FONT color="#000099">
<STRONG>This is a strong text style</STRONG>
</FONT>

On the browser it will look like

This is a strong text style

<STYLE>

dir="direction for weak/neutral text"
lang="language code"
media="media type"
title="advisory title"
type="content type"

</STYLE>

The STYLE element is used to provide the style info

<SUB>

</SUB>

The SUB element displays the text in the subscript form

e.g

This is normal style text
<FONT color="#000099">
<SUB>This is subscript style text</SUB></FONT>

On the browser it will look like

This is normal style. _{This
is subscript style}

<SUP>

class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
style="associated style info"
title="advisory title"

</SUP>

The SUP element displays the text in the superscript form

e.g

This is normal style text
<FONT color="#000099">
<SUP>This is superscript style text</SUP></FONT>

On the browser it will look like

This is normal style. ^{This
is superscript style}

<TABLE>

align="left - center - right - justify - char"
bgcolor="color name"
border="pixels"
cellpadding="pixels"
cellspacing="pixels"
dir="direction for weak/neutral text"
frame="parts of frame to render"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
rules="rulings between rows and cols"
style="associated style info"
summary="summary info"
title="advisory title"
width="column width specification"

</TABLE>

The TABLE element is used to define a table consisting of rows and columns.

e.g

<TABLE width="90%" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFCC33" bordercolor="#000000">
<TR>
<TD width="50%">111</td>
<TD width="50%">222</td>
</TR>
<TR>
<TD width="50%">333</td>
<TD width="50%">444</td>
</TR>
</TABLE>

On the browser it will look like

111	222
333	444

<TBODY>

align="left - center - right - justify - char"
char="character"
charoff="number"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"

</TBODY>
Optional

The TBODY element is used for the table body. This element is used alongwith THEAD and TFOOT. This division enables browsers to support scrolling of table bodies independently of the table head and foot.

e.g

<TABLE border="1" cellpadding="0" cellspacing="0" width="90%" bgcolor="#66CCFF" bordercolor="#000000">
<THEAD>
<TR>
<TH>Header 1</TH>
<TH>Header 2</TH>
<TH>Header 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Footer 1</TD>
<TD>Footer 2</TD>
<TD>Footer 3</TD>
</TR>
</TFOOT>
</TABLE>

On the browser it will look like

Header 1	Header 2	Header 3
1	2	3
4	5	6
Footer 1	Footer 2	Footer 3

<TD>

abbr="abbreviation"
align="left - center - right - justify - char"
axis="comma-separated list"
bgcolor="color name"
char="character"
charoff="number"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"
width="column width specification"

</TD>
Optional

The TD element is used for table data cell.

e.g

On the browser it will look like

111	222
333	444

accesskey="accessibility key character"
class="class name"
cols="number"
dir="direction for weak/neutral text"
disabled
id="document-wide unique id"
lang="language code"
name="name of target location"
onblur="script"
onchange="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onselect="script"
readonly
rows="number"
style="associated style info"
tabindex="position in tabbing order"
title="advisory title"

</TEXTAREA>

The TEXTAREA element is used to define multi-line text field.

e.g

On the browser it will look like

<TFOOT>

align="left - center - right - justify - char"
bgcolor="color name"
char="character"
charoff="number"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"

</TFOOT>
Optional

The TFOOT element is used to define the table footer. In case of printing the long table the table footer is printed on each page

e.g

<TABLE border="1" cellpadding="0" cellspacing="0" width="90%" bgcolor="#66CCFF" bordercolor="#000000">
<THEAD>
<TR>
<TH>Header 1</TH>
<TH>Header 2</TH>
<TH>Header 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR></TBODY>
<TFOOT>
<TR>
<TD>Footer 1</TD>
<TD>Footer 2</TD>
<TD>Footer 3</TD>
</TR>
</TFOOT>
</TABLE>

On the browser it will look like

Header 1	Header 2	Header 3
1	2	3
4	5	6
Footer 1	Footer 2	Footer 3

<TH>

abbr="abbreviation"
align="left - center - right - justify - char"
axis="comma-separated list"
bgcolor="color name"
char="character"
charoff="number"
class="class name"
cols="number"
dir="direction for weak/neutral text"
headers="list of id's for header cells"
height="pixels"
id="document-wide unique id"
lang="language code"
nowrap
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
rows="number"
scope="scope covered by header cells"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"
width="column width specification"

</TH>
Optional

The TH element defines a cell that contains header information

e.g

<TABLE border="1" cellpadding="0" cellspacing="0" width="90%" bgcolor="#66CCFF" bordercolor="#000000">
<THEAD>
<TR>
<TH>Header 1</TH>
<TH>Header 2</TH>
<TH>Header 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR></TBODY>
<TFOOT>
<TR>
<TD>Footer 1</TD>
<TD>Footer 2</TD>
<TD>Footer 3</TD>
</TR>
</TFOOT>
</TABLE>

On the browser it will look like

Header 1	Header 2	Header 3
1	2	3
4	5	6
Footer 1	Footer 2	Footer 3

<THEAD>

align="left - center - right - justify - char"
char="character"
charoff="number"
class="class name"
dir="direction for weak/neutral text"
id="document-wide unique id"
lang="language code"
onclick="script"
ondblclick="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
style="associated style info"
title="advisory title"
valign="top - middle - bottom - baseline"

</THEAD>
Optional

The THEAD element is used to define the table header. In case of printing the long table the table header is prited on each page

e.g

<TABLE border="1" cellpadding="0" cellspacing="0" width="90%" bgcolor="#66CCFF" bordercolor="#000000">
<THEAD>
<TR>
<TH>Header 1</TH>
<TH>Header 2</TH>
<TH>Header 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR></TBODY>
<TFOOT>
<TR>
<TD>Footer 1</TD>
<TD>Footer 2</TD>
<TD>Footer 3</TD>
</TR>
</TFOOT>
</TABLE>

On the browser it will look like

Header 1	Header 2	Header 3
1	2	3
4	5	6
Footer 1	Footer 2	Footer 3

<TITLE>

dir="direction for weak/neutral text"
lang="language code"

</TITLE>

The TITLE element is used to specify the title of the html document, this is what we see on the blue bar of the browser

<TR>

</TR>
Optional

The TR element is used to define the table row which will contain the table data cells.

e.g

On the browser it will look like

111	222
333	444

<TT>

</TT>

The TT element is used for teletype or monospaced text style

e.g

<TT>This is teletyped style text</TT>.

On the browser it will look like

This is teletyped style text

<U>

</U>

The U element is used to underline the text and is deprecated.

<UL>

</UL>

The UL element is used to define the unordered list i.e that has no logical sequence.

e.g

<UL>
<LI>There</LI>
<LI>Here</LI>
<LI>Nowherer</LI>
</UL>

On the browser it will look like

There
Here
Nowhere

<VAR>

</VAR>

The VAR element is used to define instance of a variable or program argument

Accesskey	-	This attribute assigns an access key to an element. For example you may set or assign a access key which will be associated with the control. Upon pressing the same you focus goes on that control.
charset	-	This attribute specifies the character encoding which is a method of converting a sequence of bytes into a sequence of characters. This conversion fits naturally with the scheme of Web activity: servers send HTML documents to user agents as a stream of bytes; user agents interpret them as a sequence of characters. The conversion method can range from simple one-to-one correspondence to complex switching schemes or algorithms
class	-	With classes you define the page look using stylesheet, for example how the links, text and tables will look like
dir	-	This is the attribute that is used mostly with the new <bdo> tag above. Your possible values are rtl (right-to-left) or the default ltr (left-to-right).
id	-	This attribute assigns a name to an element just like an identification name. This name must be unique in a document
lang	-	This attribute specifies the base language of an element's attribute values and text content. The default value of this attribute is unknown.
hreflang	-	This attribute specifies the base language of the resource designated by href and may only be used when href is specified.
style	-	This attribute specifies style information for the current element.
type	-	This attribute specifies the style sheet language of the element's contents and overrides the default style sheet language.
tabindex	-	This attribute specifies the position of the current element in the tabbing order for the current document
Events	-
onclick	-	The script to be invoked when a pointer button was clicked
ondblclick	-	The script to be invoked when a a pointer button was double clicked
onmousedown	-	The script to be invoked when a pointer button was pressed down
onmouseup	-	The script to be invoked when a pointer button was released
onmouseover	-	The script to be invoked when a pointer was moved onto
onmousemove	-	The script to be invoked when a a pointer was moved within
onmouseout	-	The script to be invoked when a a pointer was moved away
onkeypress	-	The script to be invoked when a key was pressed and released
onkeydown	-	The script to be invoked when a a key was pressed down
onkeyup	-	The script to be invoked when a key was released

Back - HTML Tutorial : Introduction to HTML