HTML QUESTION BANK

Unit-1

2-Mark Questions (Short Answer/Definitions)

Q.
Question Suggested Answer
No.

What is the fundamental The Internet is the global physical infrastructure/network of

difference between the interconnected computers and cables. The WWW is a system
Q1
Internet and the World of interconnected documents (webpages) accessed via the
Wide Web (WWW)? Internet using protocols like HTTP and identified by URLs.

A Web Browser (e.g., Chrome, Firefox) is a software

Define a Web Browser and application that interprets HTML, CSS, and JavaScript code,
Q2
state its primary function. translates it, and displays the resulting Webpage content to the
user. Its primary function is to render web documents.

A Webpage is a document, typically written in HTML, that is

stored on a web server and can be accessed and displayed by a
Q3 What is a Webpage?
web browser. It can contain text, images, videos, and
hyperlinks.

An HTML tag is a keyword enclosed in angle brackets (<>),

In the context of HTML, such as <h1> or <p>. Tags are used to mark up (structure and
Q4
what is a tag? describe) the different elements and content within an HTML
document.

Give an example of an
An example is the paragraph tag: <p>. A complete element
HTML tag and briefly
Q5 consists of the opening tag (<p>), the content (the text
explain the components of a
inside), and the closing tag (</p>).
complete HTML element.
5-Mark Questions (Intermediate Explanation/Comparison)
Q.
Question Suggested Answer
No.

1. DNS Lookup: The browser first finds the IP address

corresponding to the URL's domain name via the Domain Name
System (DNS). 2. HTTP Request: The browser sends an HTTP
Explain the step-by-step request to the web server at that IP address, asking for the
process a Web Browser specific webpage file. 3. Server Processing: The server
Q6 follows from the moment a retrieves the requested file (usually an HTML document). 4.
user enters a URL until the HTTP Response: The server sends the file back to the browser
Webpage is displayed. in an HTTP response. 5. Rendering: The browser reads the
HTML, interprets the tags, and uses them (along with any linked
CSS and JavaScript) to structure and display the final visual
Webpage to the user.

Paired Tags (Container Tags): These tags have both an

opening tag and a closing tag. They are designed to contain and
Differentiate between a
apply formatting/structure to content. Examples: <p>...</p>,
paired tag (container tag)
<h1>...</h1>, <b>...</b>. Empty Tags (Void Tags): These tags
Q7 and an empty tag (void
do not have a closing tag because they do not wrap any content;
tag) in HTML, providing
they are used to insert something into the document at a specific
two examples of each.
point. Examples: <br> (line break), <img> (image), <hr>
(horizontal rule).

Attributes provide additional information about an HTML

element or modify the element's default behavior. They are
Briefly explain the concept always placed inside the opening tag. Syntax:
of attributes in HTML attribute_name="value" Example: In <p
Q8
tags. How are they used, align="center">Hello</p>, align is the attribute name and
and what is their syntax? "center" is the value, instructing the browser to center the
paragraph content. Attributes are essential for adding features
like links (href), sources (src), or custom styles.
10-Mark Question (Detailed Description/Conceptual)
Q.
Question Suggested Answer
No.

The process begins with the Internet, the underlying

global network that physically connects all devices.
When a user wishes to view a Webpage, they use a
Web Browser to initiate communication. The
browser sends a request across the Internet to a web
server. The server responds by sending back the
requested resource, which is typically an HTML
document. The HTML document is the core
structure of the webpage, composed entirely of text
and tags. The Web Browser's primary job is to
interpret this raw HTML. Tags are the fundamental
instructions for the browser, telling it what each
Web Communication and HTML piece of content represents: 1. Structural Tags: Tags
Fundamentals: Provide a like <html>, <head>, and <body> define the overall
comprehensive explanation of how the document organization. 2. Semantic Tags: Tags like
Q9
Internet, Web Browser, and basic <h1> (heading) and <p> (paragraph) tell the browser
HTML tags collaborate to deliver a the meaning or role of the content, which aids in
structured Webpage to a user. accessibility and search engine indexing. 3.
Presentational Tags/Attributes: While modern
styling is done with CSS, initial tags define simple
content display (e.g., <b> for bold). Attributes (like
src in an <img> tag) provide the browser with
necessary data (e.g., the path to an image file) to
complete the rendering. The browser reads the tags
sequentially, constructs the visual layout, applies
styles, and finally renders the complete, interactive
Webpage on the user's screen. Thus, the Internet
provides connectivity, the Web Browser provides
interpretation, and HTML tags provide the structure
and content definition.
Unit- 2

