Star T Tag Content End Tag: HTML - Elements

HTML – Elements
An HTML element is defined by a starting tag. If the

element contains other content, it ends with a closing
tag, where the element name is preceded by a
forward slash as shown below with few tags −
Star
End
t Content
Tag
Tag
This is
<p> paragraph </p>
content.
This is
<h1 </
heading
> h1>
content.
This is
<div </
division
> div>
content.
<br /
>
So here <p>....</p> is an HTML element,
<h1>...</h1> is another HTML element. There are
some HTML elements which don't need to be closed,
such as <img.../>, <hr /> and <br /> elements. These
are known as void elements.
HTML documents consists of a tree of these elements
and they specify how HTML documents should be
built, and what kind of content should be placed in
what part of an HTML document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the

element contains other content, it ends with a closing
tag.
For example, <p> is starting tag of a paragraph
and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph
element.
Nested HTML Elements
It is very much allowed to keep one HTML element

inside another HTML element −
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements
Example</title>
</head>
<body>
<h1>This is <i>italic</i>
heading</h1>
<p>This is <u>underlined</u>
paragraph</p>
</body>
</html>
This will display the following result −
This is italic heading

This is underlined paragraph
HTML - Attributes
We have seen few HTML tags and their usage like

heading tags <h1>, <h2>, paragraph tag <p> and
other tags. We used them so far in their simplest form,
but most of the HTML tags can also have attributes,
which are extra bits of information.
An attribute is used to define the characteristics of an
HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts −
a name and a value
•The name is the property you want to set. For
example, the paragraph <p> element in the
example carries an attribute whose name is align,
which you can use to indicate the alignment of
paragraph on the page.
•The value is what you want the value of the
property to be set and always put within
quotations. The below example shows three
possible values of align attribute: left,
center and right.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute
Example</title>
</head>
<body>
<p align = "left">This is left
aligned</p>
<p align = "center">This is
center aligned</p>
<p align = "right">This is right
aligned</p>
</body>
</html>
This will display the following result −

This is left aligned
This is center aligned
This is right aligned
Core Attributes
The four core attributes that can be used on the
majority of HTML elements (although not all) are −
•Id
•Title
•Class
•Style
The Id Attribute
The id attribute of an HTML tag can be used to

uniquely identify any element within an HTML page.
There are two primary reasons that you might want to
use an id attribute on an element −
•If an element carries an id attribute as a unique
identifier, it is possible to identify just that element
and its content.
•If you have two elements of the same name
within a Web page (or style sheet), you can use
the id attribute to distinguish between elements
that have the same name.
We will discuss style sheet in separate tutorial. For
now, let's use the id attribute to distinguish between
two paragraph elements as shown below.
Example
<p id = "html">This para explains what
is HTML</p>
<p id = "css">This para explains what is
Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the

element. They syntax for the title attribute is similar as
explained for id attribute −
The behavior of this attribute will depend upon the
element that carries it, although it is often displayed as
a tooltip when cursor comes over the element or while
the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute
Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled
Heading Tag Example</h3>
</body>
</html>
This will produce the following result −
Titled Heading Tag Example
Now try to bring your cursor over "Titled Heading Tag
Example" and you will see that whatever title you used
in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute is used to associate an element

with a style sheet, and specifies the class of element.
You will learn more about the use of the class attribute
when you will learn Cascading Style Sheet (CSS). So
for now you can avoid it.
The value of the attribute may also be a space-
separated list of class names. For example −
class = "className1 className2
className3"
The style Attribute
The style attribute allows you to specify Cascading

Style Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style
Attribute</title>
</head>
<body>
<p style = "font-family:arial;
color:#FF0000;">Some text...</p>
</body>
</html>
Some text...
At this point of time, we are not learning CSS, so just

let's proceed without bothering much about CSS.
Here, you need to understand what are HTML
attributes and how they can be used while formatting
content.
Internationalization Attributes
There are three internationalization attributes, which

are available for most (although not all) XHTML
elements.
•dir
•lang
•xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser

about the direction in which the text should flow. The
dir attribute can take one of two values, as you can
see in the table that follows −
Va
lu Meaning
e
ltr Left to right (the default value)
Right to left (for languages such as Hebrew or

rtl
Arabic that are read right to left)
Example
Live Demo
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-
to-left directed text.
</body>
</html>
Object 1
When dir attribute is used within the <html> tag, it

determines how text will be presented within the entire
document. When used within another tag, it controls
the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main

language used in a document, but this attribute was
kept in HTML only for backwards compatibility with
earlier versions of HTML. This attribute has been
replaced by the xml:lang attribute in new XHTML
documents.
The values of the lang attribute are ISO-639 standard
two-character language codes. Check HTML
Language Codes: ISO 639 for a complete list of
language codes.
Example
Live Demo
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language
Page</title>
</head>
<body>
This page is using English
Language
</body>
</html>
Object 2
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for

the lang attribute. The value of the xml:lang attribute
should be an ISO-639 country code as mentioned in
previous section.
Generic Attributes
Here's a table of some other attributes that are readily

usable with many of the HTML tags.
Attri
Options Function
bute
align right, left, center Horizontally aligns tags
top, middle, Vertically aligns tags within an

valign
bottom HTML element.
numeric,
bgcol Places a background color
hexidecimal,
or behind an element
RGB values
backg Places a background image

URL
round behind an element
id User Defined Names an element for use with

Cascading Style Sheets.
Classifies an element for use

class User Defined
with Cascading Style Sheets.
Specifies the width of tables,

width Numeric Value
images, or table cells.
Specifies the height of tables,

height Numeric Value
images, or table cells.
title User Defined "Pop-up" title of the elements.
HTML - Formatting
If you use a word processor, you must be familiar with

