Scribd
Upload
95 views39 pages

HTML SA Solution

The document contains a series of questions and answers related to HTML concepts, including the use of tags, attributes, and their functionalities. Each question is followed by an explanation that clarifies the correct answer and provides key points to remember. The content serves as a study guide for understanding HTML structure and behavior, particularly for form elements, image attributes, and meta tags.

Uploaded by

153-CSE- SUPRATIM MAITY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
95 views39 pages

HTML SA Solution

The document contains a series of questions and answers related to HTML concepts, including the use of tags, attributes, and their functionalities. Each question is followed by an explanation that clarifies the correct answer and provides key points to remember. The content serves as a study guide for understanding HTML structure and behavior, particularly for form elements, image attributes, and meta tags.

Uploaded by

153-CSE- SUPRATIM MAITY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

✅ Question 1

Look at the below HTML code:

<html>
<head>

"Welcome"
</head>
<body>

"User"
</body>
</html>

What will be the output of the above HTML code?

a) "Welcome""User"
b) Welcome User
c) "User"
d) no output due to incorrect markup

Correct Answer: c) "User"

Explanation:

HTML is a markup language used to structure web pages. It has predefined semantic
tags like <head> and <body>, each serving a specific purpose.

The <head> tag is used to contain meta-information such as <title>, <style>, or


<script>. Content inside <head> is not displayed in the browser window.

The <body> tag contains everything you want visible on the page — this is the part
that actually gets rendered in the browser window.

Let’s break it down:

• "Welcome" is placed inside the <head> section, which is not rendered visually.
• "User" is inside the <body>, which is rendered by the browser.

Therefore, the only visible content when this HTML page loads will be:

"User"
Key Points to Remember:

• Content inside <head> is not displayed on the web page.


• Only the content inside <body> is rendered visually.
• Text outside of tags is still shown if it’s inside <body>.
• HTML is very forgiving — even if tags are misused slightly, browsers attempt to
interpret them.

Exam Tip:

Always distinguish between the structural purpose of <head> and <body>. Only <body>
content appears in the rendered web page.

✅ Question 2

Renny has created an HTML page containing a link to navigate to demo.html page.
When the link is clicked, she wants the demo.html page to open in a new tab. What can
be used to achieve this?

Options:

a) <a href = "demo.html" target = "_top">About Infosys</a>


b) <a url = "demo.html" target = "_self">About Infosys</a>
c) <a href = "demo.html" action = "new">About Infosys</a>
d) <a href = "demo.html" target = "_blank">About Infosys</a>

Correct Answer: d) <a href = "demo.html" target = "_blank">About


Infosys</a>

Explanation:

HTML's <a> tag is used to create hyperlinks. The target attribute specifies where to open
the linked document.

Here’s a breakdown of target values:


• _blank → Opens the link in a new tab or window.
• _self → Default; opens in the same tab.
• _top → Opens in the full body of the window (used in framesets).
• _parent → Opens in the parent frame (also used with frames).

Now let’s analyze the options:

Option a: target="_top"
Incorrect – opens in full window, not a new tab.

Option b: url="..." is not valid syntax for anchor tags


Incorrect – url is not a valid attribute; should be href.

Option c: action="new"
Incorrect – action is used in <form> tags, not in <a>.

Option d: target="_blank"
Correct – opens the linked page in a new tab, which is what is required.

Key Points to Remember:

• The href attribute defines the link destination.


• The target="_blank" opens the link in a new browser tab or window.
• Always use valid attributes like href with anchor tags.

Exam Tip:

Use target="_blank" when you want links to open in new tabs. It's commonly used for
external links or additional resources.

✅ Question 3

The pattern attribute can be used with _________.

Options:

a) All input elements


b) with text input element
c) with number input element
d) no such attribute exists
Correct Answer: b) with text input element

Explanation:

The pattern attribute in HTML is used to define a regular expression that the <input>
element’s value is checked against when the form is submitted.

• It is specifically supported for inputs with type="text", type="search",


type="tel", type="url", and type="email".
• It is not supported with input types like number, date, range, etc.

Let’s evaluate each option:

Option a – All input elements


Incorrect – pattern is not valid with all input types (e.g., not for type="number").

Option b – with text input element


Correct – pattern is designed for text-based inputs to validate user input format
using regex.

Option c – with number input element


Incorrect – <input type="number"> does not support the pattern attribute. HTML5
ignores it for number types.

Option d – no such attribute exists


Incorrect – The pattern attribute does exist and is valid for form validation in HTML5.

Key Points to Remember:

• The pattern attribute works only with specific input types, primarily text-
based.
• It uses a regular expression to restrict the allowed input format.
• Validation using pattern happens on form submission.
• Combine it with title to provide a helpful tooltip for users (e.g., title="Only letters
allowed").

Exam Tip:
If you want to validate input format (e.g., 6-digit PIN, phone number, custom code),
use type="text" with the pattern attribute.

Example:

<input type="text" pattern="\d{6}" title="Enter a 6-digit number">

✅ Question 4

Emily has to create a form with an input field having 'Emily' as the default value and
also give the user a hint as 'Enter Your Name Here' when no text is entered in the
field.

Which of the following code snippets satisfy Emily's requirement?

Options:

a)
<label for="name">userName:</label><input type="text" id="name" value="Enter Your
Name Here" placeholder="Emily">