2-Mark Questions (Short Answer/Definitions)

Q.
Question Suggested Answer
No.

What is the purpose of the <html> is the root element that defines the entire HTML
primary HTML document document. <head> contains metadata about the HTML
Q1
structure tags: <html>, document (like the title and stylesheets). <body> contains the
<head>, and <body>? visible page content.

Both tags make text appear bold by default. However,

What is the difference in
<strong> is a semantic tag that indicates the text has strong
appearance and meaning
Q2 importance or seriousness, while <b> is a presentational tag
between the <b> and
used only to draw attention to the text without conveying extra
<strong> tags?
importance.

What does the <p> tag The <p> tag represents a paragraph of text. As a block-level
represent, and what is its element, it always starts on a new line and takes up the full
Q3
default behavior as a block- available width of its parent container, inserting a line break
level element? after it.

The <h1> tag represents the most important heading level. It

Which HTML heading level
should be used to describe the primary topic of the page and is
Q4 is the most important, and
crucial for SEO (Search Engine Optimization) and document
what tag is used for it?
structure.

Briefly state why the <font> These tags are deprecated because they are presentational.
and <strike> tags are Styling (like font color, size, or strikethrough) should be
Q5
considered deprecated in handled using CSS (Cascading Style Sheets), separating
modern HTML. content (HTML) from presentation (CSS).
5-Mark Questions (Intermediate Explanation/Comparison)

Q.
Question Suggested Answer
No.

The <head> tag contains metadata, which is information

about the document, not content for the user. This includes
Explain the functional difference
the page title (<title>), links to stylesheets, character set
between the content placed
declarations, and scripts. This content is generally not
Q6 inside the <head> tag and the
displayed on the page. The <body> tag contains all the
content placed inside the <body>
content that is visible to the user, such as text, images,
tag.
links, and headings. It represents the document's content
structure.

HTML provides six levels of headings, from <h1> (most

important) down to <h6> (least important). <h1> is the
Describe the six levels of HTML
main topic; <h2> are major sections; <h3> are
Headings (<h1> to <h6>). Why
subsections, and so on. Their sequential use is vital for
Q7 is it important to use them
accessibility and SEO. Screen readers rely on the heading
sequentially rather than just for
structure to outline the page, and search engines use it to
visual size?
understand the topic hierarchy and context, ensuring a
logical flow of information.

Block-level elements, like <p> and headings, occupy the

full width available and always start on a new line,
effectively creating a "block" of content that stacks
Differentiate between a block-
vertically. You can set their height and width. Inline
level element (e.g., <p>) and an
Q8 elements, like <b> and <i>, only occupy the width
inline element (e.g., <b> or <i>)
necessary for their content, do not start on a new line,
in terms of display and layout.
and flow alongside adjacent text and elements. They are
typically used to format a small part of the text within a
block.

Q9 Contrast the deprecated tags <b> <b> (bold) and <i> (italic) are presentational tags; they
and <i> with their modern, only define how the text looks. <strong> (strong) and
semantic equivalents <strong> <em> (emphasis) are semantic tags; they define the
Q.
Question Suggested Answer
No.

meaning or importance of the text. Modern web

development prefers <strong> and <em> because they
and <em>, providing a reason
make the code more meaningful to assistive technologies
why the modern tags are
(like screen readers) and search engines, adhering to the
preferred.
principle of separating content structure (HTML) from
visual presentation (CSS).

10-Mark Questions (Detailed Description/Conceptual)

Q.
Question Suggested Answer
No.