the ability to make text bold, italicized, or underlined;
these are just three of the ten options available to
indicate how text can appear in HTML and XHTML.
Bold Text
Anything that appears within<b>...</b>element, is

displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a
<b>bold</b> typeface.</p>
</body>
</html>
Object 3
Italic Text
Anything that appears within <i>...</i> element is

displayed in italicized as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text
Example</title>
</head>
<body>
<p>The following word uses an
<i>italicized</i> typeface.</p>
</body>
</html>
Object 4
Underlined Text
Anything that appears within <u>...</u> element, is

displayed with underline as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text
Example</title>
</head>
<body>
<u>underlined</u> typeface.</p>
</body>
</html>
Object 5
Strike Text
Anything that appears

within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text as
shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text
Example</title>
</head>
<body>
<strike>strikethrough</strike>
typeface.</p>
</body>
</html>
Object 6
Monospaced Font
The content of a <tt>...</tt> element is written in

monospaced font. Most of the fonts are known as
variable-width fonts because different letters are of
different widths (for example, the letter 'm' is wider
than the letter 'i'). In a monospaced font, however,
each letter has the same width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font
Example</title>
</head>
<body>
<tt>monospaced</tt> typeface.</p>
</body>
</html>
Object 7
Superscript Text
The content of a <sup>...</sup> element is written in

superscript; the font size used is the same size as the
characters surrounding it but is displayed half a
character's height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text
Example</title>
</head>
<body>
<sup>superscript</sup> typeface.</p>
</body>
</html>
Object 8
Subscript Text
The content of a <sub>...</sub> element is written in

subscript; the font size used is the same as the
characters surrounding it, but is displayed half a
character's height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text
Example</title>
</head>
<body>
<sub>subscript</sub> typeface.</p>
</body>
</html>
Object 9
Inserted Text
Anything that appears within <ins>...</ins> element is

displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text
Example</title>
</head>
<body>
<p>I want to drink
<del>cola</del> <ins>wine</ins></p>
</body>
</html>
Object 10
Deleted Text
Anything that appears within <del>...</del> element,

is displayed as deleted text.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text
Example</title>
</head>
<body>
<p>I want to drink
<del>cola</del> <ins>wine</ins></p>
</body>
</html>
Object 11
Larger Text
The content of the <big>...</big> element is

displayed one font size larger than the rest of the text
surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text
Example</title>
</head>
<body>
<big>big</big> typeface.</p>
</body>
</html>
Object 12
Smaller Text
The content of the <small>...</small> element is

displayed one font size smaller than the rest of the
text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text
Example</title>
</head>
<body>
<small>small</small> typeface.</p>
</body>
</html>
Object 13
Grouping Content
The <div> and <span> elements allow you to group

together several elements to create sections or
subsections of a page.
For example, you might want to put all of the footnotes
on a page within a <div> element to indicate that all of
the elements within that <div> element relate to the
footnotes. You might then attach a style to this <div>
element so that they appear using a special set of
style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle"
>
<a href =
"/index.htm">HOME</a> |
<a href =
"/about/contact_us.htm">CONTACT</a> |
<a href =
"/about/index.htm">ABOUT</a>
</div>
<div id = "content" align =

"left" >
<h5>Content Articles</h5>
<p>Actual content goes
here.....</p>
</div>
</body>
</html>
The <span> element, on the other hand, can be used

to group inline elements only. So, if you have a part of
a sentence or paragraph which you want to group
together, you could use the <span> element as
follows.
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span
style = "color:green">span tag</span>
and the <span style =
"color:red">div tag</span> alongwith
CSS</p>
</body>
</html>
Object 15
These tags are commonly used with CSS to allow you

to attach a style to a section of a page.
HTML - Phrase Tags
The phrase tags have been desicolgned for specific

purposes, though they are displayed in a similar way
as other basic tags like <b>, <i>, <pre>, and <tt>, you
have seen in previous chapter. This chapter will take
you through all the important phrase tags, so let's start
seeing them one by one.
Emphasized Text
Anything that appears within <em>...</em> element is

displayed as emphasized text.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text
Example</title>
</head>
<body>
<em>emphasized</em> typeface.</p>
</body>
</html>
Object 14
Marked Text
Anything that appears with-

in <mark>...</mark> element, is displayed as marked
with yellow ink.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Marked Text
Example</title>
</head>
<body>
<p>The following word has been
<mark>marked</mark> with yellow</p>
</body>
</html>
Object 16
Strong Text
Anything that appears

within <strong>...</strong> element is displayed as
important text.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Strong Text
Example</title>
</head>
<body>
<strong>strong</strong> typeface.</p>
</body>
</html>
Object 17
Text Abbreviation
You can abbreviate a text by putting it inside opening

<abbr> and closing </abbr> tags. If present, the title
attribute must contain this full description and nothing
else.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is
<abbr title =
"Abhishek">Abhy</abbr>.</p>
</body>
</html>
My best friend's name is Abhy
Acronym Element
The <acronym> element allows you to indicate that

the text between <acronym> and </acronym> tags is
an acronym.
At present, the major browsers do not change the
appearance of the content of the <acronym> element.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up
text in <acronym>XHTML</acronym>.</p>
</body>
</html>
Object 19
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional

Override and it is used to override the current text
direction.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Text Direction
Example</title>
</head>
<body>
<p>This text will go left to
right.</p>
<p><bdo dir = "rtl">This text
will go right to left.</bdo></p>
</body>
</html>
Object 20
Special Terms
The <dfn>...</dfn> element (or HTML Definition

Element) allows you to specify that you are
introducing a special term. It's usage is similar to italic
words in the midst of a paragraph.
Typically, you would use the <dfn> element the first
time you introduce a key term. Most recent browsers
render the content of a <dfn> element in an italic font.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Special Terms
Example</title>
</head>
<body>
<p>The following word is a
<dfn>special</dfn> term.</p>
</body>
</html>
Object 21
Quoting Text
When you want to quote a passage from another

