UNIT-II

HTML: Elements, Tags and basic structure of HTML files, Basic and advanced text formatting,
multimedia Components in HTML documents, Designing of webpage: Document Layout, List,
Tables. Hyperlink, Working with Frames, Forms and Controls.

1. HTML
HTML, or Hypertext Markup Language, is a standard markup language used to create and structure content
on the web. It consists of a set of elements, each represented by tags, which define the different parts and
types of content within a web page. HTML provides a framework for organizing text, images, links, forms,
and multimedia elements, allowing browsers to interpret and display web content consistently.

1.1 Purpose of HTML:

The primary purpose of HTML is to facilitate the creation and structuring of documents on the World Wide
Web. HTML enables web developers to define the content and layout of a webpage, specifying how
information should be presented and how users interact with it. Key purposes of HTML include:
Document Structure: HTML defines the overall structure of a document, outlining the various sections such
as headers, paragraphs, lists, and footers. This structure is essential for organizing and presenting information
in a logical manner.
Hyperlinking: HTML includes tags that create hyperlinks, allowing users to navigate between different web
pages and resources. Hyperlinks are fundamental for building interconnected websites and providing a
seamless browsing experience.
Content Presentation: HTML tags are used to format and present content. Text can be styled, images
embedded, and multimedia elements included, enhancing the visual appeal of web pages.
Forms and User Input: HTML includes form elements that enable the collection of user input through text
fields, checkboxes, radio buttons, and other form controls. This functionality is crucial for interactive features
like user registration, search boxes, and feedback forms.
Compatibility: HTML ensures cross-browser compatibility, meaning that web pages coded in HTML should
render consistently across different browsers. This standardization is vital for delivering a uniform user
experience regardless of the user's choice of browser.
Accessibility: HTML supports semantic elements and attributes that enhance the accessibility of web
content. Screen readers and other assistive technologies use HTML to interpret and present content in a
meaningful way for users with disabilities.
Integration with CSS and JavaScript: HTML works in conjunction with Cascading Style Sheets (CSS)
and JavaScript to enhance the presentation and interactivity of web pages. CSS is used for styling, while
JavaScript adds dynamic behavior and functionality.
Evolution with HTML5: HTML continues to evolve, with HTML5 introducing new features and
improvements. This includes native support for audio and video, canvas for graphics, and semantic elements
for better document structure.

Hypertext Markup Language (HTML) uses a markup system composed of elements which represent
specific content. Markup means that with HTML you declare what is presented to a viewer, not how
it is presented. HTML is sometimes called a programming language but it has no logic, so is a
markup language. HTML tags provide semantic meaning and machine-readability to the content in
the page.
HTML programs are generally written using any text editor e.g. Notepad, saved with .html extension
and viewed using any web browser like Google chrome. Unlike any programming language, HTML
has no compiler or interpreter so no syntax or semantic errors are generated. HTML programs when
viewed using any Web browser, browser display the content which is rightly written and ignore the
rest. It is the job of the programmer to interpret the output and identify and correct any mistakes.
HTML programs are not bound by any format structure and one can write the HTML program from
any line/column. It does not recognize any white space characters (blanks, tabs, new line
characters). Also, its not case sensitive too.

1.3 HTML Basics

The HTML basics include the following:
1. Elements
2. Tag
3. Attributes
1.3.1 HTML Element
An HTML element usually consists of an opening tag (<element_name>), a closing tag
(</element_name>), which contain the element's name surrounded by angle brackets, and the
content in between:

<element_name>...content...</element_name>

It represents a complete, self-contained unit within an HTML document. Elements can be as

simple as a standalone tag (e.g., <br> for a line break) or more complex with nested content (e.g.,
<div> for a division with inner content).

<!-- Simple element with a standalone tag -->

<br>

<!-- Complex element with opening and closing tags and nested content -->
<div>
<p>This is a paragraph inside a division.</p>
</div>

In the example above, <br> is a simple element represented by a single tag, while <div> is a more
complex element with an opening tag <div> and a closing tag </div> that encloses the paragraph
content.
A HTML page may consist of potentially hundreds of elements which are then read by a web
browser, interpreted and rendered into human readable or audible content on the screen.
All the web pages will have at least the following base elements: html, head, title and body.

1.3.2 HTML Tag

An HTML tag is a fundamental component of HTML markup. Tags are used to define elements in
HTML documents. Tags are represented by an angle bracket (‘<’ and ‘>’). They come in pairs: an
opening tag and a closing tag, with the tag named enclosed in the angle brackets. Examples of
tags: <p> paragraph, <a> anchor/link, <h1>.

<p>This is a paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
<h1>Main Heading</h1>

There are two types of tags:

• Container tag
• Empty tag

A Container tag always wraps around text or contents and come with opening and a closing tag.
These tags are also called the paired tags, the first tag is referred to as Opening Tag and the
second tag is referred to as Closing Tag.

<BODY>
Content
</BODY>

<BODY> is the opening tag and </body> is the closing tag. The forward clash (‘/’) informs to the
browser that the tag has ended. The content between the opening and closing tag is the element or
the content of the web page that works according to the opening tag. Because of the element and
the resulting closing tag, this type of tag is called the container tag. For example:
<TITLE> contains the title of the web page </TITLE>
<BODY> contains the content of the web page </BODY>

The Empty tag does not have closing tag. For example:
<BR> Insert a line break
<HR> Insert a solid line

<BR>
<HR>

1.3.3 HTML Attributes

The attributes are used to personalize tags. Attributes provide additional information about n
element. They are always specified in the start tag. They come in name-value pairs like: name =
“value”. These attributes are used when you want to resize an image or a table or want to change
the color of the text. All these are possible with the help of the attributes. For example:

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<a href = “https://www.google.com”> This is a link</a>

Creating a simple page

The following HTML example creates a simple "Hello World" web page.

<html>
<head>
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>

Simple page break down

All HTML documents are divided into two main parts:

The head
The body

These are the tags used in the example:

Tag Meaning
<html> Opens the page. No markup should come after the closing tag (</html>)
<head> Opens the head section, which does not appear in the main browser
window but mainly contains information about the HTML document,
called metadata. It can also contain imports from external stylesheets and
scripts. The closing tag is </head>.
<title> The title of the page. Text written between this opening and the closing
tag (</title>) will be displayed on the tab of the page or in the title bar of
the browser.
<body> Opens the part of the document displayed to users, i.e. all the visible or
audible content of a page. No content should be added after the closing
tag </body>.
<h1> A level 1 heading for the page.
<p> Represents a common paragraph of text.

Output of Hello World Program (As seen in Google Chrome Browser):

Note: <html>, <head>, <title> and <body> tags are necessary tags for any HTML document and
are also known as Document Tags.
1.4 HTML Headings
HTML provides six separate header tags to indicate headings of various sizes and thickness.
Enumerated as heading 1 through heading 6, heading 1 has the largest and thickest text while
heading 6 is the smallest and thinnest. These are container tags.
Headings can be used to describe the topic they precede and they are defined with the <h1> to <h6>
tags. So, <h1> is used for most important heading and <h6> is used for least important.
Defining a heading:

<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Output:

Importance of Heading:
 • Search Engines use headings for indexing the structure and organizing the content of the
webpage.
• Headings are used for highlighting important topics.
• They provide valuable information and tell us about the structure of the document.

1.5 HTML Paragraphs

The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So anything
mentioned within <p> and </p> is treated as a paragraph. A paragraph is a block-level element so a
new paragraph always begins on a new line, and browsers naturally put some space before and after
a paragraph to make it look neat and easy to read.
Syntax:
<p> Content </p>
Properties of the paragraph tag:
The <p> tag automatically adds space before and after any paragraph, which is basically margins
added by the browser.
If a user adds multiple spaces, the browser reduces them to a single space.
If a user adds multiple lines, the browser reduces them to single line.
The display of the paragraph element is set to “block” which means if you add another paragraph
to the webpage the next paragraph will be inserted in the next line on the webpage.
Sample Program:

<html>
<head></head>
<body>
<h2>Welcome To HTML Programming</h2>
<!-- Use of <p> tag -->
<p>Learn HTML Programming to create web pages.</p>
<p>It contains well written, well thought articles.</p>
<p>
This paragraph has multiple lines.
But HTML reduces them to a single line,
omitting the carriage return we have used.
</p>
<p>
This paragraph has multiple spaces.
But HTML reduces them to a single line,
omitting the extra spaces and line have used.
</p>
</body>
</html>
Output:

Note: <!-- --> is a comment tag used by programmer for documentation purpose. It will not be
displayed in the output.
Attributes: align
align attribute is used to specify the alignment of paragraph text content. The align attribute in <p>
aligns text horizontally.
Syntax: <p align=” left | right | center | justify”>
Attributes Values Description
left It sets the text left-align. It is default value.
right It sets the text right-align.
center It sets the text center-align.
justify It stretch the text of paragraph to set the width of all lines
equal.
Sample Program:

<html>
<head>
<title> HTML p align Attribute </title>
</head>
<body>
<h1>
<p> <!—Without Justify attribute-->
HTML (HyperText Markup Language) is the code that is used to structure a web page
and its content. For example, content could be structured within a set of paragraphs, a list
of bulleted points, or using images and data tables.
</p>
<p align="justify"> > <!—With Justify attribute-->
HTML (HyperText Markup Language) is the code that is used to structure a web page
and its content. For example, content could be structured within a set of paragraphs, a list
of bulleted points, or using images and data tables.
</p>
</h1>
<h2>
HTML p align Attribute
</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html>
Note: Notice the difference in layout of text with and without justify attribute with <p> tag.

1.6 <BR> tag

The HTML <br> tag element creates a line break, giving you a new line without starting a new
paragraph. Use ‘<br>’ when you want to move to the next line without beginning a whole new
paragraph. <br> tag is an empty tag.
Syntax: <br>
Sample Program:
 <html>
<head></head>
<body>
<p>
This paragraph has multiple
<br>lines. But HTML reduces them
<br>to a single line, omitting
<br>the carriage return we have used.
</p>
</body>
</html>

Output:

1.7 <HR tag>

The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic
break in an HTML page to divide or separate document sections. The <hr> tag is an empty tag, and
it does not require an end tag.
Syntax: <hr>
Attributes:
The table given below describes the <hr> tag attributes.
Attribute Value Description
align left Used to specify the alignment of the
center horizontal rule.
right
noshade noshade Used to specify the bar without shading
effect.
size Pixels or %age of browser Used to specify the height of the
window size horizontal rule.
width Pixels or %age of browser Used to specify the width of the
window size horizontal rule.
Color color name Used to specify the color of the horizontal
rule.

Sample Program:

<html>
<body>
<p>
There is a horizontal rule below this paragraph.
</p>
<!--HTML hr tag is used here-->
<hr>
<p>
This is a horizontal rule above this paragraph.
</p>
</body>
</html>

Output:
Sample Program:

<html>
<body>
<p>
Normal horizontal line.
</p>
<!--HTML hr tag is used here-->
<hr>
<p>
Horizontal line with height of 30 pixels
</p>
<hr size="30">
<p>
Horizontal line with height of 30 pixels, red color and
noshade.
</p>
<hr size="30" noshade color="red">
</body>
</html>

Output:
Sample Program:

<html>
<body>
<p>
Horizontal line with width of 100 pixels and size of 5 pixels.
</p>
<hr width="100" size="5">
<p>
Horizontal line with width 50% and size of 5 pixels.
</p>
<hr width="50%" size="5">
</body>
</html>

Output:

Note: width of line will be fixed when specified with pixels whereas it will be relative to browser
window size when specified in percentage.

1.8 <FONT> tag

The HTML <font> tag plays an important role in the web page to create an attractive and readable
web page. The font tag is used to change the color, size and style of a text. The base font tag is used
to set all the text to the same size, color and face.
Syntax: <font attribute = “value”> content </font>
Attributes:
Attribute Value Description
size 1 to 7 To adjust the size of the text
Default value is 3

type Any font available in the system To set the font style
color color name To set the text color

Sample Program:
 <html>
<body>
<!--HTML font size tag starts here-->
<font size="1">HTML Programming!</font><br>
<font size="2">HTML Programming!</font><br>
<font size="3">HTML Programming!</font><br>
<font size="4">HTML Programming!</font><br>
<font size="5">HTML Programming!</font><br>
<font size="6">HTML Programming!</font><br>
<font size="7">HTML Programming!</font>
<!--HTML font size tag ends here-->
</body>
</html>

Output

Sample Program:

<html>
<body>
<font face="Times New Roman" size="6" color="red">
HTML Programming!!!
</font> <br>
<font face="Verdana" size="5" color="blue">
HTML Programming!!!
</font><br>
<font face="Comic sans MS" size=" 6" color="green">
HTML Programming!!!
</font><br>
</body>
</html>
Output:
1.9 Formatting Tags
There are two types of Tags:

• Physical Tags
• Logical Tags

1.9.1 Physical Tags

Physical tags are used to indicate that how specific characters are to be formatted or indicated using
HTML tags. Any physical style tag may contain any item allowed in text, including conventional
text, images, line breaks, etc. All physical tags require ending tags.
Syntax: <tag name> Content </tag name>
Features:
• They are extremely straightforward.
• They are used to highlight important sentences.
• Physical Text Styles indicate the specific type of appearance for a section e.g., bold, italics,
etc.
• Physical Styles are rendered in the same manner by all browsers.
Examples:
Tags Meaning Purpose
<b> Bold Bold increases the importance of the text because bold tag convert
the text into bold size.
<i> Italic An italic tag is used to define a text with a special meaning.
<u> Underline It is used to underline the text.
<big> Big Big tag increases the font size by 1
<small> Small Small tag decreases the font size by 1.
<sub> Subscript The subscript is used for showing elements below baseline.
<sup> Superscript The superscript is used for showing elements above baseline.
<strike> Strikethrough It is an editing markup that tells the reader to ignore the text
passage.
<tt> Teletype text Teletype text gives the default font-family which is monospace.

