Multiple
Choice Questions (MCQ -6)
Adding
Images to Web Pages
1. Which HTML tag is used
to insert an image into a web page?
o a) <image>
o b) <img>
o c) <pic>
o d) <src>
o Answer: b) <img>
2. Which attribute is used
to specify the source of an image in HTML?
o a) href
o b) src
o c) link
o d) url
o Answer: b) src
3. What does the alt
attribute in the <img> tag provide?
o a) The image's file
format
o b) A title for the image
o c) A description that
appears if the image cannot be displayed
o d) A hyperlink to
another page
o Answer: c) A description that
appears if the image cannot be displayed
4. Which of the following
is true about the width and height attributes in the <img> tag?
o a) They are required
attributes for the <img> tag.
o b) They can be used to
set the image size in pixels.
o c) They automatically
adjust the image size to fit the screen.
o d) They are used to link
the image to another page.
o Answer: b) They can be used to
set the image size in pixels.
5. What is the purpose of
the srcset attribute in the <img> tag?
o a) To define the
fallback image in case the original fails to load
o b) To specify multiple
image sources for different device resolutions
o c) To add a caption to
the image
o d) To link the image to
an external website
o Answer: b) To specify multiple
image sources for different device resolutions
6. Which of the following
is NOT a valid image format for the web?
o a) JPEG
o b) PNG
o c) SVG
o d) DOCX
o Answer: d) DOCX
7. Which CSS property is
commonly used to make an image responsive?
o a) display: block;
o b) max-width: 100%;
o c) position: relative;
o d) visibility: hidden;
o Answer: b) max-width: 100%;
8. In the <picture>
element, what does the <source> tag do?
o a) Provides an alternative
text for the image
o b) Specifies different
images based on the screen size or type
o c) Sets the background
color of the image
o d) Links the image to
another webpage
o Answer: b) Specifies different
images based on the screen size or type
9. What happens if the alt
attribute is not included in the <img> tag?
o a) The image will not
display
o b) A default image will
be shown
o c) Screen readers will
skip the image, making it less accessible
o d) The image will
automatically link to the homepage
o Answer: c) Screen readers will
skip the image, making it less accessible
10.
Which attribute would you use to ensure an image opens in a new
tab when clicked?
o a) rel="_new"
o b)
target="_blank"
o c) href="_tab"
o d) link="_new"
o Answer: b)
target="_blank"
11.
Which HTML element is used to provide a fallback image when using
the <picture> element?
o a) <img>
o b) <source>
o c) <fallback>
o d) <alt>
o Answer: a) <img>
12.
What does the title attribute do when used with an <img>
tag?
o a) Displays a tooltip
when the mouse hovers over the image
o b) Replaces the alt text
o c) Changes the image
format
o d) Aligns the image to
the center of the page
o Answer: a) Displays a tooltip
when the mouse hovers over the image
13.
How do you ensure an image is displayed proportionally when
resized?
o a) Set only the width
attribute
o b) Set only the height
attribute
o c) Set both width and
height attributes to auto
o d) Set either width or
height, and the other dimension will adjust automatically
o Answer: d) Set either width or
height, and the other dimension will adjust automatically
14.
Which HTML attribute should be used to provide a description of an
image to search engines?
o a) description
o b) alt
o c) title
o d) caption
o Answer: b) alt
15.
Which file format is best for images with transparent backgrounds?
o a) JPEG
o b) PNG
o c) BMP
o d) TIFF
o Answer: b) PNG
16.
When using the srcset attribute, what does the w descriptor
specify?
o a) The width of the
image in pixels
o b) The height of the
image in pixels
o c) The weight of the
image file
o d) The width of the
viewport
o Answer: a) The width of the
image in pixels
17.
What is the purpose of the lazy attribute in the <img> tag?
o a) To load the image
after the entire page has loaded
o b) To prevent the image
from being displayed
o c) To optimize image
loading by loading only when the image is in the viewport
o d) To delay the image
loading until a specific event occurs
o Answer: c) To optimize image
loading by loading only when the image is in the viewport
18.
What does the object-fit CSS property do when applied to an image?
o a) It resizes the image
to fit the container's dimensions.
o b) It changes the image
format.
o c) It defines how the
content of the image should be resized to fit the container.
o d) It aligns the image
to the center of the container.
o Answer: c) It defines how the
content of the image should be resized to fit the container.
19.
How can you center an image horizontally using HTML or CSS?
o a) Set the align
attribute to center
o b) Use text-align:
center; on the parent element
o c) Use margin: auto; on
the image
o d) Both b and c
o Answer: d) Both b and c
20.
Which attribute is used to specify a URL to open when an image is
clicked?
o a) src
o b) href
o c) onclick
o d) link
o Answer: b) href
21.
Which HTML element is used to define multiple sizes of the same
image for different screen sizes or resolutions?
o a) <img>
o b) <source>
o c) <picture>
o d) <link>
o Answer: c) <picture>
22.
Which attribute in the <img> tag specifies the width of an
image in relation to its natural size?
o a) width
o b) max-width
o c) src
o d) aspect-ratio
o Answer: a) width
23.
What happens when the src attribute of an <img> tag is left
empty?
o a) A broken image icon
is displayed.
o b) The browser loads a
default image.
o c) The browser shows a
blank space.
o d) The alt text is
displayed in place of the image.
o Answer: a) A broken image icon
is displayed.
24.
Which of the following is NOT an advantage of using vector images
(e.g., SVG) on web pages?
o a) Scalability without
loss of quality
o b) Smaller file size for
complex images
o c) Ability to edit image
colors via CSS
o d) Smaller file size for
simple graphics
o Answer: b) Smaller file size
for complex images
25.
When using the <img> tag, which attribute is used to specify
the path to the image file?
o a) href
o b) src
o c) link
o d) path
o Answer: b) src
26.
Which of the following methods can be used to display an image as
a background in HTML?
o a) Using the <img>
tag
o b) Using the
background-image CSS property
o c) Using the src
attribute in the <div> tag
o d) Using the picture tag
o Answer: b) Using the
background-image CSS property
27.
Which CSS property can be used to prevent an image from being
dragged by the user?
o a) user-select: none;
o b) pointer-events: none;
o c) draggable: false;
o d) user-drag: none;
o Answer: d) user-drag: none;
28.
What will happen if you use a non-existent image URL in the src
attribute of an <img> tag?
o a) The page will not
load.
o b) A broken image icon
will be displayed.
o c) The browser will
search for a similar image.
o d) The browser will
ignore the <img> tag.
o Answer: b) A broken image icon
will be displayed.
29.
Which attribute in the <img> tag is primarily used for
search engine optimization (SEO)?
o a) title
o b) alt
o c) src
o d) class
o Answer: b) alt
30.
To make an image responsive in HTML, which CSS property is most
commonly used?
o a) position: relative;
o b) max-height: 100%;
o c) width: 100%;
o d) display: block;
o Answer: c) width: 100%;
31.
Which HTML attribute is used to prevent an image from being
displayed in a browser?
o a) hidden
o b) display
o c) visibility
o d) none
o Answer: a) hidden
32.
When using the srcset attribute, what does the x descriptor
specify?
o a) The exact width of
the image in pixels
o b) The pixel density of
the image
o c) The height of the
image
o d) The aspect ratio of
the image
o Answer: b) The pixel density
of the image
33.
Which HTML attribute is necessary to load an image only when it is
in the viewport?
o a)
loading="lazy"
o b)
lazyload="true"
o c)
viewport="true"
o d)
defer="true"
o Answer: a)
loading="lazy"
34.
Which CSS property can be used to control how an image fits within
its container, especially when the image is larger than the container?
o a) fit-content
o b) object-fit
o c) background-size
o d) overflow
o Answer: b) object-fit
35.
Which HTML element should you use to group a set of images
together for better layout control?
o a) <div>
o b) <figure>
o c) <section>
o d) <img>
o Answer: a) <div>
36.
How do you add a caption to an image in HTML?
o a) Using the alt
attribute
o b) Using the
<caption> tag
o c) Using the
<figcaption> tag inside a <figure> tag
o d) Using the title
attribute
o Answer: c) Using the
<figcaption> tag inside a <figure> tag
37.
Which of the following formats is generally best for photographs
on the web?
o a) GIF
o b) PNG
o c) SVG
o d) JPEG
o Answer: d) JPEG
38.
What is the correct syntax to use an image as a link in HTML?
o a) <a
src="image.jpg">Link</a>
o b) <a
href="url"><img src="image.jpg"
alt="description"></a>
o c) <img
href="url" src="image.jpg">
o d) <img
src="image.jpg" link="url">
o Answer: b) <a
href="url"><img src="image.jpg" alt="description"></a>
39.
What is the main purpose of the usemap attribute in the
<img> tag?
o a) To define a clickable
area on the image
o b) To apply a CSS map to
the image
o c) To define a series of
image links
o d) To link the image to
a map API
o Answer: a) To define a
clickable area on the image
40.
Which attribute in the <img> tag is used to define the
relationship between the current document and the linked image?
o a) rel
o b) role
o c) alt
o d) target
o Answer: a) rel
41.
Which of the following is the correct way to specify an image's
dimensions in pixels using the <img> tag?
o a) <img
src="image.jpg" width="300px" height="200px">
o b) <img
src="image.jpg" width="300" height="200">
o c) <img
src="image.jpg" dimensions="300x200">
o d) <img
src="image.jpg" size="300x200">
o Answer: b) <img
src="image.jpg" width="300" height="200">
42.
Which of the following HTML attributes is used to specify a
default image when the specified image cannot be loaded?
o a) default
o b) placeholder
o c) onerror
o d) alt
o Answer: c) onerror
43.
Which image format is best suited for logos or images with solid
colors and simple shapes?
o a) JPEG
o b) GIF
o c) PNG
o d) BMP
o Answer: c) PNG
44.
What is the purpose of the alt attribute in the <img> tag?
o a) To provide a
description of the image for screen readers
o b) To change the size of
the image
o c) To set the alignment
of the image
o d) To display a tooltip
when the image is hovered
o Answer: a) To provide a
description of the image for screen readers
45.
Which HTML element can be used to define a clickable area inside
an image?
o a) <area>
o b) <map>
o c) <click>
o d) <region>
o Answer: a) <area>
46.
Which CSS property is often used to make an image responsive by
ensuring it scales to the width of its container?
o a) min-width
o b) max-width
o c) width: 100%;
o d) height: auto;
o Answer: c) width: 100%;
47.
When using the <picture> element, what is the purpose of the
<source> tag?
o a) To define different
image formats for different devices
o b) To add alternative
text to an image
o c) To specify an image's
dimensions
o d) To preload an image
o Answer: a) To define different
image formats for different devices
48.
How can you make an image accessible for visually impaired users?
o a) By using the title
attribute
o b) By setting the width
and height attributes
o c) By including an alt
attribute with a descriptive text
o d) By using
high-resolution images
o Answer: c) By including an alt
attribute with a descriptive text
49.
What will happen if an image’s alt attribute is empty or missing?
o a) The browser will not
display the image.
o b) The browser will
display a broken image icon.
o c) The image will be
displayed without any alternative text.
o d) The browser will show
the image's file path.
o Answer: c) The image will be
displayed without any alternative text.
50.
Which attribute should be used to specify the URL of an image to
be used as a fallback when using the <picture> element?
o a) fallback-src
o b) default-src
o c) src
o d) img
o Answer: c) src
51.
Which HTML attribute is used to make an image a clickable link?
o a) href
o b) src
o c) link
o d) alt
o Answer: a) href
52.
What happens if the width and height attributes of an <img>
tag are not specified?
o a) The image will not be
displayed.
o b) The image will use
its original dimensions.
o c) The image will
automatically fit to the size of its container.
o d) The image will be
stretched to fill the page.
o Answer: b) The image will use
its original dimensions.
53.
Which of the following is a valid reason for using the srcset
attribute in an <img> tag?
o a) To load multiple
images at once
o b) To specify
alternative images for different screen sizes or resolutions
o c) To define multiple
image formats
o d) To add additional
descriptive text to the image
o Answer: b) To specify
alternative images for different screen sizes or resolutions
54.
Which CSS property is used to control the appearance of an image's
border?
o a) border-style
o b) border-radius
o c) border-image
o d) border-color
o Answer: c) border-image
55.
What is the purpose of the crossorigin attribute in the
<img> tag?
o a) To load images from
different domains with CORS (Cross-Origin Resource Sharing) support
o b) To prevent images
from being copied
o c) To ensure images are
loaded asynchronously
o d) To add security to
the image loading process
o Answer: a) To load images from
different domains with CORS (Cross-Origin Resource Sharing) support
56.
Which HTML tag is used to include a vector graphic on a webpage?
o a) <img>
o b) <svg>
o c) <graphic>
o d) <picture>
o Answer: b) <svg>
57.
How can you add a caption below an image in HTML?
o a) Use the
<caption> tag directly after the <img> tag
o b) Wrap the <img>
tag inside a <figure> tag and use the <figcaption> tag for the
caption
o c) Use the alt attribute
for the caption
o d) Use the title
attribute for the caption
o Answer: b) Wrap the
<img> tag inside a <figure> tag and use the <figcaption> tag
for the caption
58.
Which image format supports both lossless compression and
transparency?
o a) JPEG
o b) PNG
o c) GIF
o d) BMP
o Answer: b) PNG
59.
What does the loading attribute in the <img> tag do when set
to "lazy"?
o a) It loads the image
immediately.
o b) It delays loading the
image until the user clicks on it.
o c) It loads the image
only when it is in the viewport.
o d) It prevents the image
from loading.
o Answer: c) It loads the image
only when it is in the viewport.
60.
Which attribute in the <img> tag is used to specify an image
map that defines clickable areas?
o a) usemap
o b) map
o c) area
o d) coords
o Answer: a) usemap
61.
Which HTML attribute should be used to specify the path to an
image file?
o a) href
o b) src
o c) alt
o d) link
o Answer: b) src
62.
Which HTML element is used to provide different image resources
for different screen sizes or devices?
o a) <img>
o b) <source>
o c) <picture>
o d) <figure>
o Answer: c) <picture>
63.
What happens if the alt attribute is not provided for an image?
o a) The image will not be
displayed.
o b) The browser will
display a broken image icon.
o c) Screen readers may
not be able to describe the image to visually impaired users.
o d) The image will have a
default description of "Image."
o Answer: c) Screen readers may
not be able to describe the image to visually impaired users.
64.
Which of the following image formats is best suited for animated
images?
o a) JPEG
o b) PNG
o c) GIF
o d) SVG
o Answer: c) GIF
65.
What is the purpose of the title attribute in the <img> tag?
o a) To specify the URL of
the image
o b) To provide additional
information that appears as a tooltip when the image is hovered
o c) To set the title of
the image in the browser's title bar
o d) To define the image's
dimensions
o Answer: b) To provide
additional information that appears as a tooltip when the image is hovered
66.
How can you make an image a clickable link to another webpage?
o a) Wrap the <img>
tag inside an <a> tag
o b) Add an href attribute
directly to the <img> tag
o c) Use the src attribute
in the <img> tag
o d) Use the link
attribute in the <img> tag
o Answer: a) Wrap the
<img> tag inside an <a> tag
67.
Which attribute in the <img> tag can be used to specify the
image's aspect ratio for better layout control?
o a) aspect-ratio
o b) preserveAspectRatio
o c) ratio
o d) srcset
o Answer: b) preserveAspectRatio
68.
How do you prevent an image from being displayed entirely in HTML?
o a) Omit the src
attribute
o b) Set the display
property to none in CSS
o c) Use the hidden
attribute in the <img> tag
o d) Set the visibility
attribute to hidden
o Answer: c) Use the hidden
attribute in the <img> tag
69.
What is the default value of the loading attribute in the
<img> tag?
o a) lazy
o b) eager
o c) defer
o d) immediate
o Answer: b) eager
70.
Which HTML tag can be used to define an image caption that
provides a description or context?
o a) <caption>
o b) <figcaption>
o c) <description>
o d) <summary>
o Answer: b) <figcaption>
71.
Which attribute is used to specify the alternative text for an
image in HTML?
o a) title
o b) alt
o c) desc
o d) label
o Answer: b) alt
72.
What does the object-fit CSS property do for images?
o a) Controls the image's
alignment
o b) Sets the image's
border style
o c) Defines how an image
should be resized to fit its container
o d) Adjusts the image's
opacity
o Answer: c) Defines how an
image should be resized to fit its container
73.
Which attribute in the <img> tag is used to specify the
image's width and height in a responsive design?
o a) width and height
o b) max-width and
max-height
o c) min-width and
min-height
o d) responsive-width and
responsive-height
o Answer: b) max-width and
max-height
74.
Which of the following tags is used to define an image map in
HTML?
o a) <img>
o b) <map>
o c) <area>
o d) <coords>
o Answer: b) <map>
75.
What will happen if you use an invalid URL in the src attribute of
an <img> tag?
o a) The browser will
display the image as a broken link.
o b) The browser will show
the URL as text.
o c) The browser will not
render the image and will leave the space empty.
o d) The image will be
replaced with a default placeholder.
o Answer: c) The browser will
not render the image and will leave the space empty.
76.
Which CSS property can be used to add a border around an image?
o a) border-style
o b) border-width
o c) border-color
o d) border
o Answer: d) border
77.
What is the purpose of the sizes attribute in the <img> tag?
o a) To specify the
image's dimensions in different viewports
o b) To define different
image sizes for responsive images
o c) To control the
image's loading behavior
o d) To apply different
CSS styles to the image
o Answer: b) To define different
image sizes for responsive images
78.
How can you make an image fit its container while maintaining its
aspect ratio?
o a) Set width and height
to auto
o b) Use object-fit:
contain
o c) Use object-fit: cover
o d) Set max-width to 100%
and height to auto
o Answer: b) Use object-fit:
contain
79.
Which HTML attribute is used to specify the relationship between
the current document and the linked image when using <map>?
o a) usemap
o b) map
o c) link
o d) relationship
o Answer: a) usemap
80.
What is the purpose of the aria-label attribute when used with
images?
o a) To provide a label
for the image for screen readers
o b) To set the image's
alt text
o c) To provide a visual
label displayed on the image
o d) To specify the
image's file name
o Answer: a) To provide a label
for the image for screen readers
******************************************************