source, you should put it in
between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually
indented from the left and right edges of the
surrounding text, and sometimes uses an italicized
font.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of
XHTML is taken from the W3C Web
site:</p>
<blockquote>XHTML 1.0 is the
W3C's first Recommendation for
XHTML,following on
from earlier work on HTML
4.01, HTML 4.0, HTML 3.2 and HTML
2.0.</blockquote>
</body>
</html>
Short Quotations
The <q>...</q> element is used when you want to add

a double quote within a sentence.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Double Quote
Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I
am wrong</q>.</p>
</body>
</html>
Object 23
Text Citations
If you are quoting a text, you can indicate the source

placing it between an opening <cite> tag and
closing </cite> tag
As you would expect in a print publication, the content
of the <cite> element is rendered in italicized text by
default.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived
from <cite>W3 Standard for
HTML</cite>.</p>
</body>
</html>
Object 24
Computer Code
Any programming code to appear on a Web page

should be placed inside <code>...</code> tags.
Usually the content of the <code> element is
presented in a monospaced font, just like the code in
most programming books.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Computer Code
Example</title>
</head>
<body>
<p>Regular text. <code>This is
code.</code> Regular text.</p>
</body>
</html>
Object 25
Keyboard Text
When you are talking about computers, if you want to

tell a reader to enter some text, you can use
the <kbd>...</kbd> element to indicate what should
be typed in, as in this example.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text
Example</title>
</head>
<body>
<p>Regular text. <kbd>This is
inside kbd element</kbd> Regular
text.</p>
</body>
</html>
Programming Variables
This element is usually used in conjunction with