Q10 HTML Document Structure and Content I. Essential HTML Structure: An HTML
Flow: Discuss the essential structure of an document is built around three core tags: 1.
HTML document using <html>, <head>, <html>: The root element that wraps all other
and <body>. Furthermore, explain the code, defining the content as an HTML
concept of block-level elements, focusing document. 2. <head>: Contains metadata
on Headings and the <p> tag, and how they necessary for the browser and search engines,
define the flow and basic layout of content such as the character set, page title (<title>),
on a webpage. and links to external resources (e.g., CSS
files). This content is not displayed to the user.
3. <body>: Contains all the visible content of
the webpage, including text, images, links, and
forms. This is where the user's focus lies. II.
Block-Level Elements and Content Flow:
Block-level elements are fundamental to
structuring the page's layout. They are
characterized by the following behavior: *
New Line Start: They always start on a new
line, effectively creating horizontal sections. *
Full Width: By default, they extend to take up
the full width available within their parent
element. * Vertical Stacking: They stack
vertically, creating distinct content blocks. Key
Q.
Question Suggested Answer
No.

examples include: Headings (<h1> to <h6>):

These are block elements used to create a
hierarchical outline of the document's topics.
They inherently provide structure and semantic
meaning, ensuring the most important title
(<h1>) is used only once and subheadings
follow in logical order. Paragraphs (<p>):
The <p> tag is a block element used to
organize text into readable paragraphs.
Browsers automatically add a margin (space)
above and below a paragraph, clearly
separating one block of text from the next and
defining the main flow of narrative content.
This structured use of block elements is crucial
for a readable and accessible webpage layout.

Unit-3

2-Mark Questions (Short Answer/Definitions)

Q.
Question Suggested Answer
No.

The <ol> (Ordered List) tag is used to create a list where the
What is the purpose of the
order of items is important, typically displayed with numbers
Q1 <ol> tag, and what list item
or letters. The <li> (List Item) tag is used for each entry
tag is used inside it?
inside the list.

Q2 Distinguish between the The <br> (Break Rule) tag inserts a single line break,
<br> tag and the <hr> tag. moving subsequent text to the next line. The <hr>
(Horizontal Rule) tag inserts a horizontal line across the
Q.
Question Suggested Answer
No.

page, visually separating content sections.

What are Hyper-links (or

Hyper-links are connections from one webpage to another, or
links), and what is the
Q3 to a different part of the same page. The <a> (Anchor) tag is
primary tag used to create
the primary tag used for creating links.
them?

The src attribute (Source) specifies the path/URL of the

Which two essential
image file. The alt attribute (Alternate text) provides a
Q4 attributes must be used with
description of the image for accessibility and when the image
the <img> tag?
fails to load.

A Nesting List is a list that contains another complete list

(either ordered or unordered) within one of its list items. This
Q5 What is a Nesting List?
allows for the creation of multi-level outlines or hierarchical
content.

5-Mark Questions (Intermediate Explanation/Comparison)

Q.
Question Suggested Answer
No.

Differentiate between Ordered Lists (<ol>) display items in a sequential or numbered

Ordered Lists (<ol>) format (1, 2, 3... or a, b, c...). They are used when the sequence or
and Unordered Lists ranking is important, such as a set of instructions, steps in a
Q6
(<ul>), providing an recipe, or a top-ten list. Unordered Lists (<ul>) display items using
example of when each markers like bullets (•, ■, etc.). They are used when the order is not
should be used. significant, such as a shopping list, a list of features, or menu items.

Q7 Explain the function of The <marquee> tag creates a scrolling section of text or images that
the <marquee> tag and moves horizontally or vertically across the page. While functional, it
state why its use is is a non-standard and deprecated HTML element. It is
Q.
Question Suggested Answer
No.

discouraged because it is often distracting to users, poses

generally discouraged accessibility challenges (difficult for screen readers), and its
in modern web design. behavior cannot be reliably controlled across all browsers. Scrolling
effects are now achieved using CSS animations or JavaScript.

Describe how to create

Hyper-links are created using the <a> (Anchor) tag. The essential
a hyper-link to an
attribute is href (Hypertext Reference), which specifies the
external website,
Q8 destination URL of the link. The text or image placed between the
detailing the tag and
opening and closing <a> tags becomes the clickable content.
attribute required. Give
Example: <a href="[Link] Google</a>
an example.

The alt (Alternate text) attribute provides a textual description of the