Sample Program:
 <html>
<head>
<title>Physical Tags</title>
</head>
<body>
<h1> Physical Tags </h1>
Text without any formatting <br>
<b> HTML- This is Bold text </b> <br>
<big> HTML- This is BIG text </big> <br>
<i> HTML- This is Italic text </i> <br>
<small> HTML- This is Small text </small> <br>
1^st <br>
H₂O <br>
<tt> HTML- This is teletype text </tt> <br>
<u> HTML- This is underlined text</u> <br>
<strike> HTML- This is striked text</strike> <br>
</body>
</html>

Output:

1.9.2 Logical Tags

Logical tags are used to tell the browser what kind of text is written inside the tags. They are
different from physical tags because physical tags are used to decide the appearance of the text and
do not provide any information about the text.
Logical tags are used to indicate to the visually impaired person that there is something more
important in text or to emphasize the text.
Syntax: <tag name> Content </tag name>
Some cases when we could use logical tags are:
• When we want to write code on our website.
• When we want to Emphasize some text.
• When we want to display the abbreviation on the Web page.
• When we want to display some famous quotation on our web page.
• When we want to write some mathematical formula in terms of variables.
Examples:
Tag Description
<abbr> Defines the abbreviation of text.
<acronym> Defines the acronym.
<address> Contact information of a person or an organization.
<cite> Defines citation. It displays the text in italic format.
<code> Defines the piece of computer code.
<dfn> Defines the definition element and is used to represent a defining instance
in HTML.
<strong> Defines strong text i.e. show the importance of the text.
<kbd> Defines keyboard input text.
<pre> Defines the block of preformatted text which preserves the text spaces,
line breaks, tabs, and other formatting characters which are ignored by
web browsers.
<blockquote> Defines a long quotation.

Sample Program:

<html>
<head>
<title>Logical Tags</title>
<body>
<h1>Logical Tags</h1>
<!-- abbr tag -->
Welcome to <abbr title="Hyper Text Markup Language"> HTML </abbr> Programming
<br>

<!-- acronym tag -->

This is <acronym title="Hyper Text Markup Language"> HTML </acronym>
<br>

<!-- address tag -->

<address>
Mr. XYZ, 5th & 6th Floor,
ABC Apartments, Sector - 111,
UVW, Delhi - 110011
</address>
<br>

<!-- cite tag -->

<cite> Google Chrome </cite> is my favourite browser.
 <!-- code tag -->
<code>
Sample code: system.out.println();
</code>

<!-- blockquote tag -->

<blockquote>
"During the whole of a dull, dark, and soundless day in the autumn of the year, when the
clouds hung oppressively low in the heavens, i had been passing alone, on horseback,
through a singularly dreary tract of country, and at length found myself, as the shades of
evening grew on, within view of the melancholy House of Usher." -- Edgar Allen Poe
</blockquote>

<!-- dfn tag -->

<p>
<dfn> Logical Style </dfn> Styles that are named after how they are actually used.
</p>

<!-- kbd tag -->

<kbd>
Hyper Text Markup Language - This is a Keyboard input
</kbd>

<!-- pre tag -->

<pre>
( )
Moo (OO)
\/------\
|| | \
|| | *
||---W||
|| ||
|| ||

This is a predefine formatted text

</pre>
</body>
</html>

Output:
2. Lists
HTML offers three ways for specifying lists: ordered lists, unordered lists, and description lists. Ordered lists
use ordinal sequences to indicate the order of list elements, unordered lists use a defined symbol such as a
bullet to list elements in no designated order, and description lists use indents to list elements with their
children.

2.1 Ordered lists

An ordered list can be created with the <ol> tag and each list item can be created with the <li> tag. <ol> is
a container tag and requires the closing tag whereas <li> is an empty tag and does not need closing tag.

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links etc.

Attributes

Attribute Attribute Value Description

type 1 (numbers) To change the type of numeral shown in the list
A (uppercase letters) item. Default is 1.
a (lowercase letters)
i (lowercase roman numbers)
I (uppercase roman numbers)

start Any number To set a starting number other than 1.

 value Any number To explicitly set a certain list item to a specific
number. (used with <li> tag)

reversed reversed To reverse the numbering

Note: The start and value attributes only accept a number – even if the ordered list is set to display as
Roman numerals or alphabets.

Sample Program

<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol>
<li>Item
<li>Another Item
<li>Yet Another Item
</ol>
</body>
</html>

Output

Sample Program

<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol start="5">
<li>Item
<li>Some Other Item
<li value="4">A Reset Item
<li>Another Item
<li>Yet Another Item
</ol>
</body>
</html>
Output

Sample Program

<html>
<head>
<title> Ordered List</title>
</head>
<body>
<ol reversed type="I">
<li>Item
<li>Some Other Item
<li>A Reset Item
<li>Another Item
</ol>
</body>
</html>

Output

2.2 Unordered List

An unordered (bulleted) list can be created with the <ul> tag and each list item can be created with the <li>
tag. Three types of bullets are available to mark the unordered list. type attribute is used to specify different
bullets.

Types of Bullets:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

 square Sets the list item marker to a square.

Sample Program

<html>
<head></head>
<body>
<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
</body>
</html>

Output

Sample Program

<html>
<head></head>
<body>
<ul type="square">
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>
</body>
</html>

Output
2.3 Nested List
Lists can be nested to represent sub-items of a list item. Unordered lists can be nested under ordered lists
and vice versa. Lists can be nested up to any level. Nested lists are displayed indented to the parent lists.

Sample Program

<html>
<head></head>
<body>
<ul>
<li>item 1
<li>item 2
<ul>
<li>sub-item 2.1
<li>sub-item 2.2
</ul>
<li>item 3</li>
</ul>
</body>
</html>

Output

Sample Program

<html>
<head></head>
<body>
<ol>
<li>Hello, list!
<ul>
<li>Hello, nested list!
</ul>
</ol>
</body>
</html>

Output
2.4 Description List
A description list or definition list can be created with the dl element. It consists of name-value groups,
where the name is given in the dt element and the value is given in the dd element. This list is used to
prepare glossary like list generally given at the end of the text books.

Sample Program

<html>
<head></head>
<body>
<dl>
<dt>W3C</dt>
<dd>The World Wide Web Consortium was created in 1994 to develop standards and
protocols for the World Wide Web.</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the authoring language used to create documents
for the eorld wide web.</dd>
</dl>
</body>
</html>

Output