the <pre> and <code> elements to indicate that the
content of that element is a variable.
Example
<!DOCTYPE html>
<html>
<head>
<title>Variable Text
Example</title>
</head>
<body>
<p><code>document.write("<var>user-
name</var>")</code></p>
</body>
</html>
Program Output
The <samp>...</samp> element indicates sample

output from a program, and script etc. Again, it is
mainly used when documenting programming or
coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output
Example</title>
</head>
<body>
<p>Result produced by the program
is <samp>Hello World!</samp></p>
</body>
</html>
Address Text
The <address>...</address> element is used to
contain any address.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22,
Jubilee Hills - Hyderabad</address>
</body>
</html>
388A, Road No 22, Jubilee Hills – Hyderabad

HTML - Meta Tags
HTML lets you specify metadata - additional important
information about a document in a variety of ways. The
META elements can be used to include name/value pairs
describing properties of the HTML document, such as
author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional
information. This tag is an empty element and so does
not have a closing tag but it carries information within
its attributes.
You can include one or more meta tags in your
document based on what information you want to
keep in your document but in general, meta tags do
not impact physical appearance of the document so
from appearance point of view, it does not matter if
you include them or not.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing

<meta> tags inside the header of the document which
is represented by <head> and </head> tags. A meta
tag can have following attributes in addition to core
attributes −
Sr
.N Attribute & Description
o
Name
Name for the property. Can be anything.

1
Examples include, keywords, description, author,
revised, generator etc.
content
2
Specifies the property's value.
scheme
3 Specifies a scheme to interpret the property's

value (as declared in the content attribute).
4 http-equiv
Used for http response message headers. For

example, http-equiv can be used to refresh the
page or to set a cookie. Values include content-
type, expires, refresh and set-cookie.
Specifying Keywords
You can use <meta> tag to specify important

keywords related to the document and later these
keywords are used by the search engines while
indexing your webpage for searching purpose.
Example
Following is an example, where we are adding HTML,

Meta Tags, Metadata as important keywords about the
document.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content =
"HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Object 18
Document Description
You can use <meta> tag to give a short description

about the document. This again can be used by
various search engines while indexing your webpage
for searching purpose.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta name = "description"
content = "Learning about Meta Tags."
/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Revision Date
You can use <meta> tag to give information about

when last time the document was updated. This
information can be used by various web browsers
while refreshing your webpage.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta name = "revised" content =
"Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Refreshing
A <meta> tag can be used to specify a duration after

which your web page will keep refreshing
automatically.
Example
If you want your page keep refreshing after every 5

seconds then use the following syntax.
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta http-equiv = "refresh"
content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Page Redirection
You can use <meta> tag to redirect your page to any

other webpage. You can also specify a duration if you
want to redirect the page after a certain number of
seconds.
Example
Following is an example of redirecting current page to

another page after 5 seconds. If you want to redirect
page immediately then do not
specify content attribute.
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta http-equiv = "refresh"
content = "5; url =
http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Setting Cookies
Cookies are data, stored in small text files on your

computer and it is exchanged between web browser
and web server to keep track of various information
based on your web application need.
You can use <meta> tag to store cookies on client
side and later this information can be used by the
Web Server to track a site visitor.
Example
Following is an example of redirecting current page to

another page after 5 seconds. If you want to redirect
page immediately then do not
specify content attribute.
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "cookie"
content = "userid = xyz; expires =
Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
If you do not include the expiration date and time, the
cookie is considered a session cookie and will be
deleted when the user exits the browser.
Note − You can check PHP and Cookies tutorial for a
complete detail on Cookies.
Setting Author Name
You can set an author name in a web page using

meta tag. See an example below −
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta name = "author" content =
"Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Specify Character Set
You can use <meta> tag to specify character set used

within the webpage.
Example
By default, Web servers and Web browsers use ISO-

8859-1 (Latin1) encoding to process Web pages.
Following is an example to set UTF-8 encoding −
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta http-equiv = "Content-Type"
content = "text/html; charset = UTF-8"
/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
To serve the static page with traditional Chinese
characters, the webpage must contain a <meta> tag
to set Big5 encoding −
Live Demo
<!DOCTYPE html>
<html>
<head>
/>
<meta http-equiv = "Content-Type"
content = "text/html; charset = Big5"
/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML - Comments
Comment is a piece of code which is ignored by any web
browser. It is a good practice to add comments into your
HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone
looking at the code. Comments help you and others
understand your code and increases code readability.
HTML comments are placed in between  tags
will be treated as comment and will be completely
ignored by the browser.
Example
Live Demo
<!DOCTYPE html>
<html>
<head> 
<title>This is document
title</title>
</head>  tag. You
must also make sure that there are no spaces in the
start-of comment string.
Example
Here, the given comment is a valid comment and will

be wiped off by the browser.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment
Example</title>
</head>
<body>

here.....</p>
</body>
</html>
Object 26
But, following line is not a valid comment and will be

displayed by the browser. This is because there is a
space between the left angle bracket and the
exclamation mark.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment
Example</title>
</head>
<body>
< !-- This is not a valid
comment -->
here.....</p>
</body>
</html>
Object 27
Multiline Comments
So far we have seen single line comments, but HTML

supports multi-line comments as well.
You can comment multiple lines by the special
beginning tag  placed before
the first line and end of the last line as shown in the
given example below.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>


here.....</p>
</body>
</html>
Object 28
Conditional Comments
Conditional comments only work in Internet Explorer

(IE) on Windows but they are ignored by other
browsers. They are supported from Explorer 5
onwards, and you can use them to give conditional
instructions to different versions of IE.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Conditional
Comments</title>

</head>
<body>
here.....</p>
</body>
</html>
You will come across a situation where you will need
to apply a different style sheet based on different
versions of Internet Explorer, in such situation
conditional comments will be helpful.
Using Comment Tag
There are few browsers that support <comment> tag

to comment a part of HTML code.
Note − The <comment> tag deprecated in

HTML5. Do not use this element.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment>
Internet Explorer.</p>
</body>
</html>
If you are using IE, then it will produce following result
−
Object 29
But if you are not using IE, then it will produce

following result −
Object 30
Commenting Script Code
Though you will learn JavaScript with HTML, in a

separate tutorial, but here you must make a note that
if you are using Java Script or VB Script in your HTML
code then it is recommended to put that script code
inside proper HTML comments so that old browsers
can work properly.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script
Code</title>
<script>

</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
Object 31
Commenting Style Sheets
Though you will learn using style sheets with HTML in

a separate tutorial, but here you must make a note
that if you are using Cascading Style Sheet (CSS) in
your HTML code then it is recommended to put that
style sheet code inside proper HTML comments so
that old browsers can work properly.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style
Sheets</title>
<style>

</style>
</head>
<body>
<div class = "example">Hello ,
World!</div>
</body>
</html>
Object 32
HTML - Images
Images are very important to beautify as well as to
depict many complex concepts in simple way on your
web page. This tutorial will take you through simple
steps to use images in your web pages.
Insert Image
You can insert any image in your web page by

using <img> tag. Following is the simple syntax to use
this tag.
<img src = "Image URL" ... attributes-
list/>
The <img> tag is an empty tag, which means that, it
can contain only list of attributes and it has no closing
tag.
Example
To try following example, let's keep our HTML file

test.htm and image file test.png in the same directory
−
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Using Image in
Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src =
"/html/images/test.png" alt = "Test
Image" />
</body>
</html>
Object 33
You can use PNG, JPEG or GIF image file based on

your comfort but make sure you specify correct image
file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which
specifies an alternate text for an image, if the image
cannot be displayed.
Set Image Location
Usually we keep all the images in a separate

directory. So let's keep HTML file test.htm in our home
directory and create a subdirectory images inside the
home directory where we will keep our image
test.png.
Example
Assuming our image location is "image/test.png", try

the following example −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Using Image in
Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src =
Image" />
</body>
</html>
Object 34
Set Image Width/Height
You can set image width and height based on your

requirement using width and height attributes. You
can specify width and height of the image in terms of
either pixels or percentage of its actual size.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and
Height</title>
</head>
<body>
<p>Setting image width and
height</p>
<img src =
Image" width = "150" height = "100"/>
</body>
</html>
Object 35
Set Image Border
By default, image will have a border around it, you can

specify border thickness in terms of pixels using
border attribute. A thickness of 0 means, no border
around the picture.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src =
Image" border = "3"/>
</body>
</html>
Object 36
Set Image Alignment
By default, image will align at the left side of the page,

but you can use align attribute to set it in the center or
right.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Set Image
Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src =
Image" border = "3" align = "right"/>
</body>
</html>
HTML - Tables
The HTML tables allow web authors to arrange data
like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in
which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The
elements under <td> are regular and left aligned by
default
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Object 37
Here, the border is an attribute of <table> tag and it is

used to put a border across all the cells. If you do not
need a border, then you can use border = "0".
Table Heading
Table heading can be defined using <th> tag. This tag

will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your
top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings,
which are defined in <th> tag are centered and bold
by default.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Object 38
Cellpadding and Cellspacing Attributes
There are two attributes

called cellpadding and cellspacing which you will use
to adjust the white space in your table cells. The
cellspacing attribute defines space between table
cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table
Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding =
"5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Object 39
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge

two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or
more rows.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table
Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1
Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3
Cell 1</td>
</tr>
</table>
</body>
</html>
Object 40
Tables Backgrounds
You can set table background using one of the

following two ways −
•bgcolor attribute − You can set background color
for whole table or just for one cell.
•background attribute − You can set background
image for whole table or just for one cell.
You can also set border color also
using bordercolor attribute.
Note − The bgcolor, background,
and bordercolor attributes deprecated in
HTML5. Do not use these attributes.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table
Background</title>
</head>
<body>
<table border = "1" bordercolor =
"green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
Cell 1</td>
</tr>
<tr>
</tr>
<tr>
Cell 1</td>
</tr>
</table>
</body>
</html>
Object 41
Here is an example of using background attribute.

Here we will use an image available in /images
directory.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table
Background</title>
</head>
<body>
<table border = "1" bordercolor =
"green" background =
"/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
Cell 1</td>
<td>Row 1 Cell
2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
</tr>
<tr>
Cell 1</td>
</tr>
</table>
</body>
</html>
This will produce the following result. Here
background image did not apply to table's header.
Object 42
Table Height and Width
You can set a table width and height

using width and height attributes. You can specify
table width or height in terms of pixels or in terms of
percentage of available screen area.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table
Width/Height</title>
</head>
<body>
<table border = "1" width = "400"
height = "150">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Object 43
Table Caption
The caption tag will serve as a title or explanation for

the table and it shows up at the top of the table. This
tag is deprecated in newer version of HTML/XHTML.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width =
"100%">
<caption>This is the
caption</caption>
<tr>
<td>row 1, column
1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column
1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
Object 44
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a

body, and a foot. The head and foot are rather similar
to headers and footers in a word-processed document
that remain the same for every page, while the body is
the main content holder of the table.
The three elements for separating the head, body, and
foot of a table are −
•<thead> − to create a separate table header.
•<tbody> − to indicate the main body of the table.
•<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to
indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear
before <tbody>
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
"100%">
<thead>
<tr>
<td colspan = "4">This
is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This
is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Object 45
Nested Tables
You can use one table inside another table. Not only
tables you can use almost all the tags inside table
data tag <td>.
Example
Following is the example of using another table and

other tags inside a table cell.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
"100%">
<tr>
<td>
<table border = "1"
width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh
Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir
Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Object 46
HTML - Lists
HTML offers web authors three ways for specifying
lists of information. All lists must contain one or more
list elements. Lists may contain −
•<ul> − An unordered list. This will list items using
plain bullets.
•<ol> − An ordered list. This will use different
schemes of numbers to list your items.
•<dl> − A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that

have no special order or sequence. This list is created
by using HTML <ul> tag. Each item in the list is
marked with a bullet.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 47
The type Attribute
You can use type attribute for <ul> tag to specify the

type of bullet you like. By default, it is a disc. Following
are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following is an example where we used <ul type =

"square">
Live Demo
<!DOCTYPE html>
<html>
<head>
List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 48
Example

"disc"> −
Live Demo
<!DOCTYPE html>
<html>
<head>
List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 49
Example

"circle"> −
Live Demo
<!DOCTYPE html>
<html>
<head>
List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Object 50
HTML Ordered Lists
If you are required to put your items in a numbered list

instead of bulleted, then HTML ordered list will be
used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for
each successive ordered list element tagged with <li>.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 51
The type Attribute
You can use type attribute for <ol> tag to specify the

type of numbering you like. By default, it is a number.
Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type =

"1">
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 52
Example

"I">
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 53
Example

"i">
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 54
Example
Following is an example where we used <ol type = "A"

>
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 55
Example

"a">
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 56
The start Attribute
You can use start attribute for <ol> tag to specify the

starting point of numbering you need. Following are
the possible options −
<ol type = "1" start = "4"> -
Numerals starts with 4.
<ol type = "I" start = "4"> -
Numerals starts with IV.
<ol type = "i" start = "4"> -
Numerals starts with iv.
<ol type = "a" start = "4"> - Letters
starts with d.
<ol type = "A" start = "4"> - Letters
starts with D.
Example
Following is an example where we used <ol type = "i"

start = "4" >
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Object 57
HTML Definition Lists
HTML and XHTML supports a list style which is

called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other
name/value list.
Definition List makes use of following three tags.
•<dl> − Defines the start of the list
•<dt> − A term
•<dd> − Term definition
•</dl> − Defines the end of the list
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition
List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text
Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text
Transfer Protocol</dd>
</dl>
</body>
</html>
Object 58
HTML - Text Links
A webpage can contain various links that take you directly
to other pages and even specific parts of a given page.
These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web
sites by clicking on words, phrases, and images. Thus
you can create hyperlinks using text or images
available on a webpage.
Note − I recommend you to go through a short tutorial
on Understanding URL
Linking Documents
A link is specified using HTML tag <a>. This tag is

called anchor tag and anything between the opening
<a> tag and the closing </a> tag becomes part of the
link and a user can click that part to reach to the
linked document. Following is the simple syntax to use
<a> tag.
<a href = "Document URL" ... attributes-
list>Link Text</a>
Example
Let's try following example which links

http://www.tutorialspoint.com at your page −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href =
"https://www.tutorialspoint.com" target
= "_self">Tutorials Point</a>
</body>
</html>
This will produce the following result, where you can
click on the link generated to reach to the home page
of Tutorials Point (in this example).
Object 59
The target Attribute
We have used target attribute in our previous

example. This attribute is used to specify the location
where linked document is opened. Following are the
possible options −
Sr
.N Option & Description
o
_blank
1 Opens the linked document in a

new window or tab.
_self
2 Opens the linked document in the

same frame.
_parent
3 Opens the linked document in the

parent frame.
4 _top
Opens the linked document in the
full body of the window.
targetframe
5 Opens the linked document in a

named targetframe.
Example
Try following example to understand basic difference

in few options given for target attribute.
Live Demo
<!DOCTYPE html>
<html>
<head>
<base href =
"https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following
links</p>
<a href = "/html/index.htm"
target = "_blank">Opens in New</a> |
target = "_self">Opens in Self</a> |
target = "_parent">Opens in Parent</a>
|
target = "_top">Opens in Body</a>
</body>
</html>
click on different links to understand the difference
between various options given for target attribute.
Object 60
Use of Base Path
When you link HTML documents related to the same

website, it is not required to give a complete URL for
every link. You can get rid of it if you use <base> tag
in your HTML document header. This tag is used to
give a base path for all the links. So your browser will
concatenate given relative path to this base path and
will make a complete URL.
Example
Following example makes use of <base> tag to

specify base URL and later we can use relative path
to all the links instead of giving complete URL for
every link.
Live Demo
<!DOCTYPE html>
<html>
<head>
<base href =
</head>
<body>
target = "_blank">HTML Tutorial</a>
</body>
</html>
click on the link generated HTML Tutorial to reach to
the HTML tutorial.
Now given URL <a href = "/html/index.htm" is being
considered as <ahref =
"http://www.tutorialspoint.com/html/index.htm"
Object 61
Linking to a Page Section
You can create a link to a particular section of a given

webpage by using name attribute. This is a two-step
process.
Note − The name attribute deprecated in

HTML5. Do not use this attribute.
Use id and title attribute instead.
First create a link to the place where you want to
reach with-in a webpage and name it using <a...> tag
as follows −
<h1>HTML Text Links <a name =
"top"></a></h1>
Second step is to create a hyperlink to link the
document and place where you want to reach −
<a href =
"/html/html_text_links.htm#top">Go to
the Top</a>
This will produce following link, where you can click on
the link generated Go to the Top to reach to the top
of the HTML Text Link tutorial.
Go to the Top
Setting Link Colors
You can set colors of your links, active links and

visited links using link, alink and vlink attributes of
<body> tag.
Example
Save the following in test.htm and open it in any web

browser to see how link, alink and vlink attributes
work.
Live Demo
<!DOCTYPE html>
<html>
<head>
<base href =
</head>
<body alink = "#54A250" link =

"#040404" vlink = "#F40633">
target = "_blank" >HTML Tutorial</a>
</body>
</html>
This will produce the following result. Just check color
of the link before clicking on it, next check its color
when you activate it and when the link has been
visited.
Object 62
Download Links
You can create text link to make your PDF, or DOC or

ZIP files downloadable. This is very simple; you just
need to give complete URL of the downloadable file
as follows −
Live Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href =
"https://www.tutorialspoint.com/page.pd
f">Download PDF File</a>
</body>
</html>
This will produce following link and will be used to
download a file.
Object 63
File Download Dialog Box
Sometimes it is desired that you want to give an

option where a user will click a link and it will pop up a
"File Download" box to the user instead of displaying
actual content. This is very easy and can be achieved
using an HTTP header in your HTTP response.
For example, if you want make a Filename file
downloadable from a given link then its syntax will be
as follows.
#!/usr/bin/perl
# Additional HTTP Header

print "Content-Type:application/octet-
stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment;
filename = \"FileName\"\r\n\n";
# Open the target file and list down its

content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){

print("$buffer");
}
HTML - Image Links
We have seen how to create hypertext link using text and we
also learnt how to use images in our webpages. Now, we
will learn how to use images to create hyperlinks.
Example
It's simple to use an image as hyperlink. We just need

