80 Web development MCQs & Objective Type Quiz with Answers for Interview Preparation | Gyansetu

Practice these MCQs to strengthen your Web Development knowledge and prepare confidently for job interviews or certification exams.
Whether you’re aiming to become a front-end specialist, a full-stack developer, or simply sharpen your coding and design skills — you’re in the right place.
80+ Web Development MCQs covering everything from HTML, CSS, JavaScript, DOM, APIs, and modern frameworks — complete with answers to help you test and solidify your understanding, no guesswork involved.

Section 1: HTML – 15 MCQs

1. Which HTML tag is used to define an internal style sheet?
   A. <style>
   B. <script>
   C. <css>
   D. <link>
   ✅ Answer: A
   
2. What does the “alt” attribute in the <img> tag provide?
   A. Image format
   B. Alternate image
   C. Alternate text
   D. Animation delay
   ✅ Answer: C
   
3. Which HTML element is used to create a dropdown list?
   A. <input>
   B. <ul>
   C. <select>
   D. <dropdown>
   ✅ Answer: C
   
4. Which tag is used to create a table row?
   A. <th>
   B. <tr>
   C. <td>
   D. <table>
   ✅ Answer: B
   
5. What is the correct HTML for inserting a line break?
   A. <lb>
   B. <break>
   C. <br>
   D. <lnbr>
   ✅ Answer: C
   
6. Which HTML attribute is used to define inline styles?
   A. font
   B. style
   C. class
   D. styles
   ✅ Answer: B
   
7. What will be the output?

<p>Hello <b>World</b>!</p>

A. Hello World! (with “World” bold)
B. Hello World! (with whole sentence bold)
C. Compilation Error
D. None
✅ Answer: A

8. Which input type defines a calendar control?
   A. text
   B. calendar
   C. datetime
   D. date
   ✅ Answer: D
   

9. What does <meta charset=”UTF-8″> specify?
   A. Font type
   B. Language
   C. Character encoding
   D. Document title
   ✅ Answer: C
   
10. Which tag is used to embed an external web page in HTML?
    A. <embed>
    B. <object>
    C. <iframe>
    D. <external>
    ✅ Answer: C
    
11. Which tag is used to define a navigation bar?
    A. <nav>
    B. <menu>
    C. <header>
    D. <navigation>
    ✅ Answer: A
    
12. What is the purpose of the <fieldset> tag?
    A. Styling text
    B. Grouping form elements
    C. Creating popups
    D. Managing responsiveness
    ✅ Answer: B
    
13. Which tag is used to add a comment in HTML?
    A. <!– comment –>
    B. // comment
    C. /* comment */
    D. # comment
    ✅ Answer: A
    
14. Which HTML5 element is used for self-contained content like a blog post?
    A. <main>
    B. <article>
    C. <section>
    D. <aside>
    ✅ Answer: B
    
15. Which attribute allows form submission to a new tab?
    A. target=”_new”
    B. target=”_self”
    C. target=”_blank”
    D. action=”_blank”
    ✅ Answer: C
    

---

Section 2: CSS – 15 MCQs

16. Which is the correct syntax to select all <p> elements?
    A. p {}
    B. .p {}
    C. #p {}
    D. *p {}
    ✅ Answer: A
    
17. What does position: absolute; do?
    A. Fixes element relative to viewport
    B. Fixes element relative to nearest positioned ancestor
    C. Sticks element to screen
    D. Centers element
    ✅ Answer: B
    
18. What is the default value of the position property?
    A. fixed
    B. relative
    C. absolute
    D. static
    ✅ Answer: D
    
19. Which property is used to change font?
    A. font-style
    B. font-family
    C. font-weight
    D. font-variant
    ✅ Answer: B
    
20. What is the use of z-index?
    A. Adjusts zoom level
    B. Sets stacking order
    C. Applies opacity
    D. Animates elements
    ✅ Answer: B
    
21. Which CSS rule hides an element?
    A. display: none;
    B. opacity: 0;
    C. visibility: hidden;
    D. All of the above
    ✅ Answer: D
    
22. Choose the correct code to apply a red border of 1px around a div:

div {
  ____;
}

A. border: red;
B. border: 1px red solid;
C. border-color: red;
D. border: solid 1px red;
✅ Answer: B

23. What does the following CSS do?

p:first-child {
  color: blue;
}

A. Styles every first <p> element
B. Styles first child inside every <p>
C. Styles <p> elements that are the first child
D. None of the above
✅ Answer: C

24. Which selector targets an element with id main?
    A. #main
    B. .main
    C. main
    D. $main
    ✅ Answer: A
    

25. Which CSS property controls text size?
    A. font-size
    B. text-size
    C. text-style
    D. font-style
    ✅ Answer: A
    
