✅ Web development Interview Questions with Answers: Part-1

QUESTION 1
What happens step by step when you enter a URL in a browser and press Enter?

Answer
You trigger a long chain of events.

• Browser parses the URL and identifies protocol, domain, path
• Browser checks cache, DNS cache, OS cache, router cache
• If not found, DNS lookup happens to get the IP address
• Browser opens a TCP connection with the server
• HTTPS triggers TLS handshake for encryption
• Browser sends an HTTP request to the server
• Server processes request and sends HTTP response
• Browser downloads HTML, CSS, JS, images
• HTML parsed into DOM
• CSS parsed into CSSOM
• DOM + CSSOM create render tree
• Layout calculates positions
• Paint draws pixels on screen
• JavaScript executes and updates UI

Interview tip
Mention DNS, TCP, TLS, render tree. This separates juniors from seniors.

QUESTION 2
What are the roles of HTML, CSS, and JavaScript in a web application?

Answer
Each layer has a single responsibility.

HTML
• Structure of the page
• Content and meaning
• Headings, forms, inputs, buttons

CSS
• Presentation and layout
• Colors, fonts, spacing
• Responsive behavior

JavaScript
• Behavior and logic
• Events, API calls, validation
• Dynamic updates

Real example
HTML builds a login form
CSS styles it
JavaScript validates input and sends API request

QUESTION 3
What are the main differences between HTML and HTML5?

Answer
HTML5 added native capabilities.

Key differences
• Semantic tags like header, footer, article
• Audio and video support without plugins
• Canvas and SVG for graphics
• Local storage and session storage

QUESTION 4
What is the difference between block-level and inline elements in HTML?

Answer

Block elements
• Start on a new line
• Take full width
• Respect height and width
• Examples: div, p, h1

Inline elements
• Stay in same line
• Take only content width
• Height and width ignored
• Examples: span, a, strong

Inline-block
• Stays inline
• Respects height and width

QUESTION 5
What is semantic HTML and why is it important for SEO and accessibility?

Answer
Semantic HTML uses meaningful tags.

Examples
• header, nav, main, article, section, footer

Benefits
• Search engines understand content better
• Screen readers read pages correctly
• Code becomes readable and maintainable

SEO example
article tag signals main content to search engines.

Accessibility example
Screen readers jump between landmarks.

QUESTION 6
What are meta tags and how do they impact search engines?

Answer
Meta tags provide page metadata.

Common meta tags
• charset defines encoding
• viewport controls responsiveness
• description influences search snippets
• robots control indexing

SEO impact
• Description affects click-through rate
• Robots tag controls indexing behavior

Note: Meta keywords are ignored by modern search engines.

QUESTION 7
What is the difference between class and id attributes in HTML?

Answer

ID
• Unique
• Used once per page
• High CSS specificity
• Used for anchors and JS targeting

Class
• Reusable
• Applied to multiple elements
• Preferred for styling

QUESTION 8
What is a DOCTYPE declaration and why is it required?

Answer
DOCTYPE tells the browser how to render the page.

Without DOCTYPE
• Browser enters quirks mode
• Layout breaks
• Inconsistent behavior

With DOCTYPE
• Standards mode
• Predictable rendering

QUESTION 9
How do HTML forms work and what are common input types?

Answer
Forms collect and send user data.

Process
• User fills inputs
• Submit triggers request
• Data sent via GET or POST

Common input types
• text, email, password
• number, date
• radio, checkbox
• file

Security note
Always validate on server side.

QUESTION 10
What is web accessibility and what are ARIA roles used for?

Answer
Accessibility ensures usable web apps for everyone.

Who benefits
• Screen reader users
• Keyboard users
• Users with visual or motor impairments

ARIA roles
• Add meaning when native HTML falls short
• role, aria-label, aria-hidden

Rule
Use semantic HTML first. Use ARIA only when needed.

Double Tap ♥️ For Part-2