to use an image inside hyperlink at the place of text as
shown below −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink
Example</title>
</head>
<body>
<a href =
"https://www.tutorialspoint.com" target
= "_self">
<img src = "/images/logo.png"
alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
HTML - Email Links

It is not difficult to put an HTML email link on your
webpage but it can cause unnecessary spamming problem
for your email account. There are people, who can run
programs to harvest these types of emails and later use
them for spamming in various ways.
You can have another option to facilitate people to
send you emails. One option could be to use HTML
forms to collect user data and then use PHP or CGI
script to send an email.
A simple example, check our Contact Us Form. We
take user feedback using this form and then we are
using one CGI program which is collecting this
information and sending us email to the one given
email ID.
Note − You will learn about HTML Forms in HTML
Forms and you will learn about CGI in our another
tutorial Perl CGI Programming.
HTML Email Tag
HTML <a> tag provides you option to specify an email

address to send an email. While using <a> tag as an
email tag, you will use mailto: email address along
with href attribute. Following is the syntax of
using mailto instead of using http.
<a href = "mailto: [email protected]">Send
Email</a>
This code will generate the following link which you
can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email
Client (like Lotus Notes, Outlook Express etc. )
installed on your user's computer. There is another
risk to use this option to send email because if user do
not have email client installed on their computer then
it would not be possible to send email.
Default Settings
You can specify a default email subject and email

