Introduction
Web development is an essential core domain within Computer Science and Information Technology. Modern competitive tests like PPSC Lecturer Computer Science, FPSC, NTS, and software engineering entry exams routinely test candidates on client-side and server-side web technologies. This ultimate collection covers 50 high-yield Web Development MCQs spanning HTML5, CSS3, JavaScript, and PHP with clear answers and explanations.
Section 1: HTML & HTML5 Fundamentals
Q1. What does HTML stand for?
A) Hyper Text Markup Language
B) High Text Marking Language
C) Hyperlink Text Management Language
D) Home Tool Markup Language
Correct Answer: A) Hyper Text Markup Language
Explanation: HTML is the standard markup language used to structure web pages and display content in web browsers.
Q2. Which HTML tag is used to define the largest heading?
A) <heading>
B) <h6>
C) <h1>
D) <head>
Correct Answer: C) <h1>
Explanation: <h1> defines the most important and largest heading, whereas <h6> defines the smallest heading in HTML.
Q3. Which attribute is used in HTML to insert an inline style?
A) class
B) styles
C) style
D) font
Correct Answer: C) style
Explanation: The style attribute applies CSS rules directly inside an individual HTML element tag.
Q4. Which HTML5 element is used to play audio files natively on a web page?
A) <sound>
B) <audio>
C) <mp3>
D) <music>
Correct Answer: B) <audio>
Explanation: HTML5 introduced the native <audio> tag to embed sound content without requiring external plugins.
Q5. Which tag is used to create a hyperlink in HTML?
A) <link>
B) <a>
C) <href>
D) <url>
Correct Answer: B) <a>
Explanation: The anchor tag <a> along with the href attribute defines a hyperlink to another web resource.
Q6. What is the correct HTML element for inserting a line break?
A) <break>
B) <lb>
C) <br>
D) <newline>
Correct Answer: C) <br>
Explanation: The <br> tag is an empty/void element used to produce a single line break in text formatting.
Q7. Which HTML attribute specifies an alternate text for an image if the image cannot be displayed?
A) title
B) src
C) alt
D) longdesc
Correct Answer: C) alt
Explanation: The alt attribute provides accessible alternative text for screen readers or broken image links.
Q8. Which HTML5 input type is used to define a control for entering an email address?
A) type=”mail”
B) type=”email”
C) type=”text-email”
D) type=”user-email”
Correct Answer: B) type=”email”
Explanation: HTML5 added type="email" to automatically validate email address syntax in web forms.
Q9. Which HTML tag is used to define an unordered list?
A) <ol>
B) <ul>
C) <li>
D) <list>
Correct Answer: B) <ul>
Explanation: <ul> defines an unordered bulleted list, while <ol> defines a numbered ordered list.
Q10. What is the correct doctype declaration for HTML5?
A) <!DOCTYPE html>
B) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN">
C) <!DOCTYPE HTML5>
D) <DOCTYPE html>
Correct Answer: A) <!DOCTYPE html>
Explanation: HTML5 simplified the doctype declaration to case-insensitive <!DOCTYPE html>.
Section 2: CSS & Styling Principles
Q11. What does CSS stand for?
A) Creative Style Sheets
B) Cascading Style Sheets
C) Computer Style Sheets
D) Colorful Style Sheets
Correct Answer: B) Cascading Style Sheets
Explanation: CSS specifies how HTML elements are formatted, styled, and presented across screens and media.
Q12. Which CSS property controls the text size of an element?
A) text-style
B) font-size
C) text-size
D) font-style
Correct Answer: B) font-size
Explanation: The font-size property sets the rendering size of typography (e.g., in px, em, rem).
Q13. How do you select an element with id="header" in CSS?
A) .header
B) #header
C) *header
D) header
Correct Answer: B) #header
Explanation: IDs are targeted using the hash symbol (#), whereas classes are selected using a dot (.).
Q14. Which property is used to change the background color of an element in CSS?
A) color
B) bgcolor
C) background-color
D) canvas-color
Correct Answer: C) background-color
Explanation: background-color sets the solid background color of an element box.
Q15. In the CSS Box Model, which layer surrounds the padding and content?
A) Margin
B) Border
C) Outline
D) Frame
Correct Answer: B) Border
Explanation: From inside out, the CSS box model consists of Content -> Padding -> Border -> Margin.
Q16. Which CSS property is used to make text bold?
A) font-weight: bold
B) style: bold
C) font-style: bold
D) text-decoration: bold
Correct Answer: A) font-weight: bold
Explanation: font-weight sets the thickness or weight of characters in text formatting.
Q17. What is the default value of the position property in CSS?
A) relative
B) fixed
C) absolute
D) static
Correct Answer: D) static
Explanation: HTML elements are positioned static by default according to normal page flow.
Q18. Which property is used to hide an element while still leaving its layout space intact?
A) display: none
B) visibility: hidden
C) opacity: 1
D) overflow: hidden
Correct Answer: B) visibility: hidden
Explanation: visibility: hidden hides the element but preserves its space, whereas display: none removes it entirely from layout flow.
Q19. Which CSS layout module provides a 1-dimensional alignment system for rows or columns?
A) Grid
B) Flexbox
C) Float
D) Table
Correct Answer: B) Flexbox
Explanation: Flexible Box Layout (Flexbox) is designed for 1D layout distribution, while CSS Grid handles 2D structures.
Q20. Which CSS units are relative to the font size of the root element (<html>)?
A) em
B) rem
C) px
D) %
Correct Answer: B) rem
Explanation: rem stands for “root em” and scales relative strictly to the root <html> font size.
Section 3: JavaScript Programming & DOM Manipulations
Q21. Which keyword is used to declare a block-scoped reassignable variable in modern JavaScript (ES6)?
A) var
B) let
C) const
D) set
Correct Answer: B) let
Explanation: let provides block scope and permits value reassignment, whereas const prevents reassignment.
Q22. Which operator is used for strict equality comparison (checking both value and data type) in JavaScript?
A) ==
B) =
C) ===
D) !==
Correct Answer: C) ===
Explanation: === compares values and types without performing type coercion.
Q23. What is the output of console.log(typeof []); in JavaScript?
A) “array”
B) “object”
C) “list”
D) “undefined”
Correct Answer: B) “object”
Explanation: Arrays in JavaScript are specialized objects under the hood, so typeof evaluates arrays as "object".
Q24. Which built-in DOM method selects an element by its unique ID attribute?
A) document.getElementByClass()
B) document.querySelectorID()
C) document.getElementById()
D) document.findID()
Correct Answer: C) document.getElementById()
Explanation: document.getElementById("idName") returns a reference to the element matching the specified ID string.
Q25. What is the result of console.log("5" + 3); in JavaScript?
A) 8
B) 53
C) NaN
D) TypeError
Correct Answer: B) 53
Explanation: The plus operator implicitly converts the number 3 to string "3" and concatenates them into "53".
Q26. What is the result of console.log("5" - 3); in JavaScript?
A) 2
B) 53
C) NaN
D) undefined
Correct Answer: A) 2
Explanation: The subtraction operator implicitly coerces string "5" into integer 5, resulting in numeric 2.
Q27. Which function is used to parse a string into an integer number in JavaScript?
A) Integer.parse()
B) parseInt()
C) convertToInt()
D) Number.toInteger()
Correct Answer: B) parseInt()
Explanation: parseInt("string", radix) parses a string argument and returns an integer of the specified radix.
Q28. Which event fires when a user clicks on an HTML element?
A) onhover
B) onchange
C) onclick
D) onload
Correct Answer: C) onclick
Explanation: The onclick event attribute triggers JavaScript code when an element is clicked.
Q29. How do you write a single-line comment in JavaScript?
A) <!-- comment -->
B) /* comment */
C) // comment
D) # comment
Correct Answer: C) // comment
Explanation: JavaScript uses // for single-line comments and /* ... */ for multi-line comments.
Q30. What special value represents an intentionally non-existent or empty object reference in JavaScript?
A) undefined
B) null
C) NaN
D) void
Correct Answer: B) null
Explanation: null represents the deliberate absence of an object value, whereas undefined indicates a declared variable that lacks an assigned value.
Section 4: Server-Side Web Concepts & PHP
Q31. What does PHP stand for?
A) Personal Home Page
B) PHP: Hypertext Preprocessor
C) Private Hypertext Processor
D) Public Hosting Platform
Correct Answer: B) PHP: Hypertext Preprocessor
Explanation: PHP is a recursive acronym standing for “PHP: Hypertext Preprocessor”.
Q32. All variables in PHP must begin with which special symbol?
A) @
B) #
C) $
D) &
Correct Answer: C) $
Explanation: In PHP, variable identifiers always start with a dollar sign $.
Q33. Which superglobal array in PHP is used to collect form data submitted via HTTP POST method?
A) $_GET
B) $_POST
C) $_REQUEST
D) $_SERVER
Correct Answer: B) $_POST
Explanation: $_POST is an associative array containing key-value pairs submitted through forms using method="POST".
Q34. Which HTTP request method displays form data directly inside the URL address bar?
A) POST
B) GET
C) PUT
D) DELETE
Correct Answer: B) GET
Explanation: The GET method appends query string data into the URL string, making it visible and bookmarkable.
Q35. Which function in PHP is used to include and execute a specified file, throwing a fatal error if missing?
A) include()
B) require()
C) import()
D) attach()
Correct Answer: B) require()
Explanation: require() produces a fatal E_COMPILE_ERROR and halts script execution if the requested file is missing, unlike include().
Q36. Which symbol is used for string concatenation in PHP?
A) +
B) . (Dot)
C) &
D) ,
Correct Answer: B) . (Dot)
Explanation: PHP uses the dot operator (.) to join two string values together.
Q37. Which HTTP response status code represents “404 Not Found”?
A) 200
B) 301
C) 404
D) 500
Correct Answer: C) 404
Explanation: Status code 404 indicates that the server cannot locate the requested URL resource.
Q38. Which HTTP header status code represents a successful request processing?
A) 200 OK
B) 302 Found
C) 403 Forbidden
D) 502 Bad Gateway
Correct Answer: A) 200 OK
Explanation: 200 OK is the standard HTTP response for successful web requests.
Q39. Where are HTTP Cookies stored?
A) On the web server
B) In the client web browser
C) In the relational database
D) In router cache
Correct Answer: B) In the client web browser
Explanation: Cookies are small text files stored locally on the client’s browser machine.
Q40. Where are PHP session variables stored by default?
A) On the client browser
B) On the web server
C) In local storage
D) In DNS servers
Correct Answer: B) On the web server
Explanation: Session data is stored securely on the server side, while a session ID cookie tracks the user on the client side.
Section 5: Web Architecture, APIs & Performance (41-50)
Q41. What does AJAX stand for in web development?
A) Asynchronous JavaScript and XML
B) Advanced JavaScript and XHTML
C) Automated Java and XML
D) Array Application and XML
Correct Answer: A) Asynchronous JavaScript and XML
Explanation: AJAX allows web pages to update asynchronously by exchanging data with a server behind the scenes without full page reloads.
Q42. What does JSON stand for?
A) Java Standard Object Notation
B) JavaScript Object Notation
C) JavaScript Ordered Network
D) Java System Object Native
Correct Answer: B) JavaScript Object Notation
Explanation: JSON is a lightweight text-based data interchange format widely used in web APIs.
Q43. Which technique optimizes website loading speed by downloading images only when they enter the viewport?
A) Minification
B) Lazy Loading
C) Caching
D) Compression
Correct Answer: B) Lazy Loading
Explanation: Lazy loading defers the loading of off-screen images until the user scrolls down to them.
Q44. Which tool or protocol secures web data transfer via HTTPS encryption?
A) FTP
B) SSL/TLS
C) HTTP/1.1
D) DNS
Correct Answer: B) SSL/TLS
Explanation: SSL/TLS protocols encrypt traffic between web browsers and servers to ensure HTTPS security.
Q45. What is the primary role of a DNS (Domain Name System) server?
A) Store website database files
B) Translate domain names into IP addresses
C) Render HTML in browsers
D) Execute server scripts
Correct Answer: B) Translate domain names into IP addresses
Explanation: DNS converts human-friendly domain names (e.g., mcqsdesk.com) into numerical IP addresses.
Q46. Which HTML meta tag is essential for responsive web design on mobile screens?
A) <meta name="viewport" content="width=device-width, initial-scale=1.0">
B) <meta name="mobile" content="true">
C) <meta name="screen" content="responsive">
D) <meta name="device" content="mobile">
Correct Answer: A) <meta name="viewport" content="width=device-width, initial-scale=1.0">
Explanation: The viewport meta tag instructs browsers to scale layout dimensions based on the device screen width.
Q47. Which CSS property specifies whether an element should float to the left or right?
A) align
B) float
C) clear
D) position
Correct Answer: B) float
Explanation: The float property places an element to the left or right side of its container, allowing text to wrap around it.
Q48. Which web storage API allows storing data in the browser with no expiration time?
A) sessionStorage
B) localStorage
C) Cookies
D) IndexedDB
Correct Answer: B) localStorage
Explanation: localStorage persists key-value data even after the browser tab or browser is closed and reopened.
Q49. Which HTTP status code group represents Server Error responses?
A) 2xx
B) 3xx
C) 4xx
D) 5xx
Correct Answer: D) 5xx
Explanation: 5xx status codes (such as 500 Internal Server Error) indicate that the server encountered an error processing a valid request.
Q50. Which process removes whitespace, comments, and unnecessary characters from CSS/JS files to reduce size?
A) Compiling
B) Transpiling
C) Minification
D) Refactoring
Correct Answer: C) Minification
Explanation: Minification shrinks file sizes and improves web page load performance without altering code functionality.
Conclusion
Mastering these 50 Web Development MCQs gives you a solid command over client-side scripting (HTML, CSS, JavaScript) and server-side logic (PHP, HTTP, Web Architecture). Regular practice of web concepts is crucial for clearing competitive exams like PPSC, FPSC, and NTS.
6 Comments