html banner

HTML Multiple Choice Questions (MCQs) and Answers

Master HTML with Practice MCQs. Explore our curated collection of Multiple Choice Questions. Ideal for placement and interview preparation, our questions range from basic to advanced, ensuring comprehensive coverage of HTML. Begin your placement preparation journey now!

Q91

Q91 What is the primary purpose of responsive web design?

A

To make websites load faster

B

To enhance the security of websites

C

To make websites visually appealing

D

To make websites work well on different devices

Q92

Q92 In responsive design, what is the purpose of the viewport <meta> tag?

A

To disable zooming on mobile devices

B

To define the width of the website

C

To control the layout on different browsers

D

To set the width of the viewport to match the device's width

Q93

Q93 What does CSS media query primarily allow you to do in terms of responsive design?

A

Change the font size based on the device

B

Load different images on different devices

C

Apply different stylesheets for different devices

D

Control the display of content based on screen size or device

Q94

Q94 Which HTML5 element is particularly useful for structuring a responsive web design?

A

<div>

B

<span>

C

<section>

D

<article>

Q95

Q95 In responsive design, what is the "mobile-first" approach?

A

Designing a website for mobile devices before desktops

B

Prioritizing mobile functionality over desktop

C

Exclusively designing websites for mobile devices

D

Exclusively designing websites for mobile devices

Q96

Q96 What will this CSS media query do? @media (max-width: 600px) { / CSS Rules / }

A

Apply the CSS rules to screens larger than 600px

B

Apply the CSS rules to screens smaller than 600px

C

Hide content on screens smaller than 600px

D

Change the layout on all devices

Q97

Q97 How does this HTML and CSS code function? <div class="responsive"></div> in HTML and .responsive { width: 100%; max-width: 500px; } in CSS

A

It makes the div element stretch to fill 100% of the screen

B

It limits the div width to 500px on all devices

C

It makes the div element responsive to screen size, with a max-width of 500px

D

It creates a fixed-size div not affected by screen size

Q98

Q98 What does this combination of HTML and CSS achieve? HTML: <div class="container"></div> CSS: .container { display: flex; flex-wrap: wrap; }

A

Creates a fixed layout not affected by screen size

B

Forces all child elements to stay in a single line

C

Creates a responsive container that adjusts its child elements

D

Aligns all child elements to the right

Q99

Q99 Identify the issue in this CSS media query: @media (min-width: 600px) { p { font-size: 18px; } }

A

It incorrectly uses min-width

B

It doesn't specify screen height

C

The font size is too large

D

No issue

Q100

Q100 Spot the error in this responsive design code: HTML: <div class="mobile"></div> CSS: @media (max-width: 600px) { .desktop { display: none; } }

A

The CSS class does not match the HTML class

B

Incorrect use of max-width

C

The display: none; rule is wrongly applied

D

No error

Q101

Q101 What is the purpose of the HTML5 Canvas API?

A

To create draggable elements

B

To embed video content

C

To draw graphics via scripting

D

To add animations to text

Q102

Q102 In the context of HTML5's Drag and Drop API, what does the dataTransfer object do?

A

Transfers data between drag and drop operations

B

Changes the style of the dragged element

C

Controls the draggable properties of elements

D

Plays a role in touch-screen interactions

Q103

Q103 How does the <canvas> element differ from <svg> in HTML5?

A

<canvas> requires a plugin, while <svg> does not

B

<canvas> is for interactive graphics, while <svg> is static

C

<canvas> draws graphics with JavaScript, while <svg> uses XML

D

<canvas> is older than <svg>

Q104

Q104 What are the primary advantages of using HTML5's Canvas API over traditional bitmap images?

A

Faster load times and smaller file sizes

B

Interactivity and programmability

C

Higher quality images and transparency support

D

Compatibility with older browsers

Q105

Q105 What is the purpose of this HTML5 Canvas code: <canvas id="myCanvas"></canvas> in HTML and var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillRect(20, 20, 150, 100); in JavaScript?

