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!

Q121

Q121 What is the function of the CSS display property?

A

To control the opacity of an element

B

To manipulate the position of an element

C

To change the way an element is displayed

D

To adjust the color of an element

Q122

Q122 In CSS, what is the difference between the id selector and the class selector?

A

id applies to only one element, class can be used on multiple elements

B

id is used for JavaScript, class is used for styling

C

id has higher specificity than class

D

Both A and C

Q123

Q123 How do CSS media queries enhance the responsiveness of a website?

A

By loading different websites on different devices

B

By changing the website's content based on the device

C

By applying different styles based on device characteristics

D

By altering the site's structure depending on user interaction

Q124

Q124 What is the purpose of using the !important rule in a CSS declaration?

A

To increase the loading priority of the CSS file

B

To make a style inheritable by child elements

C

To override other styles regardless of specificity

D

To mark a style as crucial for browser compatibility

Q125

Q125 What does this CSS code do? body { font-family: Arial, sans-serif; }

A

Changes the background of the body element

B

Sets the default font of the entire document to Arial, sans-serif

C

Makes the text in the body element bold

D

Applies a font only to the body element's direct children

Q126

Q126 How does this CSS rule function? #header { width: 100%; height: 50px; background-color: #333; }

A

It creates a header with a fixed size and a dark background

B

It changes the color of all text in the header

C

It sets the width of the header to the width of its parent element

D

Both A and C

Q127

Q127 What is achieved by this CSS code? .container { margin: 0 auto; width: 80%; }

A

Centers the container on the page and sets its width to 80%

B

Makes the container take up 80% of the screen height

C

Applies a margin of 0 to all sides of the container

D

Creates a container with a fixed width and variable margin

Q128

Q128 How does this CSS snippet work? a:hover { color: red; }

A

Changes the color of all links to red

B

Makes a link red when it's clicked

C

Turns a link red when the mouse hovers over it

D

Underlines a link when hovered

Q129

Q129 What does this CSS flexbox code accomplish? .flex-container { display: flex; justify-content: space-between; }

A

Distributes items in the container evenly

B

Aligns items vertically in the container

C

Spaces out items evenly in the container

D

Creates equal space around each item in the container

Q130

Q130 Identify the issue in this HTML and CSS integration: HTML: <div class="header"></div> CSS: #header { background-color: blue; }

A

The CSS selector is incorrect

B

The background color is not valid

C

The div should have an id, not a class

D

There is no issue

Q131

Q131 Spot the error in this CSS code: .nav { float: left; width: 50%; } .content { margin-left: 50%; }

A

The .nav class should use margin-left instead of float

B

The width of .nav should be less than 50%

C

.content should have float: left too

D

No error

Q132

Q132 Identify the issue in this HTML and CSS combination: HTML: <div class="button">Click Me</div> CSS: .button { color: white; background-color: green; padding: 10px; border-radius; }

A

Missing value for border-radius

B

Incorrect syntax for color property

C

background-color should be background

D

No issue

Q133

Q133 What's the problem with this HTML and CSS? HTML: <div class="main">Content</div> CSS: .main { display: inline-block; width: 100%; }

A

display: inline-block cannot be used with width: 100%

B

The class name in CSS does not match the HTML

C

width: 100% is invalid for a div

D

No issue

Q134

Q134 How do you link a JavaScript file to an HTML document?

A

Using the <link> tag

B

Using the <script> tag

C

Using the <javascript> tag

D

Using inline JavaScript in the HTML file

Q135

Q135 What is the primary purpose of JavaScript in web development?

A

To structure web content

B

To style web pages

C

To add interactivity to web pages

D

To improve the websites loading time

Q136

Q136 Which JavaScript method is commonly used to manipulate the content of an HTML element?

A

document.getElementByContent()

B

document.getElementById()

C

document.setContent()

D

document.changeHTML()

Q137

Q137 How does JavaScript interact with HTML DOM?

A

By changing the file structure of HTML

B

By externally linking to HTML elements

C

By dynamically altering HTML elements and their styles