3. Images
Images can improve the design and the appearance of a web page. In earlier times, the web pages only
contain textual contents, which made them appear quite boring and uninteresting. Fortunately, it wasn’t
long enough that the ability to embed images on web pages was added for users.

<img> tag is used to display image on the web page. It is an empty tag that contains attributes only.

Attributes

Attribute Attribute Value Description

alt text alternative text that should be displayed if for some reason the
image could not be displayed
src URL Specifies the path to the image
height pixels Specifies the height of an image
width pixels Specifies the width of an image
 border pixels Specifies the border thickness of an image
vspace pixels specifies the number of whitespaces on bottom and top side
of an image
hspace pixels Specifies the number of whitespaces on left and right side of
an image
align “left” It sets the alignment of the image to the left.
“right” It sets the alignment of the image to the right.
“middle” It sets the alignment of the text with image to the middle.
“top” It sets the alignment of the text with image to the top.
“bottom” It sets the alignment of the text with image to the bottom.

There are two ways to specify the value in src attribute of img tag:

• By providing a full path or address (URL). (Absolute Addressing)

• By providing the file path relative to the location of the current web page file. (Relative Addressing)

Sample Program

<html>
<head></head>
<body>
<img src="b2b.jpg"
alt="typeofecommerce" height="200"
width="200" border=”5”>
</body>
</html>

Output

Output
Effective use of alt attribute, when image cannot be displayed on browser.

To insert an image in the web, that image must be present in the same
folder (relative addressing) where the HTML file is stored. But if in some cases image is available in some
other directory then one can access the image like this:

<img src=”E:/images/b2b.jpg” height=”200” width=”200”> (absolute addressing)

Sample Program

<html>
<head></head>
<body>
<img src="b2b.jpg"
alt="typeofecommerce" height="200"
width="200" border="5"
align="middle">Business to Business
type of commerce
</body>
</html>

Output

3.1 Anchor Tag

Anchor tags are commonly used to link separate webpages, but they can also be used to link between
different places in a single document, often within table of contents etc. It is represented by <a> tag. It is a
container tag. Here also, as in images, the address for the webpage is specified either in relative form or in
absolute form.

By default, links appear as follows in all browsers:

• Unvisited Links: Underlined and blue.

• Visited Links: Underlined and purple.
• Active Links: Underlined and red.
 Attribute Description
href Specifies the destination address. It can be an absolute or relative URL, or the
name of an anchor. An absolute URL is the complete URL of a website like
http://example.com.
name It is used to specify the anchor name.
target It is used to specify the target link. To open a link in a new browser tab, add the
target=”_blank” attribute.
link Used to change the colour of unvisited links. (Not supported in HTML 5)
alink Used to change the colour of active links. (Not supported in HTML 5)
vlink Used to change the colour of visited links. (Not supported in HTML 5)

The syntax of HTML anchor tag is:

<a href = “……………………”> Link Text </a>

e.g.: <a href = ”next.html”> Click for Next Page </a>

if you want to open the link to another page/tab, target attribute can be used:

<a href = ”next.html” target = ”_blank”> Click for Next Page </a>

Try the above code yourself. You can use any webpage stored in the same folder as your current webpage.

Above examples are for linking two webpages. To create links within a webpage use name attribute. You
need to give name to anchor element where ever you want your cursor/web page to scroll after clicking on
the link. E.g. to insert link in a webpage so that whenever you click on it, web page scrolls to the top of the
page. At the top of the page, after the <body> tag, type the following code:

<a name = ”top”></a>

Now, anywhere in the webpage or at the bottom of the webpage, type the following code:

<a href = “#top”>Click to go to top</a>

3.2 Imagemaps
An image maps is an image with clickable areas that usually act as hyperlinks.

The image is defined by the <img> tag, and the map is defined by a <map> tag with <area> tags to denote
each clickable area. Use the usemap and name attributes to bind the image and the map.

Tag/Attribute Description
<img> Below are the image map-specific attributes to use with <img>. Regular <img>
attributes apply.
usemap The name of the map with a hash symbol prepended to it. E.g., for a map with
name=”map”, the image should have usemap=”#map”
<map>
Name The name of the map to identify it. To be used with the image’s usemap attribute.
<area> Below are the area specific attributes. When href is specified, making the <area>
a link, <area> also supports all of the attributes of the anchor tag <a>.
coords The coordinates outlining the selectable area. When shape = “polygon”, this
should be set to a list of “x,y” pairs separated by commas (i.e., shape=”polygon”
coords=”x1, y1, x2, y2, x3, y3, ….”). when shape =”rectangle”, this should be set
to left top and right bottom. When shape=”circle”, this should be set to center X,
Y and radius.
 href The URL of the hyperlink, if specified. If it is omitted, then the <area> will not
represent a hyperlink.
shape The shape of the <area>. Can be set to default to select the entire image (no
coords attribute necessary), circle or circ for a circle, rectangle or rect for a
rectangle and a polygon or poly for a polygonal area specified by corner points.
Note: Microsoft paint can be used to find out the coordinates of the clickable shape used in the image.

Consider the above image, we will create the imagemaps for computer, phone and cup of coffee. Here is
the code:

Sample Program

<html>
<head></head>
<body>
<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap”>
<map name=”workmap”>
<area shape=”rect” cooords=”34,44,270,350” href=”computer.html”>
<area shape=”rect” coords=”290,172,333,250” href=”phone.html”>
<area shape=”circle” coords=”337,3000,44” href=”coffee.html”>
</map>
</body>
<html>
Before trying the code make sure to create files with the name computer.html, phone.html and coffee.html.

4. Table Tag
<table> tag is used to display data in tabular form (row * column). There can be many columns in a row.

In each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by
<td> tags.

Tag/Attribute Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table, bold and centre aligned
<td> It defines a cell in a table.
<caption> It defines the table caption.
border It is used with <table> tag to specify border width.
height To increase the height of the table. By default table height is as per total
number of rows in the table.
width To increase the height of the table. By default table width is as per the
content in the cell in the table.
align “left|right|center”
Can be used with <table> or <tr> or <th> or <td> for alignment of table
and text in row or any cell.
valign “top|middle|bottom”
Can be used with <tr>, <th>, <td>
Can be used with <tr> or <th> or <td> for alignment of text in row or any
cell.
frame • void: It is used to hide the outside border.
• above: It is used to display the top outside border.
• below: It is used to display the bottom outside border.
• hsides: It is used to display the top and bottom outside border.
• vsides: It is used to display the left and right outside border.
• lhs: It is used to display the left outside border.
• rhs: It is used to display the right outside border.
• box: It is used to display all sides outside border.
rules • none: It does not create any lines.
• rows: It creates line between the rows.
• cols: It creates line between the columns.
• all: It creates line between the rows and columns.
cellpadding It is used to specify the space between the cell content and cell wall. The
cellpadding attribute is set in terms of pixels. By default, the padding is
set to 0.
cellspacing It is used to specify the space between the cells. The cellspacing attribute
is set in terms of pixels. By default, the spacing is set to 1 pixel.
rowspan It allows you to merge or combine adjacent table cells vertically, creating
a single, longer cell that spans across multiple rows.
colspan It allows you to merge or combine adjacent table cells horizontally,
creating a single, wider cell that spans across multiple columns.
background To set any image as the background for the table, row or cell when used
with <table>, <tr> or <th> | <td> respectively.
bgcolor To change the background colour for the table, row or cell when used
with <table>, <tr> or <th> | <td> respectively.
Sample Program