26. How do you center a div horizontally with margin?
    A. margin: auto;
    B. align: center;
    C. padding: center;
    D. margin: center;
    ✅ Answer: A
    
27. What does !important do in CSS?
    A. Disables property
    B. Increases specificity
    C. Overrides all other rules
    D. Applies default styling
    ✅ Answer: C
    
28. Which property applies a shadow to text?
    A. text-decoration
    B. text-shadow
    C. font-shadow
    D. shadow-text
    ✅ Answer: B
    
29. What is the box model in CSS?
    A. Layout structure
    B. A type of animation
    C. JavaScript function
    D. Method to apply flex layout
    ✅ Answer: A
    
30. What does flex-grow: 1 do in Flexbox?
    A. Prevents flex
    B. Shrinks flex
    C. Expands element to use available space
    D. Centers element
    ✅ Answer: C
    

---

Section 3: JavaScript – 20 MCQs

31. Which keyword declares a constant in JavaScript?
    A. var
    B. let
    C. const
    D. static
    ✅ Answer: C
    
32. What will be the output?

console.log(typeof null);

A. object
B. null
C. undefined
D. string
✅ Answer: A

33. What is the result of 2 + ‘2’ in JavaScript?
    A. 4
    B. 22
    C. NaN
    D. undefined
    ✅ Answer: B
    
34. What is NaN in JavaScript?
    A. Negative Array Node
    B. Not a Number
    C. Null as Number
    D. None of the above
    ✅ Answer: B
    
35. How do you write a comment in JS?
    A. <!– comment –>
    B. # comment
    C. // comment
    D. /* comment */
    ✅ Answer: C and D
    
36. Which method adds a new element at the end of an array?
    A. shift()
    B. pop()
    C. push()
    D. unshift()
    ✅ Answer: C
    
37. What does === operator do?
    A. Assigns value
    B. Compares value
    C. Strict comparison
    D. Converts data types
    ✅ Answer: C
    
38. Which function converts string to integer?
    A. parseInt()
    B. int()
    C. stringToInt()
    D. number()
    ✅ Answer: A
    
39. Output of Boolean(0)?
    A. true
    B. false
    C. undefined
    D. null
    ✅ Answer: B
    
40. What does this code log?
    let x = [1, 2];
    x[10] = 5;

console.log(x.length);

A. 2
B. 3
C. 11
D. Error
✅ Answer: C

Section 4: Advanced JavaScript & DOM – 10 MCQs

41. What does event.preventDefault() do?
    A. Stops execution
    B. Stops page reload
    C. Cancels default action
    D. Prevents function call
    ✅ Answer: C
    
42. How to select an element with id=”main” using JavaScript?
    A. getElementByClass(‘main’)
    B. querySelector(‘.main’)
    C. getElementById(‘main’)
    D. getElement(main)
    ✅ Answer: C
    
43. Which method is used to add an event listener?
    A. on()
    B. addEventListener()
    C. listen()
    D. eventBind()
    ✅ Answer: B
    
44. What will this log?

let x = “5”;

let y = 5;

console.log(x == y, x === y);

A. true true
B. false true
C. true false
D. false false
✅ Answer: C

45. How do you create a new paragraph element in the DOM?
    A. document.new(‘p’)
    B. createElement(‘p’)
    C. document.createElement(‘p’)
    D. document.make(‘p’)
    ✅ Answer: C
    
46. What does innerHTML return?
    A. Tag name
    B. Element ID
    C. Element content
    D. Element styles
    ✅ Answer: C
    
47. Which method is used to remove an element in the DOM?
    A. delete()
    B. removeNode()
    C. removeChild()
    D. remove()
    ✅ Answer: D
    
48. What will be output of this code?

console.log([] + []);

A. undefined
B. []
C. 0
D. “”
✅ Answer: D

49. Which keyword defines a block-scoped variable?
    A. var
    B. int
    C. let
    D. dim
    ✅ Answer: C
    

50. How do you stop propagation of an event?
    A. event.preventDefault()
    B. event.stop()
    C. event.stopPropagation()
    D. event.block()
    ✅ Answer: C
    

---

Section 5: Frontend Frameworks (React/Angular/Vue) – 10 MCQs

51. What does JSX stand for?
    A. Java Syntax Extension
    B. JavaScript XML
    C. JavaScript Extension
    D. None of the above
    ✅ Answer: B
    
52. In React, what is a component?
    A. Function or class returning JSX
    B. Plain HTML element
    C. CSS file
    D. Redux store
    ✅ Answer: A
    
53. Which hook is used to manage state in React?
    A. useEffect()
    B. useState()
    C. useRef()
    D. useRedux()
    ✅ Answer: B
    
54. What is the correct syntax for a functional component?

A. function MyComponent() {
     return <div>Hello</div>; 
}