A

To create an interactive form

B

To display a static image

C

To draw a rectangle on the canvas

D

To create an animation

Q106

Q106 How does this HTML5 code function for Drag and Drop? HTML: <div id="drag1" draggable="true"></div> JS: document.getElementById("drag1").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text/plain", event.target.id); });

A

It makes the div draggable and stores the div's ID

B

It prevents the div from being dropped

C

It tracks the movement of the mouse

D

It changes the style of the div when dragged

Q107

Q107 Spot the error in this HTML5 Canvas code:<canvas id="canvas"></canvas> JS: var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); ctx.fillReact(10, 10, 100, 100);

A

Incorrect method name fillReact

B

Incorrect context retrieval

C

Canvas element incorrectly referenced

D

No error

Q108

Q108 Identify the mistake in this Drag and Drop code: HTML: <div id="drag1" draggable="true"></div> JS: document.getElementById("drag1").addEventListener("dragstart", function(event) { event.dataTransfer.setData("text", event.target.id); });

A

The data type set in setData is incorrect

B

The draggable attribute is not set correctly

C

The event listener is attached to the wrong element

D

No mistake

Q109

Q109 What is the primary purpose of using alt text in HTML images?

A

To provide a text alternative for search engines

B

To increase image loading speed

C

To provide a text description for screen readers

D

To display text when an image link is broken

Q110

Q110 What role does the lang attribute in the <html> tag play in web accessibility?

A

Specifies the language of the script used in the document

B

Determines the language for styling the document

C

Specifies the primary language of the document's content

D

Controls the language of the browser interface

Q111

Q111 How does the use of semantic HTML elements like <header>, <footer>, <nav>, and <main> enhance accessibility?

A

By making the website load faster

B

By improving the website's SEO

C

By making it easier for screen readers to navigate the content

D

By changing the visual appearance of the site

Q112

Q112 What is the purpose of the aria-labelledby attribute in HTML?

A

To label elements for styling purposes

B

To specify a unique ID for an element

C

To reference the ID of another element that provides a label

D

To automatically generate labels for elements

Q113

Q113 What is the purpose of this HTML code in terms of accessibility? <a href="https://www.example.com" title="Visit Example Website">Example</a>

A

To provide a tooltip for the link

B

To make the link open in a new tab

C

To indicate that the link is external

D

To display a description when the link is focused or hovered

Q114

Q114 How does this HTML code improve accessibility? <button aria-label="Close">X</button>

A

By labeling the button for screen readers

B

By increasing the font size of the button text

C

By making the button more visually distinct

D

By adding a keyboard shortcut to the button

Q115

Q115 Identify the accessibility issue in this HTML code: <img src="photo.jpg">

A

The image file is too large

B

The src attribute is incorrect

C

There is no alt attribute

D

The image format is not supported

Q116

Q116 Spot the error in this HTML code from an accessibility perspective: <input type="text" name="name" aria-label="Name">

A

The type attribute is incorrect

B

The name attribute should match the aria-label

C

There should be a visible label in addition to aria-label

D

The aria-label attribute is unnecessary

Q117

Q117 What is the purpose of CSS in HTML?

A

To create the structure of web pages

B

To add interactivity to web pages

C

To define the style and layout of web pages

D

To increase the loading speed of web pages

Q118

Q118 How do you link an external CSS stylesheet to an HTML document?

A

With the <script> tag

B

With the <link> tag

C

With the <css> tag

D

With inline styles in the HTML elements

Q119

Q119 What does the 'Cascading' in Cascading Style Sheets (CSS) refer to?

A

The way styles cascade from parent elements to child elements

B

The cascading effect of animations and transitions

C

The way styles are loaded sequentially in a browser

D

The cascading order of style rules when conflicts arise

Q120

Q120 Which CSS property is used to change the background color of an element?

A

color

B

bgcolor

C

background-color

D

background-image

ad verticalad vertical
ad