b)
<label for="name">userName:</label> <input type="text" id="name" value="Emily"
placeholder="Enter Your Name Here">

c)
<label for="name">userName:</label> <input type="text" id="name" value="Emily"
placeholder="Enter Your Name Here">Enter Your Name Here

d)
<label for="name">userName:</label><input type="text" id="name" value="Enter Your
Name Here" placeholder="Enter Your Name Here">Emily

Correct Answer: b)
<label for="name">userName:</label> <input type="text" id="name"
value="Emily" placeholder="Enter Your Name Here">

Explanation:

HTML input fields support two commonly used attributes to improve usability:
• value="..." – This sets the default value (pre-filled text in the field when the form
loads).
• placeholder="..." – This shows hint text when the input is empty and disappears
as soon as the user types something.

Let’s go through each option:

Option a:
Incorrect – value="Enter Your Name Here" sets the default value to the hint, and the
placeholder shows 'Emily', which is the reverse of what Emily wants.

Option b:
Correct – value="Emily" sets 'Emily' as the pre-filled value. placeholder="Enter Your
Name Here" shows the hint when the field is empty. Matches the requirement exactly.

Option c:
Incorrect – The extra text outside the input (Enter Your Name Here) will appear next
to the input field, not as a placeholder or default value.

Option d:
Incorrect – Again, the value and placeholder are set incorrectly, and extra static text
Emily is placed outside the input field.

Key Points to Remember:

• Use the value attribute to pre-fill input fields.


• Use the placeholder attribute to provide a hint for expected input when the field
is empty.
• Placeholders disappear when the user starts typing; they are not submitted with
the form unless manually typed in.
• Additional text outside the input tag is treated as regular HTML content, not
placeholder text.

Exam Tip:

Always differentiate between value (actual data) and placeholder (instructional hint).
For form usability, it's best to use both to guide users clearly.

✅ Question 5
Which of the following statements is true about the alt attribute (commonly called the
"alt tag") in HTML?

Statements:

1. Output of alt tag is displayed when image is available.


2. Output of alt tag is displayed when image is unavailable.

Options:

a) only 1
b) only 2
c) both 1 and 2
d) neither 1 or 2

Correct Answer: b) only 2

Explanation:

The alt attribute is used inside the <img> tag to provide alternative text for an image.

It serves two main purposes:

1. Accessibility: Screen readers read the alt text aloud for visually impaired users.
2. Fallback display: If the image cannot be displayed (e.g., file missing, broken
link, or slow network), the browser shows the alt text instead.

It does NOT display when the image is available and renders properly.

Let’s analyze each statement:

• Statement 1 – Incorrect:
The alt text is not shown if the image loads successfully.
• Statement 2 – Correct:
The alt text is shown when the image is unavailable or fails to load.

Key Points to Remember:

• alt="..." is short for alternative text.


• It is critical for accessibility and SEO.
• Shown only when the image cannot be displayed or when used by assistive
technologies.
• Not a tooltip — use title attribute for that.

Example:

<img src="logo.png" alt="Company Logo">

If logo.png is missing, users will see:


Company Logo

Exam Tip:

• Use alt text to describe the image meaningfully, not just "image" or "photo".
• If the image is purely decorative, alt="" is preferred for accessibility.

✅ Question 6

Julie has created the following HTML form. In this form, the user is currently able to
select multiple choices through the radio buttons.

How do you think this issue can be resolved?

<form>
User Name: <input type="text" required/>
Password: <input type="password" required/>
Male <input type="radio" value="Male" />
Female <input type="radio" value="Female" />
Others <input type="radio" value="Others" />
</form>

Options:

a) Usage of id attribute with same value in all the radio type inputs
b) Usage of name attribute with same value in all the radio type inputs
c) Usage of for attribute with same value in all the radio type inputs
d) Usage of value attribute having same name in all the radio type inputs

Correct Answer: b) Usage of name attribute with same value in all the radio
type inputs
Explanation:

Radio buttons in HTML are meant to allow only one selection from a group of related
options. However, this only works if all radio buttons in the group share the same
name attribute.

Let’s revise the current issue:

• Julie has created three <input type="radio"> elements, but none of them has
a name attribute, or they all have different names by default.
• Without a shared name, the browser treats each radio button as part of a
separate group — hence, multiple buttons can be selected simultaneously.

To fix it, assign the same name to all radio buttons like so:

Male <input type="radio" name="gender" value="Male" />


Female <input type="radio" name="gender" value="Female" />
Others <input type="radio" name="gender" value="Others" />

Option-by-Option Analysis:

Option a – id attribute:
id must be unique per element — using the same id causes invalid HTML and won’t
group the buttons.

