HTML5 & CSS3 Top 50 Viva Questions & Frontend Practical Lab Guide (2026 Edition)

Web Design and Internet Technology practical exams are mandatory for university degrees (BCA, B.Sc IT, B.Tech CSE) and government diplomas (NIELIT O Level M2-R5). During external lab vivas, examiners evaluate whether you understand browser rendering mechanics, layout algorithms, accessibility, and modern CSS3 architectures beyond basic tag memorization.

Here is an essential guide to the top 50 HTML5 and CSS3 viva questions, compiled by Er. Sumit Kumar at MSK Institute.

1. What is the DOCTYPE declaration and why is <!DOCTYPE html> essential?

The <!DOCTYPE html> declaration is not an HTML tag; it is an instruction to the web browser about the version of the HTML standard the document is written in.

• In HTML5, <!DOCTYPE html> is case-insensitive, clean, and concise.
• Why it matters: Without it, modern browsers drop into "Quirks Mode", emulating outdated 1990s Netscape/Internet Explorer rendering bugs, which shatters modern CSS layouts.

2. What are Semantic Elements in HTML5 and why are they preferred over <div>?

Semantic tags clearly describe their meaning and purpose to both the browser and developer:

• Non-semantic tags: <div>, <span> (tell nothing about their content).
• Semantic tags: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.

3 Major Advantages:

1. 1
   SEO (Search Engine Optimization): Google web crawlers prioritize content inside <article> and <main> over generic wrapper divs.
2. 2
   Accessibility (a11y): Screen readers used by visually impaired users use semantic landmarks to jump directly to primary page content.
3. 3
   Clean Code Maintenance: Developers instantly understand the structural hierarchy of the codebase.

3. Explain the CSS Box Model (With Diagram)

Every visible element in HTML is treated as a rectangular box by the browser rendering engine. From inside to outside:

+-------------------------------------------------+
|                    Margin                       |
|   +-----------------------------------------+   |
|   |                 Border                  |   |
|   |   +---------------------------------+   |   |
|   |   |             Padding             |   |   |
|   |   |   +-------------------------+   |   |   |
|   |   |   |     Content (Width)     |   |   |   |
|   |   |   +-------------------------+   |   |   |
|   |   +---------------------------------+   |   |
|   +-----------------------------------------+   |
+-------------------------------------------------+

• Content: The text, image, or video itself.
• Padding: Clear space around the content, inside the border (inherits element background color).
• Border: A stroke enclosing the padding and content.
• Margin: Transparent space outside the border separating the element from neighboring elements.

4. What is the Difference Between CSS Flexbox and CSS Grid?

5. What are the CSS position Properties?

1. 1
   static: Default for all elements. Follows natural document flow. (top/left/right/bottom do nothing).
2. 2
   relative: Positioned relative to its normal position without affecting sibling elements.
3. 3
   absolute: Positioned relative to its closest positioned ancestor (an ancestor with any position other than static). Removed from normal flow.
4. 4
   fixed: Positioned relative to the viewport browser window. Stays fixed on screen during scrolling (used for sticky headers or floating WhatsApp chat buttons).
5. 5
   sticky: Hybrid of relative and fixed. Acts relative until a scroll threshold is met, then "sticks" to the screen.

6. What is the Difference Between display: none and visibility: hidden?

• display: none;: Completely removes the element from the document rendering flow. It takes up zero space on the screen.
• visibility: hidden;: Hides the element visually, but its layout space is preserved as a blank placeholder.

7. How Does CSS Specificity Work? (Calculation Formula)

When two conflicting CSS rules target the same element, the browser uses Specificity Hierarchy:

$$\text{Inline Styles (1000)} > \text{IDs (100)} > \text{Classes / Attributes / Pseudo-classes (10)} > \text{Elements / Pseudo-elements (1)}$$

8. Summary & Top 3 Tips for Scoring Grade A in Lab Vivas

1. 1
   Demonstrate Responsive Design: Always know how to write @media (max-width: 768px) media queries to handle mobile viewports.
2. 2
   Test Code Live: Run and edit live HTML5/CSS3 snippets in our interactive MSK Code Playground.
3. 3
   Join Full-Stack Mentorship: Learn semantic web design, responsive Tailwind CSS, and React in our comprehensive Full-Stack Web Development Bootcamp at MSK Institute!