image. Its benefits are: 1. Accessibility: Screen readers rely on the
Explain the benefits of
alt text to describe images to visually impaired users. 2. SEO
using the alt attribute in
(Search Engine Optimization): Search engines use alt text to
Q9 the <img> tag, even if
understand the image content, helping pages rank higher for relevant
the image loads
keywords. 3. Error Handling: If the image file fails to load (due to
correctly.
a broken link or slow connection), the alt text is displayed in the
image's place, maintaining content integrity.

10-Mark Questions (Detailed Description/Diagram/Conceptual)

Q.
Question Suggested Answer
No.

Q10 HTML Integration and I. Inserting an Image: Images are inserted using the <img>
Structure: Describe how to (Image) tag, which is an empty tag. It requires the src
insert an image and a nested attribute to point to the image file and the alt attribute for
list into an HTML document. descriptive text. II. Creating a Nested List: This involves
Illustrate your answer by placing a complete list (<ol> or <ul>) as the content within a
writing a simple, complete single list item (<li>) of another list. This creates a clear
HTML code snippet that shows hierarchy. III. Linking an Image: An image can be turned
Q.
Question Suggested Answer
No.

into a link by simply wrapping the <img> tag inside the <a>
(Anchor) tag, using the href attribute for the destination.
HTML Code Example: html <main> <h2>Project
Requirements</h2> <ul> <li>Phase 1: Planning and
an unordered list containing a
Research</li> <li>Phase 2: Design and Development <ul>
nested ordered sub-list,
<li>Design Mockups</li> <li>Code Core Features</li>
followed by an image that
<li>**Testing and Review**</li> </ul> </li> <li>Phase 3:
links to an external website.
Deployment</li> </ul> <hr> <h2>See Our Logo</h2> <a
href="[Link] target="_blank">
<img src="[Link]" alt="Company Logo" width="150"
height="50"> </a> </main>

Unit-4

2-Mark Questions (Short Answer/Definitions)

Q.
Question Suggested Answer
No.

Q1 What are the three essential The essential tags are: <table> (defines the table), <tr> (defines
Q.
Question Suggested Answer
No.

tags required to define the

basic structure of an HTML a table row), and <td> (defines a standard table data cell).
table?

What is the purpose of the The <caption> tag is used to define a title or brief explanation
Q2 <caption> tag in an HTML for the entire table. It must be inserted immediately after the
table? opening <table> tag and is crucial for accessibility.

The rowspan attribute is used within <td> or <th> tags to make

Explain the function of the
Q3 a single cell span or cover multiple rows vertically, effectively
rowspan attribute.
merging the cells below it in the same column.

What is Cell Padding in Cell Padding is the space (or gap) between the content inside a
Q4 the context of an HTML cell and the border of that cell. It is controlled by the padding
table? CSS property (or the deprecated cellpadding attribute).

A header cell is defined using the <th> (Table Header) tag

How is a header cell instead of <td>. This is important because it semantically
Q5 defined in an HTML table, identifies the cell as column/row headers, aiding accessibility
and why is this important? (screen readers) and typically rendering the text as bold and
centered.

5-Mark Questions (Intermediate Explanation/Comparison)

Q.
Question Suggested Answer
No.