<html>
<head></head>
<body>
<table border="5">
<tr>
<td></td>
<th>Column Heading 1</th>
<th>Column Heading 2</th>
</tr>
<tr>
<th>Row Heading 1</th>
<td>content11</td>
<td>content12</td>
</tr>
<tr>
<th>Row Heading 2</th>
<td>content21</td>
<td>content22</td>
</tr>
</table>
</body>
</html>

Output

Sample Program

<html> <th>Row Heading 1</th>

<head></head> <td>content11</td>
<body> <td>content12</td>
<table border="5" height="30%" </tr>
width="30%"> <tr align="center">
<caption align="top"> Table <th>Row Heading 2</th>
Example</caption> <td>content21</td>
<tr> <td>content22</td>
<td></td> </tr>
<th>Column Heading 1</th> </table>
<th>Column Heading 2</th> </body>
</tr> </html>
<tr align="center">

Output
Sample Program

<html> <th>Row Heading 1</th>

<head></head> <td>content11</td>
<body> <td>content12</td>
<table border="5" cellpadding="5" </tr>
cellspacing="5"> <tr align="center">
<caption align="top"> Table <th background="keep going.jpg">Row
Example</caption> Heading 2</th>
<tr> <td bgcolor="pink">content21</td>
<td></td> <td>content22</td>
<th>Column Heading 1</th> </tr>
<th>Column Heading 2</th> </table>
</tr> </body>
<tr align="center" bgcolor="yellow”> </html>

Output

Sample Program
 <html> Output
<head></head>
<body>
<table border="5" cellpadding="9"
cellspacing="7">
<tr>
<td colspan="3" align="center">TOP</td>
</tr>
<tr align="center">
<td rowspan="2">WAY LEFT</td>
<td>MIDDLE UP</td>
<td rowspan="2">WAY RIGHT</td>
</tr>
<tr align="center">
<td>MIDDLE DOWN</td>
</tr>
<tr>
<td colspan="3"
align="center">BOTTOM</td>
</tr>
</table>
</body>
</html>
Sample Program

<html> Output
<head></head>
<body>
<table border="5" cellpadding="9"
cellspacing="7">
<tr>
<td>
<table border="3">
<tr><td>Rubber</td><td>Baby</td></tr>
<tr><td>Buggy</td><td>Bumbers</td></tr>
</table>
</td>
<td>
<table border="3">
<tr><td>She</td><td>Sells</td></tr>
<tr><td>Sea</td><td>Shells</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

5. Frameset Tag
This tag is used to define how to divide the browser. It specifies the number of rows and columns in the
frameset and how much space they will occupy. Each part is known as a frame. Each frame is indicated by
the frame tag and it basically defines which HTML document shall open into the frame. <body> tag is not
used with the <frameset> tag. It is a container tag.

Syntax: <frameset cols = “ ”> …. </frameset>

Tag/Attribute Description
cols Used to create vertical frames in a web browser. Basically, used to define the
no. of columns and their size inside the tag.
rows Used to create horizontal frames in the web browser. Basically, used to
define the no. of rows and their size inside the tag.
border Defines the width of the border of each frame in pixels.
frameborder Specifies whether a 3-D border should be displayed between frames. This
attribute takes value either 1 (yes) or 0 (no). e.g., frameborder=”0” specifies
no border.
<frame> Defines which HTML document shall open into the frame. Below mentioned
attributes are used with the <frame> tag.
src It is used to give file name that should be loaded in the frame.
name It allows one 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 one
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.
noresize By default one 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.
scrolling This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either “yes”, “no”. e.g., scrolling = “no” means it
should not have scroll bars.

For rows and cols attributes, values can be specified in the following ways:

• Absolute values in pixels. E.g., to create three vertical frames, use cols = “200, 400, 100”.
• A percentage of the browser window. E.g., to create three vertical frames, use cols = “20%, 60%,
20%”.
• Using wild card symbol. E.g. to create three vertical frame, use cols = “20%, 50%, *”. In this case
wildcard ‘*’ takes remainder of the window. It can be used with the pixels too.

For equal number of rows and columns in the browser, use both the rows and cols attribute in the tag.
E.g., <frameset cols=”50%, 50%” rows=”50%, 50%”> will divide the browser window into four equal parts.

Sample Program
 <html>
<head>
<title> Learning Frameset tag</title>
</head>
<frameset cols="33%, 33%, *">
<frame src="prg8 list1.html">
<frame src="prg12 images 1.html">
<frame src="prg8 list2.html">
</frameset>
</html>

Output

Note: Web Browser window is divided into three vertical parts with three different web pages displayed in
each part.

Sample Program

Main Program

prg14 frame2 header.html

<html>
<head>
<title>Learning Frames</title> <html>
</head> <head>
<frameset rows="20%, 80%"> <title></title>
<frame src="prg14 frame2 header.html"> </head>
<frameset cols="35%, 65%"> <body>
<frame src="prg14 frame2 left.html"> <h1>HTML Programming</h1>
<frame src="prg14 frame2 right.html" name="f3"> <h3>Frameset Example</h3>
</frameset> </body>
</frameset> </html>
</html>

prg14 frame2 left.html

 <html>
<head>
<title></title>
</head>
<body>
<ul>
<li><a href="prg2 Headingtag.html" target="f3">heading tag
sample</a>
<li><a href="prg5 hr2.html" target="f3">hr tag sample</a>
<li><a href="prg3 p align.html" target="f3">p tag sample</a>
<li><a href="prg7 physical.html" target="f3">physical style tag
sample</a>
<li><a href="prg7 logical.html" target="f3">logical style tag sample</a>
<li><a href="prg9 unlist1.html" target="f3">list tag sample</a>
<li><a href="prg11 deflist.html" target="f3">definition list tag
sample</a>
<li><a href="prg12 images 1.html" target="f3">img tag sample</a>
<li><a href="prg13 table1.html" target="f3">table tag sample</a>
</ul>
</body>
</html>
prg14 frame2 right.html

<html>
<head>
<title></title>
</head>
<body>
<h1> Links displayed on the left pane will be displayed in this pane
when clicked because of name attribute in frame tag and tartget
attribute in a tag.</h2>
</body>
</html>

Output
 6. Form Tag
An HTML Form is a section of a document which contains controls such as text fields, password fields,
checkboxes, submit buttons etc. it facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. Integrating forms in the content
enhances user engagement, boosts interactivity, and the site more attractive.