D

By reloading the page with new HTML content

Q138

Q138 In JavaScript, what does the addEventListener method do?

A

Adds new HTML elements

B

Updates the CSS of an element

C

Listens for events on HTML elements

D

Changes the attributes of HTML elements

Q139

Q139 What is the purpose of using AJAX in JavaScript?

A

To create asynchronous web applications

B

To increase the server loading time

C

To reload the whole webpage for content update

D

To animate HTML elements

Q140

Q140 How does JavaScript's fetch API enhance web application functionality?

A

By allowing synchronous web page updates

B

By enabling data retrieval without refreshing the page

C

By solely sending data to a server

D

By improving JavaScript execution speed

Q141

Q141 What is the role of Promises in JavaScript?

A

To provide a way to execute synchronous callbacks

B

To delay the execution of a JavaScript function

C

To handle asynchronous operations

D

To repeat an operation a set number of times

Q142

Q142 What will this JavaScript code do when added to an HTML file? <script>document.write("Hello, World!");</script>

A

It will write "Hello, World!" on the document

B

It will create an alert saying "Hello, World!"

C

It will comment out "Hello, World!" in the HTML

D

It will delete all content and write "Hello, World!"

Q143

Q143 How does this JavaScript function work? <button onclick="changeColor()">Click Me</button> Script: function changeColor() { document.body.style.backgroundColor = 'blue'; }

A

It changes the color of the button

B

It changes the background color of the body to blue

C

It creates a pop-up with the text "blue"

D

It changes the color of all text to blue

Q144

Q144 What is the result of this JavaScript in an HTML page? <script>let elem = document.createElement('div'); document.body.appendChild(elem);</script>

A

Creates a new div and adds it to the end of the document body

B

Deletes all div elements from the document body

C

Changes the style of the first div element

D

Reloads the body of the document

Q145

Q145 What does this JavaScript code achieve? <script>document.getElementById('demo').innerHTML = 'Welcome!';</script>

A

Changes the content of the element with id 'demo' to 'Welcome!'

B

Displays an alert with 'Welcome!'

C

Changes the title of the document to 'Welcome!'

D

Creates a new element with the text 'Welcome!'

Q146

Q146 How does this JavaScript interact with HTML? <input id="inputField" type="text"> <button onclick="alert(document.getElementById('inputField').value);">Alert Value</button>

A

Displays the value of the input field in an alert when the button is clicked

B

Changes the input field value to 'Alert Value' when clicked

C

Creates a new input field when the button is clicked

D

Reloads the page with the input field value

Q147

Q147 Identify the issue in this JavaScript integration with HTML: <button onclick="showMessage()">Click Me</button> Script: function showMessage) { alert("Welcome!"); }

A

The function call in onclick is incorrect

B

The script tag is missing

C

There is a syntax error in the function declaration

D

The alert function is used incorrectly

Q148

Q148 Spot the mistake in this JavaScript and HTML code:<script>function updateText() { document.getElementByld('text').innerHTML = 'Updated'; }</script> <p id='text'>Original Text</p>

A

Incorrect function name updateText

B

Typo in document.getElementByld

C

Wrong method innerHTML

D

Misuse of the script tag

Q149

Q149 What is wrong with this HTML and JavaScript integration?<div id="container"></div> Script: <script>let cont = document.querySelector('#container'); cont.addEventListener('click', respondClick); function respondClick() { cont.innerHTML = 'Clicked!'; }</script>

A

The script should be inside the div

B

querySelector is used incorrectly

C

addEventListener is not set up correctly

D

No issue

Q150

Q150 Identify the problem in this JavaScript code in an HTML file: <ul id="list"></ul> Script: <script>for (let i = 0; i < 3; i++) { let li = document.createElement('li'); li.innerHTML = 'Item ' + i; document.getElementById('list').appendChild(li); }</script>

A

The loop does not create list items correctly

B

The li element is not appended to the ul

C

The script is incorrectly placed in the HTML

D

No issue

ad verticalad vertical
ad