body along with your email address. Following is the
example to use default subject and body.
<a href = "mailto:[email protected]?
subject = Feedback&body = Message">
Send Feedback
</a>
HTML - Frames
HTML frames are used to divide your browser window into
multiple sections where each section can load a separate
HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into
frames in a similar way the tables are organized: into rows
and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's

never recommended to use frames in your webpages
−
•Some smaller devices cannot cope with frames
often because their screen is not big enough to be
divided up.
•Sometimes your page will be displayed differently
on different computers due to different screen
resolution.
•The browser's back button might not work as the
user hopes.
•There are still few browsers that do not support
frame technology.
Creating Frames
To use frames on a page we use <frameset> tag

instead of <body> tag. The <frameset> tag defines,
how to divide the window into frames.
The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the
frame.
Note − The <frame> tag deprecated in

HTML5. Do not use this element.
Example
Following is the example to create three horizontal

frames −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src =
"/html/top_frame.htm" />
<frame name = "main" src =
"/html/main_frame.htm" />
<frame name = "bottom" src =
"/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not
support frames.</body>
</noframes>
</frameset>
</html>
Object 64
Example
Let's put the above example as follows, here we

replaced rows attribute by cols and changed their
width. This will create all the three frames vertically −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">

<frame name = "left" src =
"/html/top_frame.htm" />
<frame name = "center" src =
"/html/main_frame.htm" />
<frame name = "right" src =
"/html/bottom_frame.htm" />
<noframes>
</noframes>
</frameset>
</html>
Object 65
The <frameset> Tag Attributes
Following are important attributes of the <frameset>