Syntax:

<form action=”server url” method=”get|post”>

//input controls e.g. textfield, textarea, radiobutton, etc.

</form>

Tag/Attribute Description
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
action The action attribute (used with <form>) defines the action to be performed when
the form is submitted, which usually leads to a script that collects the
information submitted and works with it. If left blank, it will send it to the same
file.
method The method attribute (used with <form>) is used to define the HTTP method of
the form which is either GET or POST.
The GET method is mostly used to get data, for example to receive a post by its
ID or name, or to submit a search query. The GET method will append the form
data to the URL specified in the action attribute.
 The POST method is used when submitting data to a script. The POST method
does not append the form data to the action URL but sends using the request
body.
name Specifies the name of the form element. When submitting the form and sending
it to the server, the server needs to distinguish and differentiate between the
different kinds of submitted data it gathers. So, to submit the data from the form
correctly, a name attribute name must be specified. All the form elements must
have unique names.
e.g.: <input type “text” name=”fname”>
type Used to set the type of the input field or form element. Possible values are:
text|password|radio|checkbox|submit|reset
value It specifies the value of an form element or <input> element. It is used differently
for different input types:
• For “reset” and “submit” – it defines the text on the button.
• For “text” and “password” – it defines the initial (default) value of the input
field.
• For “checkbox” and “radio” – it defines the value associated with the input
(this is also the value that is sent on submit).

6.1 Form Elements

6.1.1 Text
The most basic input type and the default input if no type is specified is the “text”. The line <input
type=”text”> defines a single-line text field with line-breaks automatically removed from the input value.
All other characters can be entered into this. <input> elements are used within a <form> element to declare
input controls that allow users to input data. The default width of the text field is 20 characters.

Attribute Description
size This attribute specifies the visible width, in characters. Can be used with
password also. Default value is 20.
maxlength This attribute specify the maximum number of characters allowed in the text or
password. Default value is 524288. With maxlength=0, element will not accept
any input.
Sample Program

Output
<html>
<head>
<title>Form TextBox</title>
</head>
<body bgcolor = "#ffa8d3">
<form method="post" action="">
<font color="blue" size=5>
<b><label>Name : <input type="text" name="nm1" value="sarita"></label> No restriction
on size and maxlength<br><br>
<label>Age : <input type="text" name="ag" size=2 maxlength=2></label> size=2 and
maxlength=2<br><br>
<label>City : <input type="text" name="city" size=15 maxlength=6></label> size=15 and
maxlength=6<br><br>
<label>Mail : <input type="text" name="e-m" size=20 maxlength=25></label> size=20 and
maxlength=25<br><br>
<label>Mob : <input type="text" name="mob" size=15 maxlength=20 value="+91"></label>
size=15 and maxlength=20<br><br>
<label>Text : <input type="text" name="nochar" size="5" maxlength=0></label> size=5 and
maxlength=0<br><br>
</b></font>
</form>
</body>
</html>

6.1.2 Password
The <input type = ”password”> is used to specify the password field of the input tag. Here password iput
field where characters are masked, enhances security by hiding sensitive information like passwords from
plain view.

All the attributes used with textbox are also supported by password input element.
6.1.3 Radio Buttons
Radio buttons are a type of input element used in HTML forms. They allow users to select one option from
a group of choices. This is particularly useful in situations where one need the user to make a single
selection, such as choosing a shipping method, selecting a payment option, or picking a preferred language.
Radio button is shown as the round box.

To create a radio button in HTML, one need to use the <input> tag with the type attribute set to “radio”.
The name attribute is used to group radio buttons together, ensuring that only one option can be selected
at a time. The value attribute represents the value that will be submitted if the radio button is selected.

Sample Program

Output
<html>
<head>
<title>Form Radio Button</title>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Gender</legend>
<b>
<label><input type="radio" name="gender"
value="male"> Male </label><br>
<label><input type="radio" name="gender"
value="female" checked> Female
</label><br> Note: Because of <fieldset> tag, box is appearing
<label><input type="radio" name="gender" around the options and Gender over the box is
value="other"> Other </label><br> displayed because of <legend> tag. By default, female is
</b> choosen because of checked attribute in <input> tag.
</fieldset>
</form> 6.1.4 Checkbox
</body> The checkbox is used to select one or more options from
</html> a variety of options. It is a multi-control unit that will be
presented as a small square box on the screen. Checkbox is similar to radio buttons except for the name
attribute. Here, one need to give different name for each choice/option.

Sample Program Output

<html>
<head>
<title>Form Check box</title>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Choose your favourite dishes:</legend>
<b>
<label><input type="checkbox" name="dish1"
value="Rajma Chawal" checked> Rajma Chawal
</label><br>
<label><input type="checkbox" name="dish2"
value="Shahi Paneer" > Shahi Paneer </label><br>
6.1.5 List
The <select> element is used to create a drop-down list. It is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if the name attribute,
no data from the drop-down list will be submitted).

The <option> tags inside the <select> element define the available options in the drop-down list.

Attribute Description

Multiple Specifies that multiple options can be selected at once.

Name Defines a name for the drop-down list.

Required Specifies that the user is required to select a value before submitting
the form.
Size Defines the number of visible options in a drop-down list.
Sample Program

<form> Output
<font color="brown" size=4>Choose one
model:
</font>
<select name="car">
<option value="honda">Honda</option>
<option value="hyundai">Hyundai</option>
<option value="maruti">Maruti</option>
<option value="Kia">Kia</option>
<option value="tata">Tata</option>
<option
value="mahindra">Mahindra</option>
<option value="toyota">Toyota</option>
</select>
<br><br>
<font color="brown" size=4>Choose one
colour:
</font>
<select name="color" size="3">
<option>White</option>
<option>SilverGreen</option>
<option>Black</option>
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
</form>

6.1.6 Text Area

The <textarea> tag defines a multi-line text input control. It is often used in a form, to collect user inputs
like comments or reviews. A text area can hold an unlimited number of characters. The size of a text area is
specified by the cols and rows attributes. The name attribute is needed to reference the form data after the
form is submitted.

Sample Program
 <html> Output
<head>
<title>Form Text Area</title>
</head>
<body bgcolor = "#4ae371">
<center><font color="red" size=7
face="monotype corsiva"><u><b>
Text Area
</font></u></b>
<form>
<textarea name="tab" rows=8 cols=40>
Text written between the start and end of text
area tag.</textarea>
</form>
</center>
</body>
</html>

6.1.7 Submit Button

Submit button submits all form values to a form-handler. The form-handler is typically a server page with a
script for processing the input data. The form-handler is specified in the form’s action attribute.

Syntax: <input type=”submit” value=”Submit now”>

Whatever is specified in the value attribute will be displayed on the button.

6.1.8 Reset Button

The Reset Button is used to reset all the form data values and set them to their initial default value. In case
of user enters the wrong data then the user can easily correct it by clicking on the “Reset Button”.

