TOPIC 1: THE BASICS & DOCUMENT SHELL
Q1. What exactly is HTML, and show me the perfect starting template?
Answer:
HTML (HyperText Markup Language) is the skeleton of every webpage. It’s not a programming
language – it’s a markup language that uses tags to structure content.
🧩 The Perfect Boilerplate (always write this by heart):
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<!-- All visible content goes here -->
</body>
</html>
📌 Key Points:
lang="en" is crucial for accessibility (screen readers) and SEO.
The viewport meta tag is mandatory for mobile responsiveness.
Q2. What is the <!DOCTYPE html> declaration? Can I skip it?
Answer:
NEVER skip it.
The <!DOCTYPE html> tells the browser to render the page in "Standards Mode". If you skip it,
older browsers fall into "Quirks Mode", which emulates IE5 bugs (broken box models, weird
layouts).
💡 Interview Tip: Always say it's the first line and it's case-insensitive in HTML5.
Q3. Differentiate between a Tag, an Element, and an Attribute.
Answer:
Term Meaning Example
Tag The raw markup syntax (opening or closing) <p> or </p>
Element The complete structure (opening tag + content + closing tag) <p>Hello</p>
Attribute Extra info inside the opening tag that configures the element class="main", src="pic.j
✍️Code:
html
<!-- Tag: <a> | Attribute: href="url" | Element: whole line -->
<a href="[Link] target="_blank">Search</a>
Q4. What are Block-level vs Inline elements? Give 5 examples of each.
Answer:
Block-level: Start on a new line, take full width available. They create "blocks" in the flow.
Examples: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <section>, <article>.
Inline: Sit inside a block, take only as much width as needed. They don't break the flow.
Examples: <span>, <a>, <img>, <strong>, <em>, <button>.
⚠️Confusion Alert: You cannot put a block element inside an inline element
(e.g., <span><div></div></span> is invalid HTML – the browser will fix it, but it's bad
practice).
Q5. What's the difference between <div> and <span>?
Answer:
<div> is a block container used for major layout sections (headers, footers, columns).
<span> is an inline container used for small text styling or scripting (e.g., highlighting a single
word).
html
<div class="header"> <!-- Takes full width -->
<span class="highlight">This word</span> is highlighted.
</div>
🔹 TOPIC 2: SEMANTICS & STRUCTURAL TAGS
Q6. What are Semantic Elements? Why are they a big deal?
Answer:
Semantic elements clearly describe their meaning to both the browser and the developer.
Why they matter:
✅ SEO: Search engines understand content hierarchy better.
✅ Accessibility: Screen readers navigate them natively.
✅ Maintainability: Humans read code faster.
Key semantic
tags: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figc
aption>.
Q7. <article> vs <section> – when do I use which?
Answer:
<article> = Self-contained content that makes sense on its own (blog post, news story, forum
post). If you copy it to another page, it still makes sense.
<section> = A thematic grouping of content that is part of a larger whole (e.g., a "Chapter", an
"About Me" block inside a page). It usually needs a heading.
💡 Pro Tip: You can nest <article> inside <section> and vice versa.
Q8. <header> vs <head> – don't confuse them in interviews!
Answer:
<head>: Invisible meta-data container (title, styles, scripts, charset). Never rendered.
<header>: Visible top section of a page or a section (contains logos, navigation, h1 tags).
Q9. What are <figure> and <figcaption> used for?
Answer:
They group media (images, diagrams, code snippets) with a caption. It's semantic and improves
SEO for images.
html
<figure>
<img src="[Link]" alt="Sales chart">
<figcaption>Figure 1: Sales growth in 2025</figcaption>
</figure>
🔹 TOPIC 3: TEXT FORMATTING & LISTS
Q10. <strong> vs <b> – which one should I use and why?
Answer:
<strong> (Semantic): Indicates serious importance (e.g., warnings, keywords). Screen readers
change tone.
<b> (Presentational): Just bold styling. No meaning.
🚨 Interview Answer: Always default to <strong> and <em> (emphasis) for accessibility and SEO.
Only use <b>/<i> if you purely need visual italic/bold without meaning.
Q11. How to write Unordered, Ordered, and Description lists?
Answer:
html
<!-- Bullet points -->
<ul>
<li>Milk</li>
<li>Eggs</li>
</ul>
<!-- Numbered steps (start from 10) -->
<ol start="10">
<li>Mix flour</li>
<li>Bake</li>
</ol>
<!-- Term-Definition pairs -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
📌 Remember: <dl> is highly underrated in interviews – mention it to show depth!
🔹 TOPIC 4: LINKS & NAVIGATION
Q12. How to open a link in a new tab securely?
Answer:
html
<a href="[Link] target="_blank" rel="noopener
noreferrer">Visit</a>
Why rel="noopener noreferrer"?
noopener: Prevents the new page from accessing [Link] (security: stops tab-nabbing
attacks).
noreferrer: Prevents sending the referrer URL (privacy).
Q13. What is the download attribute in a link?
Answer:
It forces the browser to download the file instead of navigating to it.
html
<a href="[Link]" download="My_Resume.pdf">Download CV</a>
The value inside download is the new filename for the saved file.
Q14. What are Email and Telephone links?
Answer:
html
<a href="[Link] Us</a>
<a href="[Link] Now</a>
📌 Bonus: You can add ?subject= or &body= to pre-fill email fields.
🔹 TOPIC 5: IMAGES & RESPONSIVE MEDIA
Q15. How to make images fully responsive with srcset and sizes?
Answer:
srcset provides different image files for different screen widths. sizes tells the browser how
much space the image will actually occupy in CSS.
html
<img src="[Link]"
srcset="[Link] 480w, [Link] 800w, [Link] 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Scenery"
loading="lazy">
How it works: If the screen is 500px wide, the browser sees sizes="100vw" (the image takes
full width), so it picks the nearest source >= 500w, which is [Link] (800w).
Q16. What is the <picture> element used for?
Answer:
It provides "Art Direction" – you can show completely different crops of an image based on
viewport, or serve different file formats (WebP vs JPEG).
html
<picture>
<!-- For wide screens: show wide crop -->
<source srcset="[Link]" media="(min-width: 800px)">
<!-- For mobile: show tall crop -->
<source srcset="[Link]" media="(max-width: 799px)">
<!-- Format fallback: WebP for modern browsers -->
<source srcset="[Link]" type="image/webp">
<!-- Ultimate fallback -->
<img src="[Link]" alt="Hero">
</picture>
Q17. How to embed video and audio without plugins?
Answer:
Use the native HTML5 <video> and <audio> tags. Always include controls to let users
play/pause.
html
<video controls width="600" poster="[Link]">
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
<p>Your browser doesn't support video.</p>
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
</audio>
📌 Key Attributes: autoplay (needs muted in Chrome), loop, preload.
🔹 TOPIC 6: TABLES (STRUCTURED DATA)
Q18. How to merge cells in a table?
Answer:
Use colspan (horizontal merge) and rowspan (vertical merge). Always wrap headers
in <thead>, body in <tbody>, and footer in <tfoot>.
html
<table border="1">
<thead>
<tr><th colspan="3">Student Report</th></tr>
</thead>
<tbody>
<tr>
<td rowspan="2">John</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>B</td>
</tr>
</tbody>
</table>
Q19. What is the caption tag?
Answer:
It defines a table title/caption. It must be the first child of <table> and helps screen readers
identify the table's purpose.
🔹 TOPIC 7: FORMS – THE HEART OF INTERACTIVITY
Q20. How to write a fully accessible form with validation?
Answer:
Use <label for="id"> to link labels with inputs. Use HTML5 validation
attributes: required, pattern, min, max, type.
html
<form action="/submit" method="POST">
<fieldset>
<legend>Personal Details</legend>
<label for="name">Full Name *</label>
<input type="text" id="name" name="name" required placeholder="John Doe">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="65">
<label for="country">Country</label>
<select id="country" name="country">
<option value="">--Select--</option>
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<button type="submit">Submit</button>
</fieldset>
</form>
Q21. What are formaction, formmethod, and formnovalidate?
Answer:
These attributes sit on submit buttons and override the parent <form> settings.
html
<form action="/publish" method="POST">
<input type="text" name="title" required>
<!-- This button skips validation and sends to /draft -->
<button type="submit" formaction="/draft" formnovalidate>Save
Draft</button>
<!-- This button validates and sends to /publish -->
<button type="submit">Publish</button>
</form>
Q22. What is the <fieldset> and <legend>?
Answer:
<fieldset>: Groups related form inputs together (visually and semantically).
<legend>: Provides a caption/title for that group. Essential for accessibility (screen readers
announce the group context).
Q23. What is the datalist element?
Answer:
It provides an auto-complete dropdown for an <input> while still allowing free-text entry. It's
different from <select> (which forces a choice).
html
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
Q24. What is the output element?
Answer:
It represents the result of a calculation (usually used with JavaScript). It's semantic and
accessible.
html
<form oninput="[Link] = parseInt([Link]) + parseInt([Link])">
<input type="number" id="a" value="5"> +
<input type="number" id="b" value="3"> =
<output name="result">8</output>
</form>
🔹 TOPIC 8: HTML5 MODERN APIs (DIALOG, POPOVER, DETAILS)
Q25. Explain the <dialog> element – how is it better than a custom div?
Answer:
The <dialog> element creates a native modal. Using [Link]():
Places it in the Top Layer (above everything, no z-index wars).
Automatically adds a ::backdrop (dimmed background).
Traps focus inside the modal (keyboard users can't tab to background content – huge
accessibility win).
html
<dialog id="confirmDialog">
<p>Are you sure?</p>
<button id="yes">Yes</button>
<button id="no">No</button>
</dialog>
<button
onclick="[Link]('confirmDialog').showModal()">Open</button>
🚀 Interview Tip: Always mention focus trapping – it's the #1 reason to use it.
Q26. What is the popover attribute (new standard)?
Answer:
The popover attribute turns any element into a lightweight, non-modal popup (tooltip,
dropdown). It does NOT trap focus (user can click the background). Great for UI enhancements.
html
<button popovertarget="myPopover">Toggle</button>
<div id="myPopover" popover>I'm a popover!</div>
Q27. How to build an accordion without any JavaScript?
Answer:
Use <details> and <summary>. The browser handles the open/close state natively.
html
<details>
<summary>What is HTML?</summary>
<p>HTML is HyperText Markup Language.</p>
</details>
<details open> <!-- 'open' attribute expands it by default -->
<summary>What is CSS?</summary>
<p>CSS is for styling.</p>
</details>
🔹 TOPIC 9: PERFORMANCE (ASYNC, DEFER, PRELOAD)
Q28. async vs defer in <script> – the definitive explanation.
Answer:
Attribute Download Execution Order
Normal Blocks HTML parsing Immediately when fetched In order
Non-blocking Immediately after download (pauses
async Not guaranteed
(parallel) HTML)
Non-blocking Guaranteed
defer After HTML is fully parsed
(parallel) order
html
<script src="[Link]" async></script> <!-- Standalone, exec ASAP -->
<script src="[Link]" defer></script> <!-- Waits for DOM -->
<script src="[Link]" defer></script> <!-- Executes after jQuery -->
📌 Rule of Thumb: Use defer for DOM-dependent scripts. Use async for independent trackers.
Q29. What are preload, prefetch, and preconnect?
Answer:
preload (High Priority): Fetches critical resources needed right now (fonts, hero images).
prefetch (Lowest Priority): Fetches resources for the next page the user might visit (idle time).
preconnect (High Priority): Pre-establishes DNS/TLS handshakes with a third-party domain.
html
<link rel="preload" as="font" href="font.woff2" crossorigin>
<link rel="preconnect" href="[Link]
<link rel="prefetch" href="[Link]">
Q30. What does loading="lazy" do?
Answer:
It defers loading of off-screen images/iframes until the user scrolls near them. Massive
performance booster.
html
<img src="[Link]" loading="lazy" alt="...">
🔹 TOPIC 10: ACCESSIBILITY (A11Y) – ARIA & INERT
Q31. What are ARIA Landmarks and Live Regions?
Answer:
Landmarks (role="main", role="navigation"): Let screen reader users jump directly to
specific regions (skip nav).
Live Regions (aria-live): Automatically announce dynamic content changes (chat messages,
errors).
html
<div aria-live="polite" id="status">Saved.</div> <!-- Waits -->
<div aria-live="assertive" role="alert">Error!</div> <!-- Interrupts -->
Q32. What is the inert attribute and why is it revolutionary?
Answer:
The inert attribute makes an element and all its children completely unreachable – click, focus,
and screen readers all ignore it.
html
<main inert> <!-- All buttons/links in here are dead -->
<button>Click me (inert)</button>
</main>
<dialog open> <!-- Only this modal is interactive -->
<p>Focus is trapped here.</p>
</dialog>
🚀 Why revolutionary: Previously, developers had to manually add tabindex="-1" and aria-
hidden="true" to hundreds of elements when a modal opened. Now, just add inert to the
main wrapper.
Q33. How to hide elements from screen readers but keep them visible?
Answer:
Use aria-hidden="true" (visible on screen, ignored by screen readers). Use for decorative
icons.
Use hidden attribute (hides from everyone – both visual and screen readers).
🔹 TOPIC 11: SECURITY & CORS
Q34. How to secure an <iframe> using sandbox?
Answer:
The sandbox attribute applies extreme restrictions. An empty sandbox="" disables scripts,
forms, popups, and same-origin.
html
<!-- Super restrictive -->
<iframe src="[Link]" sandbox=""></iframe>
<!-- Allow specific features -->
<iframe src="[Link]" sandbox="allow-scripts allow-forms"></iframe>
⚠️Danger: Never use allow-scripts with allow-same-origin together unless you fully trust
the source – it removes the origin barrier.
Q35. What is Subresource Integrity (SRI)?
Answer:
SRI uses a cryptographic hash to verify that a CDN file hasn't been tampered with. If the hash
mismatches, the browser blocks the script.
html
<script src="[Link]
integrity="sha384-abc123def456..."
crossorigin="anonymous"></script>
Q36. How does the crossorigin attribute work?
Answer:
No attribute: No Origin header sent. Script errors are hidden (you see "Script Error").
crossorigin="anonymous": Sends Origin header without cookies. Server must respond
with Access-Control-Allow-Origin: *. Exposes errors.
crossorigin="use-credentials": Sends Origin header with cookies. Server must respond
with specific domain (not *) and Access-Control-Allow-Credentials: true.
🔹 TOPIC 12: META TAGS, SEO & OPEN GRAPH
Q37. What Meta tags are absolutely critical for SEO?
Answer:
html
<title>Page Title (under 60 chars)</title>
<meta name="description" content="Snippet under 160 chars">
<meta name="robots" content="index, follow">
<link rel="canonical" href="[Link]
Q38. How to make your page look great when shared on social media?
Answer:
Use Open Graph (Facebook/LinkedIn) and Twitter Cards.
html
<meta property="og:title" content="My Article">
<meta property="og:description" content="Read this amazing guide.">
<meta property="og:image" content="[Link]
<meta property="og:url" content="[Link]
<meta name="twitter:card" content="summary_large_image">
🔹 TOPIC 13: STORAGE & DATA ATTRIBUTES
Q39. data-* attributes – what are they and how to access them?
Answer:
They store private custom data on HTML elements. Access via JavaScript dataset.
html
<div id="user" data-user-id="123" data-role="admin">John</div>
<script>
const el = [Link]('user');
[Link]([Link]); // "123" (kebab-case becomes camelCase)
</script>
Q40. localStorage vs sessionStorage vs Cookies – quick cheat sheet.
Answer:
Feature localStorage sessionStorage Cookies
Lifespan Forever (until cleared) Tab closed Expiry set by server
Capacity ~10MB ~5MB ~4KB
Sent to server? ❌ No ❌ No ✅ Yes (auto)
Access All tabs Same tab only All tabs
🔹 TOPIC 14: GLOBAL ATTRIBUTES & ADVANCED HTML
Q41. List 5 important Global Attributes (available on all elements).
Answer:
id – Unique identifier.
class – CSS/JS selector (multiple allowed).
style – Inline CSS.
title – Tooltip text on hover.
lang – Language of the element's content.
tabindex – Control keyboard navigation order.
hidden – Hides the element.
contenteditable – Makes the element editable by the user.
draggable – Enables drag & drop.
Q42. What are Void (Empty) Elements?
Answer:
Void elements have no closing tag and cannot contain content.
List: <br>, <hr>, <img>, <input>, <link>, <meta>, <source>, <embed>, <area>, <base>, <col>.
Q43. How does the HTML5 parser handle broken markup
(like <p><div></div></p>)?
Answer:
The HTML5 parser has an "Adoption Agency Algorithm". It never crashes. It automatically
corrects the structure.
Example: <p>Hello
<div>World</div></p> becomes <p>Hello</p><div>World</div> because a <div> cannot
be a child of a <p>. The parser implicitly closes the <p> before the <div>.
Q44. hidden vs aria-hidden="true" – what's the difference?
Answer:
hidden (HTML attribute): Removes element from render tree AND accessibility tree.
(Like display:none).
aria-hidden="true": Keeps it visually visible but removes it from the accessibility tree (screen
readers ignore it). Used for decorative icons.
Q45. What is the rel="canonical" tag?
Answer:
It tells search engines the "master" URL for a page when there are duplicates (e.g., ?
utm_source=... variations). It consolidates SEO ranking to the main URL.
Q46. What is the sandbox attribute specifically for iframes?
Answer: (Already covered in Q34, but here's a deeper note)
An empty sandbox applies ALL restrictions. You add tokens to relax:
allow-scripts
allow-forms
allow-popups
allow-same-origin (use cautiously with scripts!)
Q47. What are HTML Entities? Give examples.
Answer:
Entities represent reserved characters or special symbols.
Character Entity
< <
> >
& &
" "
© ©
(non-breaking space)
Q48. <template> vs <slot> – the Web Component foundation.
Answer:
<template>: Contains inert HTML that isn't rendered until cloned via JavaScript. Images don't
download, scripts don't run. It's a stamp for creating multiple elements.
<slot>: A placeholder inside a Web Component's Shadow DOM. It allows the parent page to
inject custom content into the component.
Q49. How do you make an element editable by the user?
Answer:
Use the contenteditable global attribute.
html
<div contenteditable="true">You can edit this text directly.</div>
Q50. What is the difference between <canvas> and <svg>? (Brief)
Answer:
<canvas>: Raster-based (pixel). Good for games, dynamic graphics, image manipulation.
Requires JavaScript to draw. Loses quality on zoom.
<svg>: Vector-based (XML). Good for static charts, icons, illustrations. Scales perfectly. Styled
with CSS. Better for accessibility.
🎓 My Last-Minute Summary)
Topic Golden Rule
Doctype Always write <!DOCTYPE html> at the very top.
Semantics If a tag has meaning (like <article>), use it over <div>.
Forms Always use <label for="id"> for accessibility.
Topic Golden Rule
Links Always add rel="noopener" to external _blank links.
Images Always use alt text. Always use srcset for responsiveness.
Performance Use defer for DOM scripts. Use loading="lazy" for images.
Accessibility Use aria-live for dynamic updates. Use inert for modals.
Security Use sandbox for iframes. Use SRI for CDN scripts.