Option b – name attribute:


Correct – the name groups radio buttons so only one can be selected at a time.

Option c – for attribute:


Used with <label> elements to associate labels with form controls — does not
control grouping.

Option d – value attribute:


The value attribute holds the data sent when submitted — it doesn’t affect selection
behavior.

Key Points to Remember:

• Radio buttons with the same name are treated as a group — only one option is
selectable at a time.
• value determines what is submitted, not grouping behavior.
• id should be unique; for is used for accessibility with labels.

Exam Tip:

Always use the same name attribute for a group of radio buttons to enforce mutually
exclusive selection — a common form-related HTML interview question.

✅ Question 7

What will be the output of the following HTML code when rendered in a browser?

<html>
<body>

welcome>user
</body>
</html>

Options:

a) welcome>user
b) welcome user
c) welcome
d) user

Correct Answer: a) welcome>user

(Note: Although in actual code it’s written as welcome>user, the browser will render it
exactly as written, displaying welcome>user, which matches option a.)

Explanation:

Let’s examine the HTML code:

<html>
<body>

welcome>user
</body>
</html>
• This line contains plain text: welcome>user
• The greater-than sign (>) is not part of any HTML tag here — it's simply treated
as text content.
• In HTML, unless special characters like <, >, &, etc., are used as part of actual
tag syntax, they are treated like normal characters when outside tags.

So the browser will render exactly:

welcome>user

Let’s analyze the options:

a) welcome>user
Correct – this is what the browser will show.

b) welcome user
Incorrect – the > is not removed or replaced with a space.

c) welcome
Incorrect – the entire string is shown, not truncated.

d) user
Incorrect – no logic in the code strips out the first word.

Key Points to Remember:

• Characters like > and < are special in HTML only when used as part of tag
syntax.
• Text between <body>...</body> that does not match a valid HTML element or
tag is displayed as-is.
• Browsers are generally forgiving with minor syntax errors and treat
unrecognized tags or characters as plain text.

Exam Tip:

If it looks like text and isn't a valid HTML element, the browser will likely just render it
as plain text. Don’t confuse symbols like > with tags unless they are part of <tag>
syntax.

✅ Question 8
Elon is developing a web application to display cricket scores of live matches. He
wants the web page to auto-refresh every 45 seconds.

Which of the following attributes of the <meta> tag will help him to achieve this
requirement?

Skeleton code of Elon’s web page:

<html>
<head>
<meta ________________ />
</head>
<body>

...
</body>
</html>

Options:

a) name = "keywords" content = "45"


b) http-equiv = "refresh" content = "45"
c) name = "refresh" content = "45"
d) name = "charset" content = "45"

Correct Answer: b) http-equiv = "refresh" content = "45"

Explanation:

The <meta> tag can be used to send additional information (metadata) to the browser.
To make a page auto-refresh, we use the http-equiv="refresh" attribute.

• http-equiv stands for HTTP equivalent.


• refresh tells the browser to reload the page.
• content="45" means the page should refresh after 45 seconds.

The full correct syntax would be:

<meta http-equiv="refresh" content="45">

This makes the page automatically reload every 45 seconds — perfect for live data like
cricket scores!
Option-by-Option Analysis:

Option a – name = "keywords"


Incorrect – used for SEO keywords; unrelated to refresh functionality.

Option b – http-equiv = "refresh"


Correct – this tells the browser to reload the page after a specified time.

Option c – name = "refresh"


Incorrect – name is not used for refreshing; http-equiv is required.

Option d – name = "charset"


Incorrect – charset specifies character encoding, not related to page refresh.

Key Points to Remember:

• Use <meta http-equiv="refresh" content="n"> to auto-refresh a page after n


seconds.
• The http-equiv attribute mimics an HTTP header.
• name is used for metadata like keywords, description, author — not for refresh.

Exam Tip:

To force a page to refresh periodically (like for news updates, live scores, etc.), use the
http-equiv="refresh" meta tag.
You can even redirect to a different URL like this:

<meta http-equiv="refresh" content="10; URL='homepage.html'">

(This would refresh and redirect after 10 seconds.)

✅ Question 9

Smith has created a table in HTML as shown below.


Fill in the blanks in the below code to achieve the output as expected:

<table border="2">
<tr>
<td <!--1--> >sun</td>
<td>rises</td>
<td>in the</td>
</tr>
<tr>

<td <!--2--> >East</td>


</tr>
<tr>
<td>keep</td>
<td>rising</td>

<td <!--3--> >and shining</td>


</tr>
<tr>

<td <!--4--> >like a sun</td>


</tr>
</table>

Options:

a) colspan="2", rowspan="2", rowspan="2", colspan="2"


b) rowspan="2", colspan="2", rowspan="2", colspan="2"
c) colspan="2", rowspan="2", colspan="2", rowspan="2"
d) rowspan="2", colspan="2", colspan="2", rowspan="2"

Correct Answer: a) colspan="2", rowspan="2", rowspan="2", colspan="2"

Explanation:

To understand how colspan and rowspan work:

• colspan="n" merges n columns horizontally.


• rowspan="n" merges n rows vertically.

Let’s break down the structure and purpose of each blank:

1. <!--1-->: The first <td> merges with the next cell in the same row
So it must be colspan="2"
2. <!--2-->: This <td> cell is placed directly under the one from above, and must
stretch across two columns
So it must be rowspan="2"
3. <!--3-->: This cell spans downward over two rows
So it must be rowspan="2"
4. <!--4-->: This cell spans across two columns
So it must be colspan="2"

Key Points to Remember:

• colspan="n" extends a cell across columns


• rowspan="n" extends a cell down multiple rows
• These attributes are especially useful for designing merged headers or
complex layouts in HTML tables.

Exam Tip:

If a table is not rendering as expected, check if colspan and rowspan are correctly used.
Matching column and row counts across rows is crucial for well-formed tables.

✅ Question 10

Which of the below elements is used to add multiple audio/video clips in HTML?

Options:

a) audio
b) video
c) link
d) source

Correct Answer: d) source

Explanation:

The <source> element in HTML is used within <audio> or <video> tags to provide
multiple file formats of the same media. This ensures browser compatibility — since
not all browsers support all media types.
The browser chooses the first supported file format and plays it.

Example:

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

• <video> is the container tag.


• <source> elements are used inside it to link multiple formats.

Option-by-Option Analysis:

a) audio
Incorrect – used as a container for audio playback, not for specifying multiple files.

b) video
Incorrect – also a container for video playback.

c) link
Incorrect – used for linking external CSS or favicon files, not media.

d) source
Correct – used inside audio/video to list different formats of the same clip.

Key Points to Remember:

• <source> provides fallback support for media formats.


• Multiple <source> tags can be placed inside a single <audio> or <video>
element.
• Browsers play the first compatible format they encounter.

Exam Tip:

Always include at least two file formats (e.g., .mp4, .ogg, .webm) using <source> to
ensure broad media support across different browsers.
✅ Question 11

Charlie has created the following HTML page:

<form action="demo.html" id="form1">


Username: <input type="text" required minlength="6" maxlength="15"/>
Password: <input type="password" pattern="[A-Za-z]{3,5}[!@][0-9]{2}"/>
<input type="submit"/>
</form>

Whenever he tries to test it, he faces the issue of having to satisfy all the validations
provided.

Select one or more ways in which he can solve this issue:

Options:

a) Use formnovalidate attribute in Line 4


b) Use novalidate attribute in Line 1
c) Remove the action attribute from form tag
d) Use formnovalidate attribute in all the input fields

Correct Answers:

a) Use formnovalidate attribute in Line 4


b) Use novalidate attribute in Line 1

Explanation:

HTML5 introduced client-side validation for form controls using attributes like
required, pattern, minlength, maxlength, etc.

If Charlie is testing the form and doesn’t want to trigger validations every time, he can
temporarily disable validation using two key attributes:

Option a – formnovalidate on submit button:


Used directly in the <input type="submit"> element to skip validation only when
that specific button is clicked.

<input type="submit" formnovalidate />

This is useful when a form has multiple submit buttons, and one is meant to skip
validation.

Option b – novalidate on <form> tag:

Disables all HTML5 validations for that form, no matter how many inputs or submit
buttons it contains.

<form action="demo.html" id="form1" novalidate>

Ideal for disabling validations during testing or for dynamic validation via JavaScript.

Option c – Removing the action attribute:

This does not disable validations. It only affects where the form submits to.
The form will still perform validation before submitting (to the same page, if no action is
provided).

Option d – formnovalidate on input fields:

Invalid – formnovalidate is an attribute for submit buttons only, not input fields.
So this would have no effect.

Key Points to Remember:

• Use formnovalidate on submit buttons to skip validation temporarily.


• Use novalidate on the form tag to globally disable validation.
• Validation is triggered before form submission.
• These attributes are helpful during development/testing.

Exam Tip:
To bypass client-side validation in HTML for testing purposes or optional submissions,
prefer:

• novalidate (form-level)
• formnovalidate (submit-button-level)

✅ Question 12

Observe the below output:

Zovian Space™ & Wisdor Tech are privately funded organizations that creates cutting
edge space suits.
Their suits can withstand a temperature between -200°F to 500°F.

Fill in the blanks with HTML code snippets to obtain the above output:

<p id="demo">
Zovian Space<!-- 1 --> <!-- 2 --> Wisdor Tech are privately funded organizations that
creates cutting edge
<!-- 3 --><br/>
Their suits can withstand a temperature between -200<!-- 4 --> to 500<!-- 5 -->F.
</p>

Options:

a)
1: &tm; 2: &hand; 3: <em>space suits</em> 4 and 5: <small>o</small>

b)
1: ™ 2: & 3: <mark>space suits</mark> 4 and 5: <sup>o</sup>

c)
1: <sup>TM</sup> 2: /&; 3: <ins>space suits</ins> 4 and 5: <sup>O</SUP>