Syntax: <input type=”reset” value=”Clear”>

Example Sample Program

 <form>
<table border="2">
<tr> <option value="business">Business</option>
<td> <option value="service">Service</option>
<h2>Visitor Information</h2> <option
<hr> value="influencer">Influencer</option>
<table border="2"> </select></td>
<tr> </tr>
<td>Email address:</td> <tr>
<td><input type="text" name="email"></td> <td>Want us to send you junk email?</td>
</tr> <td><label><input type="radio" name="junk"
<tr> value="yes">Absolutely</label>
<td>Do you use the web for:</td> <label><input type="radio" name="junk"
<td><label><input type="checkbox" name="res" value="no">No way, man</label></td>
value="Research">Research</label> </tr>
<label><input type="checkbox" name="Pur" <tr><td colspan="2" align="center">
value="purchase">Purchase</label> <input type="submit" value="Submit">
</td> <input type="reset" value="Reset">
</tr> </tr>
<tr> </table>
<td>Occupation:</td> </td>
<td><select name="occu"> </tr>
<option>(Select one)</option> </table>
<option value="teaching">Teaching</option> </form>

Output

7. Audio Tag
The <audio> tag is an inline element that is used to embed sound files into a web page. The <audio> tag
contains one or more <source> tags with different audio sources. The browser will choose the first source
it supports. There are three supported audio formats in HTML: MP3, WAV and OGG.

Attribute Description
autoplay Specifies that the audio will start playing as soon as it is ready.
controls Specifies that audio controls should be displayed (such as play/pause button
etc)
 loop Specifies that the audio will start over again, every time it is finished
muted Specifies that the audio output should be muted
src Specifies the URL of the audio file
Sample Program Output

<img src="flamingopic.jpg" height="200"

width="300"><br>
<audio controls autoplay muted loop>
<source src="flamingos.mp3"
type="audio/mpeg">
</audio>

8. Video Tag
The <video> tag is used to embed video content in a
document, such as movie clip or other video
streams. It contains one or more <source> tags with
different video sources. The browser will choose the
first source it supports. Supported video formats in HTML are MP4, WebM and OGG.

Attribute Description
autoplay Specifies that the video will start playing as soon as it is ready.
controls Specifies that video controls should be displayed (such as a play/pause button
etc.)
height Sets the height of the video player.
width Sets the width of the video player.
loop Specifies that the video will start over again, every time it is finished.
muted Specifies that the audio output of the video should be muted.
src Specifies the URL of the video file.
Sample Program Output

<video controls autoplay muted width="200">

<source src="video1.mp4" type="video/mp4">
</video>

9. Iframe tag
Adding a video to a webpage was a real challenge since one had to convert the videos to different formats
to make them play in all browsers. Converting videos to different formats can be difficult and time-
consuming.
Adding a video to a webpage has become as easy as copying and pasting and a very apt solution to add
videos to a website is using Youtube. Youtube helps to host a video for a user so that they can be further
embedded on web pages.

youTube displays an id like “BGAk3_2zi8k”, whenever a video is saved orplayed. This id is further used as a
referral for the You Tube video to be embedded in the webpage.

To play the video on a web page, do the following:

• Upload the video to You Tube.

• Take a note of the video id.
• Define an <iframe> element in the web page.
• Let the src attribute point to the video URL.
• Use the width and height attributes to specify the dimensions of the player.
• Add any other parameters to the URL.

Sample Program Output

<iframe height="350" width="350"

src="https://www.youtube.com/embed/S8h
odlQO3m4?autoplay=1&mute=1">
</iframe>

autoplay, mute and loop attributes can also be

used with <iframe> tag and appended with the src
attribute.

10. Question Bank

1. What is HTML?
HTML stands for Hypertext Markup Language. It is used to design web pages using a markup
language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text document within the tag
which defines the structure of web pages. HTML is used to structure the website and is therefore
used for Web Development.
2. Difference between HTML and XHTML.

S.No. HTML XHTML

HTML stands for Hypertext Markup XHTML stands for Extensible Hypertext
1.
Language. Markup Language.

It was developed by W3C i.e. lowercase

2. It was developed by Tim Berners-Lee.
World Wide Web Consortium.

3. It was developed in 1991. It was released in 2000.

4. It is extended from SGML. It is extended from XML and HTML.

5. The format is a document file format. The format is a markup language.

All tags and attributes are not In this, every tag and attribute should be in
6.
necessarily to be in lower or upper case. lower case.

Doctype is not necessary to write at the Doctype is very necessary to write at the top
7.
top. of the file.

It is not necessary to close the tags in the It is necessary to close the tags in the order
8.
order they are opened. they are opened.

While using the attributes it is not

While using the attributes it is mandatory to
9. necessary to mention quotes. For e.g.
mention quotes. For e.g. <Geeks=”GFG”>.
<Geeks>.

The used filename extensions are .html, The used Filename extensions are .xhtml, .xht,
10.
.htm. .xml.

3. What are the various markup languages available?

HTML: Hypertext Markup Language
KML: Key whole Markup Language
MathML: Mathematical Markup Language
SGML: Standard Generalized Markup Language
XHTML: eXtensible Hypertext Markup Language
XML: eXtensible Markup Language

4. What is the difference between HTML and HTML 5?

HTML HTML5

It didn’t support audio and video without the use It supports audio and video controls with
of Flash player support. the use of <audio> and <video> tags.

It uses SQL databases and application cache

It uses cookies to store temporary data.
to store offline data.

Allows JavaScript to run in the background.

Does not allow JavaScript to run in the browser. This is possible due to JS Web worker API
in HTML5.

Vector graphics are possible in HTML with the

Vector graphics is additionally an integral
help of various technologies such as VML,
part of HTML5 like SVG and canvas.
Silver-light, Flash, etc.

It allows drag-and-drop effects and support

It does not allow drag-and-drop effects.
target blank attribute.

Not possible to draw shapes like circles, HTML5 allows drawing shapes like circles,
rectangles, triangles, etc. rectangles, triangles, etc.

It is supported by all-new browsers like

It works with all old browsers.
Firefox, Mozilla, Chrome, Safari, etc.

Older versions of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.
HTML HTML5

The doctype declaration is too long and The doctype declaration is quite simple and
complicated. easy.

New elements for web structure like nav,

Elements like nav and header were not present.
header, footer, etc.

Character encoding is long and complicated. Character encoding is simple and easy.

It is almost impossible to get the true Geolocation One can track the Geo Location of a user
of users with the help of the browser. easily by using JS Geolocation API.

It cannot handle inaccurate syntax. It is capable of handling inaccurate syntax.

Attributes like charset, async, and ping are absent Attributes of the charset, async, and ping
in HTML. are a part of HTML 5.

5. What is the current version of HTML?