Q6 Differentiate between rowspan rowspan: Merges cells vertically across multiple rows.
and colspan in HTML tables, Useful when a single item (e.g., a student name) applies to
providing a scenario where each several data points listed in subsequent rows (e.g., test
would be useful. scores). colspan: Merges cells horizontally across multiple
columns. Useful when a single header (e.g., "Quarterly
Q.
Question Suggested Answer
No.

Sales") needs to span across several related data columns

(e.g., Sales Region 1, Sales Region 2). Both attributes are
used to create complex, non-rectangular table layouts.

Cell alignment is best controlled using CSS. 1. Horizontal

Alignment: Use the CSS property text-align on the <td> or
Explain how Cell Alignment <th> element (e.g., text-align: center; or text-align: left;). 2.
can be controlled in an HTML Vertical Alignment: Use the CSS property vertical-align
Q7 table using modern methods, on the <td> or <th> element (e.g., vertical-align: top;,
focusing on both horizontal and vertical-align: middle;, or vertical-align: bottom;). These
vertical alignment. properties are applied directly or via CSS classes,
overriding the deprecated HTML attributes (align and
valign).

Cell Padding is the space inside a cell, between the content

Describe the difference between and the cell border. Cell Spacing is the space between the
Cell Padding and Cell Spacing individual cells (i.e., between the borders of adjacent cells).
Q8 in HTML tables. Which method CSS is the preferred method for both: padding property for
(HTML attribute or CSS) is cell padding and border-spacing property on the <table>
preferred today? element for cell spacing, replacing the deprecated
cellpadding and cellspacing HTML attributes.

10-Mark Question (Detailed Description/Conceptual)

Q.
Question Suggested Answer
No.

Q9 Complex Table Construction: Describe I. Table Structure Fundamentals: The table

the complete process of creating a starts with the <table> tag. Immediately
structured HTML table. Your answer following is the <caption> tag, providing a
must include the use of <caption>, <th>, descriptive title for the entire table. The table is
colspan, and the concept of cell padding built row by row using the <tr> (Table Row) tag.
to enhance readability. Provide a simple, II. Header and Data Cells: Table headers (titles
Q.
Question Suggested Answer
No.

for columns or rows) are defined using <th> tags

for semantic clarity and better styling, while
standard data is placed in <td> tags. III.
Merging Cells (colspan): To create a complex
layout, the colspan attribute is applied to a <th>
or <td> tag. Setting colspan="2" instructs the cell
to occupy the space of two adjacent columns,
allowing a single header (e.g., "Results") to sit
above multiple sub-columns (e.g., "Score" and
"Grade"). IV. Readability and Cell Padding:
Cell Padding (using the CSS padding property)
well-commented code snippet illustrating
is crucial for readability. It adds internal space
a 3x3 logical table structure where one
around the content of each cell, preventing text
cell spans two columns.
from touching the cell borders and making the
data easier to scan. HTML Code Example: html
<table> <caption style="font-weight:
bold;">Quarter 1 Sales Summary</caption>
<thead> <tr> <th>Category</th> <th
colspan="2">Regional Sales (Q1)</th> </tr>
</thead> <tbody> <tr> <td style="padding:
8px;">Electronics</td> <td>$50,000</td>
<td>$35,000</td> </tr> <tr> <td style="padding:
8px;">Apparel</td> <td>$20,000</td>
<td>$45,000</td> </tr> </tbody> </table>

Q10 Advanced Table Manipulation: Explain I. Setup: Start with <table> and define the
how to construct a table that uses both necessary rows (<tr>). Use <th> for time slots
rowspan and colspan to represent a and task names. II. The Whole Day Span
schedule where a single activity spans a (rowspan): An entry that spans a whole day
whole day and a single time slot spans (e.g., "Day Off") is defined by a cell with the
multiple tasks. rowspan attribute set to the total number of data
rows it needs to cover. This cell is defined only in
the first row it covers; subsequent rows will omit
the cell that has been "taken up." III. Multiple
Task Span (colspan): A time slot header that
covers multiple parallel tasks (e.g., "Morning
Q.
Question Suggested Answer
No.

Session" covering both "Lecture" and "Lab") is

defined by a cell with the colspan attribute set to
the number of columns it must occupy. IV.
Implementation Logic: Careful counting is
required: the sum of the colspan values in any
single row (including implicit colspan=1 for cells
without the attribute) must equal the total number
of columns defined by the row with the largest
number of cells. Similarly, rowspan affects which
cells appear in the subsequent rows.

Unit-5
2-Mark Questions (Short Answer/Definitions)
Q.
Question Suggested Answer
No.

The <frameset> tag was used to divide the browser window

What was the primary purpose
into multiple, independent regions (frames), each capable of
Q1 of the <frameset> tag? (Note:
loading a separate HTML document. It replaced the <body>
This tag is now deprecated.)
tag in a frame-defining document.

The target attribute, when used in an <a> (anchor) tag,

Explain the use of the target specifies where the linked document should open. Common
Q2
attribute in a hyperlink. values include _blank (new tab/window) or the name of a
specific frame in a frameset.

The <form> tag is a container used to collect user input. It

What is the purpose of the defines a structure for form controls (like text fields, buttons,
Q3
<form> tag? and menus) and specifies where (action attribute) and how
(method attribute) the data should be sent to a server.

The <input type="text"> creates a single-line text input

Differentiate between the
field, suitable for short data like a name or email. The
Q4 <input type="text"> and
<textarea> creates a multi-line scrolling text area, suitable
<textarea> elements.
for large inputs like comments or addresses.

The <option> tag defines an individual, selectable item

Briefly explain the role of the
Q5 within a drop-down list or a scrolling list created by the
<option> tag within a form.
parent <select> element.

5-Mark Questions (Intermediate Explanation/Comparison)

Q.
Question Suggested Answer
No.

Q6 Explain the concept of Targeted Links use the target attribute in the <a> tag to
Q.
Question Suggested Answer
No.

specify a frame's name where the linked document should

Targeted Links in the
load. This allows content in one frame (e.g., a navigation
context of frames. Provide an
menu) to control the content displayed in a separate, larger
example of how a link from
frame. Example: If the main content frame is named
one frame could open a
main_content, the link in the navigation frame would be: <a
document in another frame.
href="[Link]" target="main_content">Go to Page 2</a>.

The <noframes> tag was placed inside a <frameset> and

contained content (usually a message or a link to a non-framed
What is the significance of version) that would only be displayed if the user's browser did
the now-deprecated not support frames. Its significance was in providing basic
Q7 <noframes> tag, and what is accessibility and fallback functionality. The modern
the modern approach to approach is to avoid frames entirely and use CSS for layout
handling its function? (like Flexbox or Grid) and the iframe tag (if required) for
embedding external content, which has much better browser
support and is not deprecated.

The form structure begins with the <form> tag, containing

Describe the basic structure various input controls. The two essential attributes are: 1.
of a form. Which two action: Specifies the URL of the server-side script or program
essential attributes are that will process the form data when it is submitted. 2.
Q8
required in the <form> tag method: Specifies the HTTP method used to send the data,
for successful data typically GET (data appended to the URL, visible) or POST
submission? (data sent in the body of the request, more secure for sensitive
data).

The <select> tag creates a drop-down list or a selection box,

allowing the user to choose one or more predefined options.
Explain the purpose of the
Each possible choice within the list is defined by an <option>
<select> and <option> tags,
Q9 tag. The value attribute in the <option> tag specifies the data
and how the value attribute is
that will actually be sent to the server when that option is
used in this context.
chosen, which might differ from the visible text displayed to
the user.
10-Mark Questions (Detailed Description/Conceptual)
Q.
Question Suggested Answer
No.

I. Importance of Forms: HTML Forms are the essential

mechanism for user-to-server interaction. They allow users
to input data (e.g., login credentials, search queries, feedback)
which is then processed by a server-side application, making
the web dynamic and interactive. II. Form Structure and
Submission: The form starts with the <form> tag, specifying
the action (destination URL) and method (GET/POST) for
data submission. Crucially, all input elements must have a
name attribute, as this name-value pair is what the browser
sends to the server. III. Key Input Elements: * <input>:
Used for diverse single-line fields (text, password, submit,
etc.). The type attribute determines its function. *
Form Creation and User
<textarea>: Used for multi-line text input (comments,
Input: Discuss the
description). * <select>/<option>: Used for choice selection
importance of HTML Forms
(drop-down lists). The name is on the <select> tag, and the
for web interaction. Detail the
data sent is the value attribute of the selected <option>. IV.
structure of a complete form,
Data Preparation: When the user clicks the submit button,
Q10 including the use of <input>,
the browser gathers the name and value of every successful
<textarea>, and <select>
form control, formats them (e.g.,
elements, and how the data is
field1=value1&field2=value2), and sends this payload to the
prepared for submission.
URL specified in the action attribute using the method
Provide a complete code
specified in the method attribute. HTML Code Example:
example.
html <form action="/submit_feedback.php" method="post">
<label for="user_name">Your Name:</label> <input
type="text" id="user_name" name="client_name"
required><br><br> <label
for="comments">Comments:</label><br> <textarea
id="comments" name="user_comments" rows="4"
cols="50"></textarea><br><br> <label for="rating">Service
Rating:</label> <select id="rating" name="service_rating">
<option value="excellent">Excellent</option> <option
value="good">Good</option> <option
value="poor">Poor</option> </select><br><br> <input
type="submit" value="Send Feedback"> </form>