d)
1: ™ 2: &; 3: <mark>space suits</mark> 4 and 5: <sub>o</sub>

Correct Answer: b)

1: ™ 2: & 3: <mark>space suits</mark> 4 and 5: <sup>o</sup>


Explanation:

Let’s match each blank to the correct code that will produce the desired output:

1 →™ symbol:

• HTML allows using the character ™ directly, or you can use the entity &trade; or
&#8482;.
• In the options, Option b and d use ™ directly — which works in most browsers.

Correct value: ™

2 → ampersand (&) between the two company names:

• To show &, we must use the HTML entity: &amp;


• But here, Option b simplifies it as just &, which renders fine in browsers.

Acceptable value: &

3 → highlighted or emphasized text:

• The phrase “space suits” is visually emphasized in the output.


• <mark> highlights the text, matching the expected output better than <em> or
<ins>.

Correct tag: <mark>space suits</mark>

4 and 5 → Superscript for ° (degree):

• The character ° can be written as &deg;, or visually mimicked using


<sup>o</sup>.
• Option b uses <sup>o</sup> to simulate the ° symbol.

Correct format: <sup>o</sup>


Final Filled Code:

<p id="demo">
Zovian Space™ & Wisdor Tech are privately funded organizations that creates cutting
edge
<mark>space suits</mark><br/>
Their suits can withstand a temperature between -200<sup>o</sup> to
500<sup>o</sup>F.
</p>

Key Points to Remember:

• ™ and & can be rendered directly or via their HTML entities (&trade;, &amp;)
• <mark> highlights text, <em> italicizes, <ins> underlines
• Use <sup> for superscript (like degrees °), and <sub> for subscript

Exam Tip:

When you want to simulate symbols or formatting like degree, trademarks, or


highlights:

• Use <sup> for degree (<sup>o</sup> or &deg;)


• Use <mark> for highlights
• Use entities or direct characters for symbols like ™, &

✅ Question 13

What information does the <!DOCTYPE> declaration provide in an HTML


document?

Options:

a) Version of HTML
b) Features of HTML
c) Specifications of HTML
d) All of the above
Correct Answer: a) Version of HTML

Explanation:

The <!DOCTYPE> declaration is an instruction to the browser about which version of


HTML the page is written in, so that the browser can render the page correctly.

In modern HTML5, the declaration is simple:

<!DOCTYPE html>

It tells the browser to use HTML5 rendering mode.

It does not provide actual feature or specification details — it only helps the
browser interpret the rest of the code based on a known version.

Option-by-Option Analysis:

a) Version of HTML
Correct – This is the primary purpose of <!DOCTYPE>.

b) Features of HTML
Incorrect – It doesn't list or describe features of the HTML version.

c) Specifications of HTML
Incorrect – It doesn’t define or include HTML specifications.

d) All of the above


Incorrect – Only the version is conveyed, not all listed elements.

Key Points to Remember:

• The <!DOCTYPE> declaration must be the very first thing in the HTML
document.
• It’s not an HTML tag, but a declaration.
• It tells the browser to use standards-compliant mode instead of quirks mode.
• In HTML5, it is written as <!DOCTYPE html> (case-insensitive).
Exam Tip:

Always include <!DOCTYPE html> at the top of your HTML documents to ensure the
browser renders in standards mode, especially when targeting HTML5.

✅ Question 14

Rocky wants to add an image named tea.jpeg on his HTML page.


He also wants to make sure that if the browser is unable to load the image, a
description of the image should be displayed instead.

Select the appropriate way to achieve his requirement.

Options:

a) <img src="tea.jpeg"> A tea plantation on hills of Munnar </img>


b) <img src="tea.jpeg" value="A tea plantation on hills of Munnar"/>
c) <img src="tea.jpeg" alt="A tea plantation on hills of Munnar"/>
d) <img alt="A tea plantation on hills of Munnar"> <source src="tea.jpeg"
type="image/jpeg"> </img>

Correct Answer: c) <img src="tea.jpeg" alt="A tea plantation on hills of


Munnar"/>

Explanation:

The <img> tag in HTML is used to embed an image into a webpage.

• The src attribute specifies the path of the image file.


• The alt attribute provides alternative text to be displayed if the image cannot
be loaded (e.g., file missing, user has disabled images, accessibility readers).

Thus, using the alt attribute meets Rocky's requirement exactly.

Option-by-Option Analysis:
a) <img src="tea.jpeg"> A tea plantation on hills of Munnar </img>
Incorrect –

• The <img> tag is a self-closing tag.


• Adding text inside <img> is invalid in HTML.

b) <img src="tea.jpeg" value="A tea plantation on hills of Munnar"/>


Incorrect –

• value attribute is not valid for <img> tags.

c) <img src="tea.jpeg" alt="A tea plantation on hills of Munnar"/>


Correct –

• alt provides the fallback description if the image cannot be displayed.

d) <img alt="A tea plantation on hills of Munnar"> <source src="tea.jpeg"


type="image/jpeg"> </img>
Incorrect –

