HTML Questions
1. What are semantic tags in HTML? Write any five examples.
Semantic tags clearly describe their meaning to both browser and
developer.
Examples: <header>, <nav>, <section>, <article>, <footer>
2. Difference between <div> and <section>
<div>: Non-semantic container, used for styling/layout.
<section>: Semantic, used for grouping related content with
meaning.
3. Purpose of <meta> tag
Used to provide metadata about the HTML document like charset,
viewport, author, description, SEO info.
4. Difference between inline, block, and inline-block
Inline: Takes content width only (<span>)
Block: Takes full width (<div>)
Inline-block: Inline but allows height & width
5. Use of alt attribute in <img>
Shows text if image fails to load
Helps screen readers (accessibility)
Improves SEO
6. Difference between id and class
id: Unique, used once
class: Reusable, used multiple times
7. Structure of a basic HTML document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content
</body>
</html>
8. Purpose of <form> tag & common attributes
Used to collect user input.
Attributes: action, method, name, id
9. Self-closing tags (any three)
Tags that don’t need closing tag.
Examples: <img>, <br>, <hr>
10. Difference between <ol> and <ul>
<ol>: Ordered list (numbers)
<ul>: Unordered list (bullets)
CSS Questions
11. Difference between padding and margin
Padding: Space inside the border
Margin: Space outside the border
12. CSS Box Model
Consists of:
1. Content
2. Padding
3. Border
4. Margin
13. Flexbox vs Grid
Flexbox: One-dimensional (row OR column)
Grid: Two-dimensional (rows AND columns)
14. Pseudo-classes (any two)
Used to define element state.
Examples: :hover, :active
15. What is specificity in CSS?
Rule that decides which CSS style is applied when multiple rules match
the same element.
Priority: Inline > ID > Class > Element
16. External vs Internal vs Inline CSS
Inline: Inside HTML tag
Internal: Inside <style> tag
External: Separate .css file (best practice)
17. Purpose of media queries
Used to make responsive designs for different screen sizes.
18. Position property (any three)
static: Default
relative: Relative to itself
absolute: Relative to nearest positioned parent
19. display: none vs visibility: hidden
display: none: Removes element completely
visibility: hidden: Hides but keeps space
20. Explain z-index
Controls vertical stacking order of positioned elements.
Higher value = appears on top.
JavaScript Questions
21. Difference between var, let, and const
var: Function-scoped
let: Block-scoped
const: Block-scoped, cannot be reassigned
22. What is an array? Two methods
Array stores multiple values in one variable.
Methods: push(), pop()
23. What is DOM? Why important?
DOM (Document Object Model) represents HTML as objects.
Allows JavaScript to manipulate HTML dynamically.
24. Difference between == and ===
==: Compares value only
===: Compares value + datatype (strict)
25. Event bubbling
Event moves from child to parent.
Example: Button click inside a div triggers div event too.
26. Functions in JavaScript + syntax
Function is a reusable block of code.
function add(a, b) {
return a + b;
27. What is hoisting?
JavaScript moves variable and function declarations to the top before
execution.
28. Synchronous vs Asynchronous JS
Synchronous: Executes line by line
Asynchronous: Non-blocking (setTimeout, API calls)
29. map() and filter()
map(): Returns new array after modification
filter(): Returns elements that match condition
30. What is an object in JavaScript?
Object stores data in key-value pairs.
const user = {
name: "Khushboo",
age: 21
};