HTML 5 is the fifth and current version of HTML.
6. What is! DOCTYPE?
A doctype or document-type declaration is an instruction that tells the web browser about the
markup language in which the current page is written. The doctype is not an element or tag, it lets
the browser know about the version of or standard of HTML or any other markup language that is
being used in the document. The DOCTYPE for HTML5 is case-insensitive and can be written as
shown below:
<!DOCTYPE html>
7. What are elements and tags, and what are the differences between them?
HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with <
symbol and end with > symbol. Whatever is written inside < and > are called tags.
Syntax:
<b> </b>
HTML elements: Elements enclose the contents in between the tags. They consist of some kind of
structure or expression. It generally consists of a start tag, content, and an end tag.
Syntax:
<b>This is the content. </b>
Difference between HTML Tag & HTML Element:

HTML Tag HTML Element

Either opening or closing is used to mark the start Collection of a start tag, end tag, and its
or end of an element. attributes.

Used to hold the HTML element. Holds the content.

Whatever is written within an HTML tag are

Starts with < and ends with >.
HTML elements.

8. What are the various heading tags and their importance?

There are 6 levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4,
H5, and H6; with H1 being at the highest level and H6 at the least.
Importance of Heading:
Search Engines use headings for indexing the structure and content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the document.
9. How to redirect to a particular section of a page using HTML?
One can use the anchor tag to redirect to a particular section on the same page. You need to add
“id attribute” to the section that you want to show and use the same id in href attribute with “#” in
the anchor tag. So that On click a particular link, you will be redirected to the section that has the
same id mentioned in the anchor tag.
Syntax:
<a href="#home_section">home</a>

<section id="home_section">
Information About Page
</section>
Example: When the user clicks on the “Contact Us” link, he will be redirected to the “Contact Us
section” on the same page.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
div {
width: 100%;
height: 400px;
border: 1px solid black;
}
</style>
</head>

<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>
This is the example of
<i>
Redirect to a particular section
using HTML on same page
</i>
</p>

<a href="#contactUs"> Contact Us </a>

<div>
<h2>Home section</h2>
</div>
<div>
<h2>About Us section</h2>
</div>
 <div id="contactUs">
<h2>Contact Us section </h2>
</div>
<div>
<h2>Team Section</h2>
</div>
</body>

</html>
Output:

10. What are attributes?

An attribute is used to provide extra or additional information about an element.
All HTML elements can have attributes. Attributes provide additional information about an element.
It takes 2 parameters i.e., name and value. These define the properties of the element and are
placed inside the opening tag of the element. The name parameter takes the name of the property
we would like to assign to the element and the value takes the property value or extent of the
property names that can be aligned over the element.
Every name has some value that must be written within quotes.
11. Are <b> and <strong> tags same? If not, then why?
HTML strong tag: The strong tag is one of the elements of HTML used in formatting HTML
texts. It is used to show the importance of the text by making it bold or highlighting it semantically.
Syntax:
<strong> Contents... </strong>
HTML bold tag: The bold tag or <b> is also one of the formatting elements of HTML. The text
written under the <b> tag makes the text bold presentationally to draw attention.
Syntax:
<b> Contents... </b>
The main difference between the <bold> tag & <strong> tag is that the strong tag semantically
emphasizes the important word or section of words while the bold tag is just offset text
conventionally styled in bold. Click Here to know more.
12. What is the difference between <em> and <i> tags?
<i> tag: It is one of the elements of HTML which is used in formatting HTML texts. It is used to
define a text in technical terms, alternative mood or voice, a thought, etc.
Syntax:
<i> Content... </i>
<em> tag: It is also one of the elements of HTML used in formatting texts. It is used to define
emphasized text or statements.
Syntax:
<em> Content... </em>
By default, the visual result is the same but the main difference between these two tags is that the
<em> tag semantically emphasizes the important word or section of words while the <i> tag is just
offset text conventionally styled in italic to show alternative mood or voice. Click Here to know the
difference between them.
13. How are comments added in HTML?
The comment tag (<! – Comment –>) is used to insert comments in the HTML code.
Types of HTML Comments: There are three types of comments in HTML which are:
• Single-line comment
• Multi-lines comment
• Using <comment> tag
14. What are the different formats in which colors in HTML can be declared?
The color of an element can be defined in the following ways:
• Built-In Color
• RGB Format
• RGBA Format
• Hexadecimal Notation
• HSL
• HSLA
Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red,
120 represents green and 240 represents blue color.
Saturation: It takes a percentage value, where 100% represents completely saturated, while 0%
represents completely unsaturated (gray).
Lightness: It takes a percentage value, where 100% represents white, while 0% represents black.
15. How to create a link in HTML?
A Link is a connection from one Web resource to another. A link has two ends, An anchor and a
direction. The link starts at the “source” anchor and points to the “destination” anchor, which may
be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document,
or an element within an HTML document.
HTML Link Syntax: Links are specified in HTML using the “a” tag.
<a href="url">Link Text<a>
Explanation:
href: The href attribute is used to specify the destination address of the link used.
Text link: The text link is the visible part of the link.

16. What is the use of the target attribute in the <link> tag?
The HTML <link> target Attribute is used to specify the window or a frame where the linked
document is loaded. It is not supported by HTML 5.
Syntax:
<link target="_blank|_self|_parent|_top|framename">
Attribute Values:
_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

17. What is the use of alt attribute in images?

The <img> alt attribute is used to specify the alternate text for an image. It is useful when the
image is not displayed. It is used to give alternative information for an image.
Syntax:
<img alt="text">
18. What are the HTML tags used to display a table?
<table>: It is used to define a table.
<tr>: It is used to define a row in a table.
<th>: It is used to define a header cell in a table.
<td>: It is used to define a cell in a table.
<caption>: It is used to define the table caption.
<colgroup>: It is used to define a group of one or more columns in a table for formatting.
<col>: It is used with <colgroup> element to specify column properties for each column.
<tbody>: It is used to define a group of body content in a table.
<thead>: It is used to group the header content in a table.
<tfooter>: It is used to group the footer content in a table.

19. What are the different types of lists in HTML?

A list is a record of short pieces of related information used to display the data or any information
on web pages in the ordered or unordered form. HTML offers 3 ways for specifying lists of
information. All lists must contain one or more list elements. The types of lists that can be used in
HTML are:
• Unordered List: It will list the items using plain bullets.
• Ordered List: It will use different schemes of numbers to list your items.
• Definition List: It arranges your items in the same way as they are arranged in a dictionary.

20. What is the difference between block and inline elements?

Every element in HTML has a default display value which depends upon the element
type. Block or inline is the default display value for most of the elements.
• Block-Level Elements: A block-level element always starts on a new line and stretches
out to the left and right as far as it can.
• div element: The div element is used as a container for other HTML elements. It has no
required attributes. Style, class, and id are the commonly used attributes.
• span element: The span element is used as a container for text. It has no required
attributes. Style, class, and id are the commonly used attributes.