• <source> tag is used **inside <audio> or <video>, not with <img>.


• <img> cannot contain <source>.

Key Points to Remember:

• Use src to specify the image path.


• Use alt to specify fallback text for accessibility and error handling.
• <img> is a self-closing tag in HTML5 (<img ... />).

Example:

<img src="tea.jpeg" alt="A tea plantation on hills of Munnar">

Exam Tip:

Always provide a meaningful alt description for images to improve:

• Accessibility (screen readers)


• SEO (search engines index alt text)
• User experience when images fail to load
✅ Question 15

Jimmy has created the following HTML page:

<form action="About.html" method="post">


Message: <input type="text" required/>
<a href="Contact.html" target="_blank">
<input type="button" value="Submit"/>
</a>
</form>

What will happen when the user clicks on the "Submit" button?

Options:

a) User will be navigated to About.html


b) User will be navigated to Contact.html
c) The navigation is browser dependent
d) User will not be navigated to any page

Correct Answer: b) User will be navigated to Contact.html

Explanation:

Let’s understand the structure:

• The <form> tag is designed to submit data when a submit-type button


(<input type="submit">) is clicked.
• However, inside the form, Jimmy used:

<a href="Contact.html" target="_blank">


<input type="button" value="Submit"/>
</a>

• The <input type="button"> is NOT a submit button; it is a generic button


that does nothing by itself unless attached to a script or a link.
• Here, the <input type="button"> is wrapped inside an <a> tag (<a
href="Contact.html">).
• Therefore, clicking the button will behave like clicking the link → It will open
Contact.html in a new tab (target="_blank").

Hence, the user will navigate to Contact.html, not submit the form to About.html.

Option-by-Option Analysis:

a) About.html
Incorrect – No form submission happens because the button is not of type "submit".

b) Contact.html
Correct – Because the <input type="button"> is wrapped inside <a>, clicking it
triggers link navigation.

c) Browser dependent
Incorrect – Behavior is consistent across browsers.

d) No navigation
Incorrect – Clicking the button will navigate, because of the anchor link.

Key Points to Remember:

• <input type="submit"> → triggers form submission.


• <input type="button"> → does nothing unless scripted or linked.
• Wrapping a button inside <a> will cause it to behave like a link.
• Always match the correct button type (submit or button) depending on the
intended behavior.

Exam Tip:

If you want to submit a form when the user clicks a button, use:

<input type="submit" value="Submit">

If you want just a clickable button without submitting, use type="button", and attach
JavaScript or link it appropriately.

✅ Question 16
John, a web developer, wants to group all navigation links in his web page.

Which of the below semantic tags can be used to meet John’s requirement?

Options:

a) <nav>
b) <navbar>
c) <header>
d) <a>

Correct Answer: a) <nav>

Explanation:

Semantic HTML introduces meaning to the structure of a web page, making it easier
for browsers, search engines, and developers to understand the role of different parts.

The <nav> element is a semantic tag that is specifically designed to group


navigation links like:

• Home
• About Us
• Services
• Contact
• FAQs

It helps screen readers and search engines identify important navigation areas
clearly.

Example:

<nav>
<a href="home.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</nav>

Option-by-Option Analysis:
a) <nav>
Correct – specifically designed for navigation links grouping.

b) <navbar>
Incorrect –
There is no <navbar> element in HTML5. Developers may use the class name "navbar"
in CSS frameworks like Bootstrap, but it's not an official HTML tag.

c) <header>
Incorrect –
<header> defines introductory content, headings, logos, etc., not specifically for
navigation links.

d) <a>
Incorrect –
<a> defines a single hyperlink, not a container to group multiple links semantically.

Key Points to Remember:

• <nav> is used to group primary navigation links on a web page.


• <header> contains introductory content but not necessarily navigation.
• <a> represents a single hyperlink.
• <navbar> does not exist in standard HTML — only used as a CSS class name.

Exam Tip:

When asked about semantic containers for navigation menus, always choose <nav>.
Semantic tags improve accessibility, SEO, and overall code clarity.

✅ Question 17

John wants to write the HTML code that gives the following output:

IoT is a system of interrelated computing devices, mechanical and digital machines,


objects, animals or people that are provided with unique identifiers and the ability to
transfer data over a network without requiring human-to-human / computer interaction

Which of the following HTML code snippets will produce the above output?
Options:

a)

<html><body><p><abbr title="The Internet of Things">IoT</abbr> is a system of


interrelated computing devices, mechanical and digital machines, objects, animals or
people <em>that are provided with unique identifiers and the ability to transfer data
over a network without requiring </em> <mark>human-to
<sub>human</sub><sub>/</sub> computer interaction</sub></mark></body></html>

b)

<html><body><p><abbr title="The Internet of Things">IoT</abbr> is a system of


interrelated computing devices, mechanical and digital machines, objects, animals or
people <em>that are provided with unique identifiers and the ability to transfer data
over a network without requiring </em> human-to <sub>human</sub><sub>/</sub>
computer interaction </sub></sub></body></html>