tag −
Sr
o
1 cols
Specifies how many columns are contained in

the frameset and the size of each column. You
can specify the width of each column in one of
the four ways −
Absolute values in pixels. For example, to create

three vertical frames, use cols = "100, 500, 100".
A percentage of the browser window. For

example, to create three vertical frames,
use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create

three vertical frames, use cols = "10%, *, 10%".
In this case wildcard takes remainder of the
window.
As relative widths of the browser window. For

example, to create three vertical frames,
use cols = "3*, 2*, 1*". This is an alternative to
percentages. You can use relative widths of the
browser window. Here the window is divided into
sixths: the first column takes up half of the
window, the second takes one third, and the third
takes one sixth.
rows
This attribute works just like the cols attribute

and takes the same values, but it is used to
2 specify the rows in the frameset. For example, to
create two horizontal frames, use rows = "10%,
90%". You can specify the height of each row in
the same way as explained above for columns.
3 border
This attribute specifies the width of the border of

each frame in pixels. For example, border = "5".
A value of zero means no border.
frameborder
This attribute specifies whether a three-

dimensional border should be displayed between
4
frames. This attribute takes value either 1 (yes)
or 0 (no). For example frameborder = "0"
specifies no border.
framespacing
This attribute specifies the amount of space

between frames in a frameset. This can take any
5
integer value. For example framespacing = "10"
means there should be 10 pixels spacing
between each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag

−
Sr Attribute & Description
.N
o
src
This attribute is used to give the file name that

should be loaded in the frame. Its value can be
1
any URL. For example, src =
"/html/top_frame.htm" will load an HTML file
available in html directory.
name
This attribute allows you to give a name to a

frame. It is used to indicate which frame a
document should be loaded into. This is
2 especially important when you want to create
links in one frame that load pages into an
another frame, in which case the second frame
needs a name to identify itself as the target of
the link.
3 frameborder
This attribute specifies whether or not the

borders of that frame are shown; it overrides the
value given in the frameborder attribute on the
<frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).
marginwidth
This attribute allows you to specify the width of

the space between the left and right of the
4
frame's borders and the frame's content. The
value is given in pixels. For example marginwidth
= "10".
marginheight
This attribute allows you to specify the height of

5 the space between the top and bottom of the
frame's borders and its contents. The value is
given in pixels. For example marginheight = "10".
6 noresize
By default, you can resize any frame by clicking

and dragging on the borders of a frame. The
noresize attribute prevents a user from being
able to resize the frame. For example noresize =
"noresize".
scrolling
This attribute controls the appearance of the

scrollbars that appear on the frame. This takes
7
values either "yes", "no" or "auto". For example
scrolling = "no" means it should not have scroll
bars.
longdesc
This attribute allows you to provide a link to

8 another page containing a long description of the
contents of the frame. For example longdesc =
"framedescription.htm"
Browser Support for Frames
If a user is using any old browser or any browser,

which does not support frames then <noframes>
element should be displayed to the user.
So you must place a <body> element inside the
<noframes> element because the <frameset> element
is supposed to replace the <body> element, but if a
browser does not understand <frameset> element
then it should understand what is inside the <body>
element which is contained in a <noframes> element.
You can put some nice message for your user having
old browsers. For example, Sorry!! your browser does
not support frames. as shown in the above example.
Frame's name and target attributes
One of the most popular uses of frames is to place

navigation bars in one frame and then load main
pages into a separate frame.
Let's see following example where a test.htm file has
following code −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm"
name = "menu_page" />
<frame src = "/html/main.htm"
name = "main_page" />
<noframes>
</noframes>
</frameset>
</html>
Here, we have created two columns to fill with two
frames. The first frame is 200 pixels wide and will
contain the navigation menu bar implemented
by menu.htm file. The second column fills in
remaining space and will contain the main part of the
page and it is implemented by main.htm file. For all
the three links available in menu bar, we have
mentioned target frame as main_page, so whenever
you click any of the links in menu bar, available link
will open in main page.
Following is the content of menu.htm file
Live Demo
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">

<a href = "http://www.google.com"
target = "main_page">Google</a>
<br />
<br />
<a href =
"http://www.microsoft.com" target =
"main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk"

target = "main_page">BBC News</a>
</body>
</html>
Following is the content of main.htm file −
Live Demo
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content
from any link will be displayed
here.</h3>
<p>So now click any link and see
the result.</p>
</body>
</html>
When we load test.htm file, it produces following
result −
Object 66
Now you can try to click links available in the left panel
and see the result. The targetattribute can also take
one of the following values −
Sr
.N Option & Description
o
_self
1
Loads the page into the current frame.
_blank
2 Loads a page into a new browser window.

Opening a new window.
_parent
Loads the page into the parent window, which in

3
the case of a single frameset is the main browser
window.
_top
4 Loads the page into the browser window,

replacing any current frames.
targetframe
5
Loads the page into a named targetframe.
HTML - Iframes
ou can define an inline frame with HTML tag <iframe>.
The <iframe> tag is not somehow related to <frameset>
tag, instead, it can appear anywhere in your document. The
<iframe> tag defines a rectangular region within the
document in which the browser can display a separate
document, including scrollbars and borders. An inline
frame is used to embed another document within the
current HTML document.
The src attribute is used to specify the URL of the
document that occupies the inline frame.
Example
Following is the example to show how to use the

<iframe> −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
here...</p>
<iframe src = "/html/menu.htm"