B. const MyComponent = () => {
     return <div>Hello</div>;
   }

C. Both A & B 

D. None 

✅ Answer: C

55. Angular uses which language for component logic?
    A. Java
    B. JavaScript
    C. TypeScript
    D. HTML
    ✅ Answer: C
    
56. Vue templates must return how many root elements?
    A. Any number
    B. Exactly one
    C. Two
    D. Zero
    ✅ Answer: B
    
57. Which React hook is used for side effects like API calls?
    A. useFetch()
    B. useEffect()
    C. useState()
    D. useCallback()
    ✅ Answer: B
    
58. What is virtual DOM?
    A. Real DOM
    B. Copy of HTML
    C. Lightweight copy of real DOM
    D. Server-side DOM
    ✅ Answer: C
    
59. Which directive in Angular binds data one-way?
    A. [(ngModel)]
    B. [value]
    C. *ngIf
    D. {{ value }}
    ✅ Answer: D
    
60. In Vue, what does v-if do?
    A. Binds attribute
    B. Conditionally renders elements
    C. Creates a loop
    D. Applies a class
    ✅ Answer: B
    

---

Section 6: APIs & JSON – 5 MCQs

61. What is the full form of API?
    A. Advanced Programming Interface
    B. Application Programming Interface
    C. Automated Programming Instruction
    D. Applied Program Interaction
    ✅ Answer: B
    
62. What does this fetch API do?

fetch('https://api.example.com')
  .then(res => res.json())
  .then(data => console.log(data));

A. Makes a POST request
B. Fetches data and parses it to JSON
C. Converts API to CSV
D. Throws error
✅ Answer: B

63. Which HTTP method is used to send data?
    A. GET
    B. PUT
    C. POST
    D. DELETE
    ✅ Answer: C
    
64. Which status code means “Not Found”?
    A. 200
    B. 301
    C. 404
    D. 500
    ✅ Answer: C
    
65. What format is most common for API responses?
    A. XML
    B. JSON
    C. HTML
    D. CSV
    ✅ Answer: B
    

---

Section 7: Node.js & Backend – 10 MCQs

66. Node.js is built on which engine?
    A. SpiderMonkey
    B. Chakra
    C. V8
    D. Nitro
    ✅ Answer: C
    
67. Which of the following is a Node.js web framework?
    A. Laravel
    B. Express
    C. Django
    D. Flask
    ✅ Answer: B
    
68. Which method reads a file in Node.js?
    A. fs.get()
    B. fs.read()
    C. fs.readFile()
    D. file.read()
    ✅ Answer: C
    
69. Which keyword is used to import a module in CommonJS?
    A. include
    B. require
    C. import
    D. fetch
    ✅ Answer: B
    
70. Which HTTP method is idempotent?
    A. POST
    B. PUT
    C. GET
    D. B & C
    ✅ Answer: D
    
71. Which command initializes a Node.js project?
    A. npm init
    B. node start
    C. node create
    D. npm install
    ✅ Answer: A
    
72. How do you export a function in Node.js?

A. export function x() {} 
B. exports.x = function() {} 
C. module.export = x 
D. function export x() {}   
✅ Answer: B

73. Which database is commonly used with Node.js?
    A. MySQL
    B. MongoDB
    C. Firebase
    D. All of the above
    ✅ Answer: D
    
74. What is middleware in Express?
    A. Route handler
    B. API caller
    C. Function between request and response
    D. Template
    ✅ Answer: C
    
75. Which port does a typical Node.js server use?
    A. 80
    B. 3000
    C. 443
    D. 500
    ✅ Answer: B
    

---

Section 8: General Web Concepts – 5 MCQs

76. What does CDN stand for?
    A. Content Distribution Node
    B. Content Delivery Network
    C. Code Delivery Network
    D. Content Deployment Name
    ✅ Answer: B
    
77. Which protocol is secure for web?
    A. HTTP
    B. FTP
    C. HTTPS
    D. SSH
    ✅ Answer: C
    
78. Which tool is best for version control?
    A. Git
    B. Docker
    C. NPM
    D. Chrome DevTools
    ✅ Answer: A
    
79. Which tag helps with responsive design?
    A. <meta name=”viewport”>
    B. <meta name=”resolution”>
    C. <meta responsive>
    D. <responsive>
    ✅ Answer: A
    
80. What does MVC stand for?
    A. Model-View-Control
    B. Method-View-Component
    C. Model-View-Controller
    D. Multi-View-Control
    ✅ Answer: C
    

Mastering these Web Development MCQs is a valuable step toward building a strong foundation in front-end and back-end technologies, responsive design, and modern web frameworks.
If you’re ready to elevate your career with hands-on projects and expert-led instruction, join our Web Development course in Gurgaon at Gyansetu and become industry-ready for full-stack development roles.