c)

<html><body><p><abbr title="The Internet of Things">IoT</abbr> is a system of


interrelated computing devices, mechanical and digital machines, objects, animals or
people <em>that are provided with unique identifiers and the ability to transfer data
over a network without requiring </em> human-to
<sub>human</sub></sub><sub>/</sub> computer interaction </sub></body></html>

d)

<html><body><p><abbr title="The Internet of Things">IoT</abbr> is a system of


interrelated computing devices, mechanical and digital machines, objects, animals or
people that are provided with unique identifiers and the ability to transfer data over a
network without requiring human-to <sub>human</sub><sub>/</sub> computer
interaction </sub></body></html>

Correct Answer: d)

Explanation:

Let's break down the important pieces required by the output:

1. <abbr> is used for abbreviations:


o <abbr title="The Internet of Things">IoT</abbr>
2. The main text must not include unwanted highlights or underlines.
3. Subscript formatting (<sub>) is only needed for:
o The words after "human-to", specifically for "human", the "/" character,
and "computer interaction".
4. Tag Structure Must Be Valid:
o Properly closed tags.
o No unnecessary <mark> or <em> on unrelated parts.

Option-by-Option Analysis:

a)
Incorrect –
Uses <mark>, which highlights text unnecessarily. Output will not match.

b)
Incorrect –
Closing tags are mismatched (</sub></sub>), leading to rendering issues.

c)
Incorrect –
There is an extra closing </sub>, making HTML invalid.

d)
Correct –
All tags are valid and correctly structured.
Only "human-to-human / computer interaction" uses <sub> formatting properly.

Key Points to Remember:

• <abbr> is used for abbreviations and expands on hover.


• <sub> makes text appear below the normal line (subscript).
• Correct nesting and closing of tags are mandatory for proper HTML rendering.
• Avoid extra emphasis (<em>, <mark>) unless explicitly required.

Exam Tip:
Always match opening and closing tags carefully when handling nested elements like
<abbr>, <sub>, <mark>, etc.
Any mismatch can cause browser rendering issues and unexpected formatting.

✅ Question 18

What do you expect the below HTML code to display in the browser?

<article>
Its all about Infy!!
</article>
<footer>
copyright
</footer>
<header>
Keep your heads always High!!
</header>
<section>
dont dare alter my section!!
</section>

Options:

a) Keep your heads always High!! dont dare alter my section!! Its all about Infy!!
copyright
b) Its all about Infy!! copyright Keep your heads always High!! dont dare alter my
section!!
c) dont dare alter my section!! Keep your heads always High!! copyright Its all about
Infy!!
d) Its all about Infy!! Keep your heads always High!! copyright dont dare alter my
section!!

Correct Answer: b) Its all about Infy!! copyright Keep your heads always High!!
dont dare alter my section!!
Explanation:

Let’s understand the flow:

• HTML by default displays content in the order in which the elements appear in
the code (unless CSS is applied to change layout).
• Semantic tags like <header>, <footer>, <section>, <article> simply define
meaningful blocks but do not affect the order of content rendering.
• Thus, the browser renders the elements sequentially as:
1. Article: "Its all about Infy!!"
2. Footer: "copyright"
3. Header: "Keep your heads always High!!"
4. Section: "dont dare alter my section!!"

So, the displayed output will be:

Its all about Infy!! copyright Keep your heads always High!! dont dare alter my section!!

Option-by-Option Analysis:

a)
Incorrect – Changes order (header and section appear first).

b)
Correct – Matches the exact top-to-bottom flow of the code.

c)
Incorrect – Section is coming first here, which is wrong.

d)
Incorrect – Header comes before footer in this option, which is incorrect according
to the original code.

Key Points to Remember:

• HTML renders elements in the order they appear in code unless modified by
CSS.
• Tags like <header>, <section>, <article>, and <footer> are semantic tags
— they define meaning but not rendering order.
• These tags are very useful for SEO, accessibility, and page structure but not for
visual arrangement unless styled.
Exam Tip:

When no external CSS or JavaScript is mentioned, assume that HTML content is


displayed sequentially based on its code structure.

✅ Question 19

Observe the below output:

Without entering any value, the user is able to submit the form even though the
required attribute is present.

<form action="#" method="GET">


Select Car: <select required>
<option>--Select--</option>
<option name="car" value="volvo">Volvo</option>
<option name="car" value="saab">Saab</option>
<option name="car" value="mercedes">Mercedes</option>
<option name="car" value="audi">Audi</option>
</select><br/>
<button type="submit">Buy</button>
</form>

How can this issue be resolved?

Options:

a) Provide a required attribute in Line 9


b) Provide a disabled attribute in Line 3
c) Provide a name="car" property in Line 3
d) Provide value="" property in Line 3

Correct Answer: d) Provide value="" property in Line 3


Explanation:

The issue is that the first option ("--Select--") does not have an empty value, so even
when it is selected, the browser treats it as a valid selection.

When a <select> element has the required attribute:

• The selected option must have a non-empty value for the form to be
considered valid.
• If the default option ("--Select--") has some text but no value="", the form
mistakenly thinks something is selected and allows submission.

To fix it, update the first option as:

<option value="">--Select--</option>

Now, if the user doesn't actively pick a car, the browser sees an empty value and blocks
form submission.

Option-by-Option Analysis:

a) Provide required in Line 9:


Incorrect – Required is already correctly provided in the <select>, and Line 9 is an
<option>, not the select.

b) Provide disabled in Line 3:


Incorrect – Disabling the select box will prevent the user from choosing anything at
all.

c) Provide name="car" in Line 3:


Incorrect – The name attribute is needed to identify form data on submission but
does not affect validation.

d) Provide value="" in Line 3:


Correct – Ensures the default choice is invalid, enforcing user selection.

Key Points to Remember:

• Always provide value="" for placeholder options like "--Select--" when using
required.
• The first default option should act as a prompt, not a valid selection.
• <select> validation checks if a non-empty value has been selected.

Corrected Code:

<option value="">--Select--</option>

Exam Tip:

When using <select required>, make sure the default visible option has value=""
so the browser forces the user to make a selection before submitting.

✅ Question 20

Chris has a video on his webpage and he wants to display an image until the video
starts to play.
Which of the following will help him achieve this?

Options:

a)

<video controls poster="class_diagram.png">


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

b)

<video controls>
<source src="OORelationships.mp4" type="video/mp4" poster="class_diagram.png">
</video>

c)

<video controls img="class_diagram.png">


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

d)

<video controls>
<source src="OORelationships.mp4" type="video/mp4" poster="class_diagram.png">
<img src="class_diagram.png" alt="Class Diagram is Invalid!!!">
</source>
</video>

Correct Answer: a)

Explanation:

In HTML5, the <video> element is used to embed video content into a webpage.

• The poster attribute is applied directly to the <video> tag.


• It specifies an image file (poster) to be shown before the video starts playing.
• Once the video starts, the poster image disappears.

Correct usage example:

<video controls poster="class_diagram.png">


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

Option-by-Option Analysis:

a) <video controls poster="class_diagram.png"> ... </video>


Correct – poster attribute correctly applied to <video> element.

b) <source poster="..."> inside <video>


Incorrect – poster attribute is not valid for <source> tags.

c) <video img="...">
Incorrect – img is not a valid attribute for <video>.

d) <video><source> + <img>
Incorrect – Placing <img> inside <source> and <video> is invalid HTML structure.

Key Points to Remember:


• Use the poster attribute only on the <video> tag.
• poster="image.png" sets a preview thumbnail for the video before play starts.
• <source> defines video formats, not visual thumbnails.

Correct pattern:

<video controls poster="thumbnail.png">


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

Exam Tip:

For customizing video players, remember:

• Use <source> for multiple formats.


• Use poster for a thumbnail.
• Attributes like controls, autoplay, muted, and loop can enhance user experience.

✅ Question 21

What will be the valid range of values that can be entered for the input field
named "weight"?

<form action="#">
Weight:
<input type="number" id="" max="71" min="20" step="2.5">
<button type="submit">Submit</button>
</form>

Options:

a) 20 to 71
b) 20 to 70
c) 20 to 68.5
d) All real numbers

Correct Answer: a) 20 to 71
Explanation:

Let's understand the attributes used:

• min="20": The minimum value allowed is 20.


• max="71": The maximum value allowed is 71.
• step="2.5": The allowed increments between values must be in multiples of 2.5.

The range is between 20 and 71 inclusive.


The values must increase or decrease by 2.5 units at a time.

How the values progress:

Starting at 20:

• 20
• 22.5
• 25
• 27.5
• 30
• 32.5
• 35
• 37.5
• 40
• 42.5
• 45
• 47.5
• 50
• 52.5
• 55
• 57.5
• 60
• 62.5
• 65
• 67.5
• 70

Now if you add 2.5 to 70, you get 72.5, which exceeds the max value (71).
Hence, 71 itself must be entered directly (if allowed manually), or browser may
restrict it based on step size mismatch.

Therefore, the valid range is from 20 to 71.


Option-by-Option Analysis:

a) 20 to 71
Correct – minimum 20, maximum 71.

b) 20 to 70
Incorrect – 71 is allowed as per the max attribute.

c) 20 to 68.5
Incorrect – 68.5 is a wrong limit based on 2.5 steps; also max is 71.

d) All real numbers


Incorrect – range is specifically restricted between 20 and 71 with 2.5 step
increments.

Key Points to Remember:

• min and max attributes define the allowed range.


• step defines allowed incremental jumps.
• The browser may restrict form submission if an invalid step or value outside
min/max is entered.

Example:

<input type="number" min="10" max="50" step="5">

Valid values would be: 10, 15, 20, 25, 30, 35, 40, 45, 50.

Exam Tip:

When both min, max, and step are used:

• Ensure the value falls within the range.


• Ensure the value is a valid multiple of step relative to min.

You might also like