width = "555" height = "200">
Sorry your browser does not
support inline frames.
</iframe>
<p>Document content also go

here...</p>
</body>
</html>
Object 67
The <Iframe> Tag Attributes
Most of the attributes of the <iframe> tag,

including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling,
style, and title behave exactly like the corresponding
attributes for the <frame> tag.
Note −
The frameborder, marginwidth, longdesc, scr
olling, marginheight attributes deprecated in
HTML5. Do not use these attributes.
Sr
o
src
This attribute is used to give the file name that

should be loaded in the frame. Its value can be
1
any URL. For example, src =
"/html/top_frame.htm" will load an HTML file
available in html directory.
2 name
This attribute allows you to give a name to a
frame. It is used to indicate which frame a
document should be loaded into. This is
especially important when you want to create
links in one frame that load pages into an
another frame, in which case the second frame
needs a name to identify itself as the target of
the link.
frameborder
This attribute specifies whether or not the

borders of that frame are shown; it overrides the
3
value given in the frameborder attribute on the
<frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).
4 marginwidth
This attribute allows you to specify the width of

the space between the left and right of the
frame's borders and the frame's content. The
value is given in pixels. For example marginwidth
= "10".
marginheight
This attribute allows you to specify the height of

5 the space between the top and bottom of the
frame's borders and its contents. The value is
given in pixels. For example marginheight = "10".
height
6
This attribute specifies the height of <iframe>.
scrolling
This attribute controls the appearance of the

scrollbars that appear on the frame. This takes
7
values either "yes", "no" or "auto". For example
scrolling = "no" means it should not have scroll
bars.
8 longdesc
This attribute allows you to provide a link to

another page containing a long description of the
contents of the frame. For example longdesc =
"framedescription.htm"
width
9
This attribute specifies the width of <iframe>.
HTML - Blocks
All the HTML elements can be categorized into two
categories (a) Block Level Elements (b)Inline Elements.
Block Elements
Block elements appear on the screen as if they have a

line break before and after them. For example, the
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>,
<dl>, <pre>, <hr />, <blockquote>, and <address>
elements are all block level elements. They all start on
their own new line, and anything that follows them
appears on its own new line.
Inline Elements
Inline elements, on the other hand, can appear within

sentences and do not have to appear on a new line of
their own. The <b>, <i>, <u>, <em>, <strong>, <sup>,
<sub>, <big>, <small>, <li>, <ins>, <del>, <code>,
<cite>, <dfn>, <kbd>, and <var> elements are all
inline elements.
Grouping HTML Elements
There are two important tags which we use very

frequently to group various other HTML tags (i) <div>
tag and (ii) <span> tag
The <div> tag
This is the very important block level tag which plays a

big role in grouping various other HTML tags and
applying CSS on group of elements. Even now <div>
tag can be used to create webpage layout where we
define different parts (Left, Right, Top etc.) of the page
using <div> tag. This tag does not provide any visual
change on the block but this has more meaning when
it is used with CSS.
Example
Following is a simple example of <div> tag. We will

learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of
<div> tag −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of
vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>


<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of
fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
Object 68
The <span> tag
The HTML <span> is an inline element and it can be

used to group inline-elements in an HTML document.
This tag also does not provide any visual change on
the block but has more meaning when it is used with
CSS.
The difference between the <span> tag and the <div>
tag is that the <span> tag is used with inline elements
whereas the <div> tag is used with block-level
elements.
Example
Following is a simple example of <span> tag. We will

learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of
<span> tag −
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style =
"color:red">red</span> and this is
<span style =
"color:green">green</span></p>
</body>
</html>
This is red and this is green

Star T Tag Content End Tag: HTML - Elements

Uploaded by

Copyright:

Available Formats

Star T Tag Content End Tag: HTML - Elements

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Star T Tag Content End Tag: HTML - Elements

Uploaded by

Copyright:

Available Formats

HTML – Elements

An HTML element is defined by a starting tag. If the

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the

Nested HTML Elements

It is very much allowed to keep one HTML element

This will display the following result −

This is italic heading

We have seen few HTML tags and their usage like

This will display the following result −

The id attribute of an HTML tag can be used to

The title Attribute

The title attribute gives a suggested title for the

The class Attribute

The class attribute is used to associate an element

The style Attribute

The style attribute allows you to specify Cascading

At this point of time, we are not learning CSS, so just

There are three internationalization attributes, which

The dir attribute allows you to indicate to the browser

ltr Left to right (the default value)

Right to left (for languages such as Hebrew or

When dir attribute is used within the <html> tag, it

The lang Attribute

The lang attribute allows you to indicate the main

The xml:lang attribute is the XHTML replacement for

Here's a table of some other attributes that are readily

align right, left, center Horizontally aligns tags

top, middle, Vertically aligns tags within an

backg Places a background image

id User Defined Names an element for use with

Classifies an element for use

Specifies the width of tables,

Specifies the height of tables,

title User Defined "Pop-up" title of the elements.

If you use a word processor, you must be familiar with

Anything that appears within<b>...</b>element, is

Anything that appears within <i>...</i> element is

Anything that appears within <u>...</u> element, is

Anything that appears

The content of a <tt>...</tt> element is written in

The content of a <sup>...</sup> element is written in

The content of a <sub>...</sub> element is written in

Anything that appears within <ins>...</ins> element is

Anything that appears within <del>...</del> element,

The content of the <big>...</big> element is

The content of the <small>...</small> element is

The <div> and <span> elements allow you to group

<div id = "content" align =

The <span> element, on the other hand, can be used

These tags are commonly used with CSS to allow you

HTML - Phrase Tags

The phrase tags have been desicolgned for specific

Anything that appears within <em>...</em> element is

Anything that appears with-

Anything that appears

You can abbreviate a text by putting it inside opening

The <acronym> element allows you to indicate that