Scribd
Upload
8 views17 pages

Basic HTML Interview Questions

Basic HTML Interview Questions

Uploaded by

ehaq14520
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views17 pages

Basic HTML Interview Questions

Basic HTML Interview Questions

Uploaded by

ehaq14520
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Basic HTML Interview Questions

HTML mein logic nahin hota toh fir HTML developer kya karta hai?
(Difference between HTML vs actual programming language)

1. HTML kya hota hai?

Ans: HTML ek markup language hai jo web pages ka structure banata hai. Isse browser content ko display karta
hai.

2. HTML ka full form?

Ans: HyperText Markup Language.

3. DOCTYPE kya hota hai aur kyun use hota hai?

Ans: <!DOCTYPE html> browser ko batata hai ki yeh HTML5 document hai. Yeh rendering mode set karta hai.

4. <html>, <head>, <body> tags ka use?

Ans:

• <html>: pura HTML document wrapper

• <head>: metadata, title, CSS, scripts

• <body>: jo content screen par dikhta hai

5. HTML Tag vs HTML Element?

Ans:

• Tag = <p>

• Element = <p> content </p>

6. Block vs Inline Elements?

Ans: Block element full width leta hai (e.g. div, h1, p), inline sirf content ki width (span, a)

7. <div> vs <span>?

Ans:

• <div> = block-level container

• <span> = inline-level container

8. Semantic tags kya hote hain?

Ans: Jo meaning batate hain + SEO friendly: (header, footer, nav, section, article)

9. Self-closing tags example?

Ans: <br>, <hr>, <img>, <input>

10. <meta> tag ka use?

Ans: Metadata store karta hai (charset, viewport, SEO keywords)

11. HTML comments kaise likhte hain?

Ans: <!-- This is a comment -->


12. <a> tag ke attributes?

Ans: href (link), target, title, rel, download

13. HTML entities kya hain?

Ans: Special characters ke codes jaise &nbsp; (non-breaking space), &lt; <, &amp; &

14. id vs class difference?

Ans: id unique hota hai (ek page me ek), class multiple elements me use ho sakti hai.

15. Form tag basic structure?

Ans:

<form action="submit.php" method="post">

<input type="text" />

<button type="submit">Send</button>

</form>

16. <input> ke types?

Ans: text, password, email, number, checkbox, radio, date, file, submit, etc.

17. <label> tag use?

Ans: Form inputs ko clickable name dena, accessibility improve karta hai.

18. placeholder vs value?

Ans: placeholder = light hint text, value = actual default filled value.

19. Table tags?

Ans: <table>, <tr>, <th>, <td>, caption, thead, tbody.

20. <ul> vs <ol>?

Ans: <ul> = bullet-point list (unordered), <ol> = numbered list (ordered)

Intermediate HTML Q&A

21. HTML5 ke new features kaunse hain?

Ans: Semantic tags (header, footer, nav), audio/video tags, canvas, local storage, geolocation API, etc.

22. <audio> & <video> tags ka use?

Ans: Web page par multimedia play karne ke liye bina external plugins ke. <source> ke through multiple
formats de sakte hain.

23. Canvas tag kya hai?

Ans: <canvas> element 2D graphics draw karne ke liye JavaScript ke through use hota hai (like charts/games).
24. Local storage vs Session storage?

Feature LocalStorage SessionStorage

Expiry Permanent (until clear) Tab close hote hi delete

Capacity 5MB approx. 5MB approx.

25. SEO ke liye important HTML tags?

Ans: <title>, <meta name="description">, heading tags (h1, h2), <alt> in images, proper semantic sections.

26. New tab open kaise karte hain link?

Ans: <a href="url" target="_blank">Click</a>

27. Alt attribute kyun zaroori?

Ans: Image load na ho toh text dikhe, plus accessibility (screen readers), SEO improvement.

28. <strong> vs <b> ; <em> vs <i> ?

Ans: <strong> and <em> have semantic meaning (important, emphasis) while <b> and <i> sirf style dene ke
liye.

29. Iframe kya hota hai?

Ans: Ek HTML page ke andar doosra web page embed karne ke liye. Eg: YouTube video embed.

30. HTML form validation attributes?

Ans: required, pattern, maxlength, min, max, type="email" etc.

31. Progressive enhancement vs graceful degradation?

Ans:

• Progressive enhancement: basic content sabko dikhe, features advance browsers ko.

• Graceful degradation: pehle advanced banaate, fir older browsers ke liye fallback.

32. <script> tag HTML mein kyun use?

Ans: JavaScript include karne ke liye – internal ya external.

33. Inline CSS vs Internal vs External CSS?

Type Location

Inline style="" attribute

Internal <style> tag in <head>

External separate .css file link

34. Kya multiple <head> tags possible hai?

Ans: No. HTML document mein sirf ek head tag valid hota hai.

Advanced HTML Q&A

35. ARIA roles kya hote hain?

Ans: Accessibility ke liye attributes jaise role="button" jo screen readers ko batate hai element ka purpose.
36. Semantic tags SEO mein kaise help karte?

Ans: Search engines structure samajh paate hain, better indexing hoti hai.

37. HTML vs XHTML difference?

Ans: XHTML XML-based strict version hai HTML ka. Tags properly close karna mandatory, attribute names
lowercase etc.

38. DOM kya hota hai?

Ans: Document Object Model – HTML page ka tree structure representation jisko JS se manipulate kar sakte
hain.

39. Custom data-* attributes kya hain?

Ans: Apne extra data store karne ke liye like <div data-id="123"> – JS se fetch kar sakte ho.

40. Web Components?

Ans: Custom reusable elements with encapsulated structure using Shadow DOM, templates, custom elements.

41. <section> vs <article>?

Ans: Section = generic group of content. Article = self-contained independent content (blog post, news).

42. <picture> tag kya hai?

Ans: Responsive images serve karne ke liye based on device width – different sources for different screen sizes.

43. Lazy loading of images?

Ans: Images tab load hon jab viewport mein aaye – <img loading="lazy" ...> improves performance.

44. MIME types kya hote hain?

Ans: Content type define karta hai server se file ka type – e.g. text/html, image/png, application/json.

45. Nested forms allowed hai kya?

Ans: No. HTML specification allow nahi karta form ke andar doosra form.

46. <button> types?

Ans: type="submit" (form submit), type="reset" (clear form), type="button" (normal button).

47. Meta viewport tag kya karta?

Ans: Responsive mobile scaling ke liye –

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

48. defer vs async in script tag?

Ans:

• async: script parallel load + run immediately (order may break)

• defer: script load parallel but run after HTML parsing completed (in order)

49. contenteditable attribute?

Ans: HTML element ko editable bana deta hai – <div contenteditable="true">Some text</div>.
50. SSR vs CSR (HTML point)?

Ans: Server-side rendering: server HTML ready bhejta hai (fast first load). Client-side rendering: browser JS se
HTML banata hai (React apps).

Advanced HTML Questions – Part 1 (1 to 25)

1. What is the default character encoding in HTML5?

Ans: UTF-8

2. What is a ‘void element’?

Ans: Elements that cannot have any child content and do not require a closing tag. Eg: <img>, <br>, <input>

3. What is the purpose of the <noscript> tag?

Ans: Content inside <noscript> is shown to users whose browsers do not support JavaScript or have it disabled.

4. What is the difference between <meta charset="UTF-8"> and <meta http-equiv="Content-Type">?

Ans: charset is short syntax in HTML5. http-equiv is older HTML4 way and more verbose. Both set encoding
for document.

5. What is the difference between <embed> and <object> tags?

Ans:

• <embed> directly embeds external content (like PDF, Flash)

• <object> is more flexible, can specify fallback and is considered more standard

6. Explain Shadow DOM in simple terms.

Ans: It is a part of Web Components that allows encapsulation of HTML structure and styles so they don’t affect
the rest of the page.

7. What is the difference between custom elements and standard elements?

Ans: Custom elements are user-defined tags like <my-card></my-card> that behave like real HTML tags using
JS.

8. What is the use of the <template> tag?

Ans: It holds HTML that is not rendered unless activated via JavaScript. Useful for rendering blocks
dynamically.

9. What does the srcset attribute in <img> do?

Ans: Provides multiple image URLs with different device resolutions so the browser selects the best one.
10. What is the difference between HTMLCollection and NodeList?

Ans:

• HTMLCollection is live & only contains element nodes

• NodeList can include text nodes and may not be live

11. What is a Critical Rendering Path?

Ans: The sequence of steps the browser takes to convert HTML, CSS, JS to pixels on screen. Optimizing it
makes site faster.

12. Explain what happens if you omit the <tbody> tag in a table.

Ans: Browsers automatically insert <tbody> around table rows for you even if you omit it.

13. What is ‘HTML parsing’?

Ans: Browser reads HTML and converts it into a DOM tree structure.

14. What is the purpose of loading="lazy" attribute in <img>?

Ans: Delays loading of image until it scrolls into viewport, improving page performance.

15. What’s the difference between Block Formatting Context (BFC) and Stack Context?

Ans: BFC is a layout concept that prevents margin collapsing, Stack Context deals with z-index stacking of
positioned elements.

16. What is the difference between hidden attribute and display: none via CSS?

Ans: Both hide the element visually. But hidden is boolean HTML attribute, can be overridden by CSS, and
accessible to screen readers differently.

17. What does the rel="noopener noreferrer" do on an <a> tag?

Ans: Prevents the opened page from gaining access to the original window via window.opener (security) and
hiding referrer header.

18. What is a Document Type Definition (DTD) and why does HTML5 not need one?

Ans: DTD defines valid structure for SGML-based docs (HTML4). HTML5 is no longer based on SGML so
DTD is not needed, only a simple doctype.

19. Difference between parsing HTML in a browser vs server-side?

Ans: Browsers create a live interactive DOM, handle scripts, CSS and events. Server-side parsers just read tags
for data or transformation.

20. What is the purpose of a fieldset and legend?

Ans: They group form controls and provide a caption, improving accessibility and semantics.

21. What is the function of the <time> tag?

Ans: Represents a specific date/time that can be machine-readable via datetime attribute, improving microdata
and semantic search.
22. Difference between title and aria-label attributes?

Ans:

• title shows tooltip and may be read by screen reader

• aria-label only used for accessibility (screen readers), no visual tooltip

23. How to prevent HTML injection or XSS using HTML only?

Ans: You can’t fully — must sanitize content server-side or use textContent instead of innerHTML.

24. What is the role of <mark> tag?

Ans: Highlights text as marked or relevant, usually with a yellow background.

25. Explain what a “fallback content” means in HTML.

Ans: Content placed between tags (like <video>fallback text</video>) that shows if browser doesn't support
that tag.

Advanced HTML Questions – Part 2 (26 to 50)

26. What does the <progress> element do?

Ans: It displays a progress bar showing completion progress of a task (e.g. 0–100%).

27. Difference between <progress> and <meter>?

Ans:

• <progress> = indicates progress of a non-specific task (like loading).

• <meter> = represents a known numeric measure within a range (like score, disk usage).

28. What is a “Microdata” in HTML?

Ans: Way of embedding machine-readable metadata into HTML using attributes like itemscope, itemtype,
itemprop.

29. What is the purpose of the <details> and <summary> tags?

Ans: Used to create collapsible content; <summary> is always visible and acts like a toggle.

30. What is HTML Drag and Drop API?

Ans: A feature allowing draggable elements using attributes like draggable="true" plus JS events (dragstart,
drop).

31. What happens if <html> tag is omitted?

Ans: Browser automatically inserts it based on parsing rules. But it should be there for standards compliance.

32. What is the difference between <head> and <header>?

Ans:

• <head> is metadata container for the whole document.


• <header> is a section within <body> (like top of page or article).

33. How does HTML Geolocation API work?

Ans: Allows the browser to access user location by using navigator.geolocation methods (getCurrentPosition).

34. What is the main difference between HTML4 and HTML5 in handling content?

Ans: HTML5 is not based on SGML, provides semantic tags, multimedia support, offline storage, web workers,
etc.

35. What is a “placeholder attribute fallback” in older browsers?

Ans: Old browsers don’t support placeholder, so developers use JS or CSS to mimic placeholder behavior.

36. Why is the <base> tag used?

Ans: Sets a base URL for all relative URLs in the document. Only one <base> tag allowed.

37. What is the sandbox attribute in <iframe>?

Ans: Restricts iframe content (disables scripts, prevents forms) unless specific permissions are added

38. What is the purpose of <bdo> tag?

Ans: Overrides text direction (LTR/RTL) — bi-directional override.

39. What is the difference between <kbd>, <code> and <samp>?

• <kbd> = keyboard input

• <code> = computer code snippet

• <samp> = sample output from system/program

40. Explain different script loading strategies in HTML.

• Normal (blocking)

• Async (download parallel, run immediately)

• Defer (download parallel, run after HTML parsed)

• Dynamic script injection via JS

41. What is the manifest attribute used for in older HTML5?

Ans: It was used in Application Cache to allow offline access. It’s deprecated and replaced by Service Workers.

42. What is a “cookie-less domain” and why used for static assets?

Ans: Domains that do not send cookies in HTTP headers – reduces request size for images/css/js and improves
performance.

43. Why should we avoid using <font> tag in modern HTML?

Ans: Deprecated — all styling should be done using CSS, not with HTML tags.
44. What is data- attribute good for?

Ans: Attach custom data to HTML elements that can be accessed via JavaScript (no effect on layout).

45. Explain what ‘preload’ and ‘prefetch’ links do (<link rel="preload"> / <link rel="prefetch">).

• preload: loads resource early (high priority) needed for current page

• prefetch: loads resource likely needed for future navigation (low priorit

46. What is tabindex attribute for?

Ans: Defines tab order for keyboard navigation or makes non-focusable elements focusable.

47. Why do we use role attribute (ARIA)?

Ans: Helps screen readers understand element purpose (e.g. role="button"). Useful when using custom
elements.

48. Difference between colspan and rowspan in tables?

Ans: colspan extends cell across multiple columns, rowspan across multiple rows.

49. What is the <abbr> tag used for?

Ans: To denote abbreviations or acronyms; helps accessibility/SEO by giving full meaning via title attr.

50. What is Content Security Policy (CSP) and how can it be embedded in HTML?

Ans: Security layer to prevent XSS attacks. Can be added via <meta http-equiv="Content-Security-Policy"
content="..." > in document head.

51. What is a 'reflow' and 'repaint' in a browser?

Ans:

• Reflow: Happens when layout/position of elements changes → browser recalculates layout.

• Repaint: Only visual appearance changes (color, background), layout same – faster.

52. What does rel="preconnect" do?

Ans: Allows the browser to make early network connections (DNS, TLS handshake) to external domains before
actual requests, improving load speed.

53. What can happen if you omit closing tags like </li> or </p>?

Ans: Browsers usually auto-close them during parsing (HTML is forgiving), but structure may break or
unexpected layout can happen.

54. Can HTML comments be nested?

Ans: No. Nested comments break resulting in rendering issues.

55. What is the srcdoc attribute of <iframe>?

Ans: It allows you to provide inline HTML content directly inside the iframe without external file.
56. Why is it bad to put inline JavaScript inside href="#"?

Ans: It can cause page scroll-to-top, is bad for accessibility, and mixes behavior with markup.

57. What is 'DocumentFragment'?

Ans: Lightweight DOM container used for building a portion of DOM in memory, then inserting at once –
prevents multiple reflows.

58. Explain HTML ‘parse blocking’ CSS & JS.

Ans: External CSS and script tags pause HTML parsing until resource is downloaded & parsed — blocking and
slowing page load.

59. What is render tree vs DOM tree?

Ans: DOM is structure of HTML nodes, Render Tree is DOM + CSS styling only nodes that will be drawn
(excluding display:none).

60. How can you detect browser support for a HTML feature without JS?

Ans: Mostly by progressive enhancement, fallback text/elements, or using <noscript> (limited)

61. What is the HTTP 'Accept' header and why HTML matters?

Ans: Browser sends Accept: text/html telling server what content type it can handle; server sends correct HTML
MIME type.

62. What does <link rel="canonical"> do?

Ans: Tells search engines the preferred URL for a page to avoid duplicate content problems.

63. Difference: innerHTML, outerHTML, textContent?

Property Description

innerHTML HTML inside element

outerHTML Includes the element tag itself

textContent Only text without HTML tags

64. Why avoid multiple <h1> in HTML4 vs HTML5?

Ans: HTML4 allowed 1 main <h1>; HTML5 allows multiple <h1> per section. Still best practice to use logical
heading hierarchy.

65. What is speculative parsing?

Ans: Browser parses ahead (speculates) to find resources like CSS/JS while still building DOM – for speed.

66. Difference between navigator.userAgent sniffing vs feature detection?

Ans: User-Agent sniffing is unreliable. Feature detection checks if a capability exists (modern & safer
approach)

67. What is the use of <output> tag?

Ans: Displays result of a calculation or JS operation (like a calculated total).


68. Why using <center>, <marquee> tags is bad?

Ans: Deprecated in HTML5, non-semantic, CSS should handle style/animation.

69. What is difference between CSS content and HTML data-*?

Ans: data-* is custom attribute to store data. CSS content is pseudo-element content only for display.

70. Why is whitespace inside inline-block elements sometimes causing gap?

Ans: Browsers treat newline/spaces in HTML as actual space between inline-block elements → adds a 4px or
gap.

71. What are Web Workers?

Ans: JavaScript running in background threads separate from main UI thread, but part of HTML5 spec, not
HTML markup tag.

72. What is difference between <label for="id"> vs wrapping input inside label?

Ans: Both link the text to input. for= works for inputs outside label. Wrapping works without id attribute.

73. What is the difference between escape, encodeURI, encodeURIComponent?

Ans:

• escape() is old, not safe.

• encodeURI() encodes full URL except :, ?, etc.

• encodeURIComponent() encodes every unsafe char in the string.

74. What is MIME sniffing and how to prevent it?

Ans: Browser guessing content type if header missing → can cause security issues. Prevent by X-Content-Type-
Options: nosniff header.

75. What does <script type="module"> do?

Ans: Loads JS as ES6 module, supports import/export syntax, deferred by default, and scoped.

76. What happens if you put block-level elements inside <p> tags?

Ans: It’s invalid HTML; browser will auto-close <p> before block-level element and unexpected layout may
occur.

77. What is a polyfill in context of HTML features?

Ans: A snippet of code (usually JS) that replicates the functionality of a newer HTML/JS feature on older
browsers not supporting it.

78. Difference between onload vs DOMContentLoaded events?

Ans:

• DOMContentLoaded: fires after HTML is parsed (faster).

• onload: waits for images, CSS, scripts to load completely.


79. What does ‘quirks mode’ mean in browsers?

Ans: Browser renders page in backward-compatible mode (like old IE behavior) due to missing/incorrect
doctype.

80. What is the scoped attribute in <style>?

Ans: Deprecated proposal; intended to limit style to the parent element, but now replaced by Shadow DOM.

81. Can we specify multiple MIME types in <meta http-equiv>?

Ans: Only one Content-Type header applies. Multiple meta tags can conflict — last one wins.

82. What is <dialog> element?

Ans: New HTML element for modal dialogs and pop-ups. Requires JS .show() and .close() methods.

83. What is ‘iframe busting’?

Ans: Preventing a page from being embedded in an iframe using headers like X-Frame-Options, prevents
clickjacking.

84. Difference between <script> placed in <body> vs <head>?

Ans:

• In <head> blocks parsing (unless async/defer used),

• In <body> waits until HTML loaded = better for performance historically.

85. What happens if autocomplete="off" in form?

Ans: Browser avoids autofilling saved info, but some browsers ignore this for certain fields like
username/email.

86. What is a nonce attribute in script tags?

Ans: A random token to allow only specific inline scripts under CSP to run — prevents XSS.

87. Explain difference between <figure> and <figcaption>.

Ans: <figure> wraps content like an image or chart. <figcaption> is the caption or label for that figure.

88. Why should we avoid using target="_blank" without rel attributes?

Ans: Because new page can access window.opener and potentially redirect or manipulate original page →
security risk.

89. What is the difference between <small> and CSS .small class usage?

Ans: <small> has semantic meaning: represents fine print or legal notes. .small is just styling.

90. How to embed SVG inline vs using <img>?

Ans: Inline SVG (<svg>...</svg>) is part of DOM, can be styled by CSS. Using <img src="file.svg"> treats it
like image, not part of DOM.
91. What is 'CORS' and how it relates to HTML?

Ans: Cross-Origin Resource Sharing — browser security policy to restrict requests between different domains
enforced in HTML requests for APIs.

92. What is the purpose of <base target="_blank">?

Ans: Makes all links open in new tab by default unless overridden individually.

93. What happens when using innerHTML += ... repeatedly?

Ans: The whole innerHTML content re-parses and reflows → expensive, potential DOM state loss (event
listeners lost).

94. Explain HTML insertion attack.

Ans: Type of XSS where user inputs HTML tags that get rendered, compromising layout or structure.

95. What is <rp> and <rt> inside ruby annotation?

Ans: For East Asian typography, <rt> is text of pronunciation. <rp> provides parentheses fallback if browser
doesn’t support ruby.

96. What is will-change CSS in HTML context?

Ans: Hint to browser that element is likely to change (transform, opacity) so it can optimize; misuse can cause
memory issues.

97. Explain the “Critical CSS” concept.

Ans: Inline only essential CSS needed for above-the-fold content in <head> to render fast before loading full
stylesheet.

98. Difference between <noscript> and conditional comments?

Ans: <noscript> is standard; conditional comments were IE-only feature used to load code/styles only in older
IE versions.

99. What are custom HTML elements lifecycle callbacks?

Ans: In JS for custom elements: connectedCallback, disconnectedCallback, adoptedCallback,


attributeChangedCallback.

100. What is difference between data: URLs and normal URLs in an <img> tag?

Ans: data: URLs embed image bytes directly in HTML (Base64). Normal URLs fetch external file. Data URLs
increase HTML size but reduce extra HTTP requests.

Congratulations! All 100 Advanced HTML Questions Completed!


You now have a massive pool of real interview-level HTML topics.

1. What is HTML streaming and why is it important for server-side rendering?

Ans: HTML streaming sends parts of the HTML document to the browser while the server is still generating
later parts, improving perceived performance.
2. What is the difference between HTML templates and JSX templates?

Ans: HTML templates are static and parsed by the browser. JSX is a syntax extension for JS compiled into
React.createElement.

3. What is a “hydration” process in HTML with frameworks like React?

Ans: Hydration is attaching JS behavior/events to server-rendered HTML to make it interactive on the client
side.

4. What does the integrity attribute in <script> or <link> do?

Ans: Subresource Integrity (SRI) allows browser to verify resource via hash to prevent tampered external
resources.

5. Explain the use of <wbr> tag.

Ans: It suggests a line break opportunity for the browser during word wrapping (word break hint).

6. Difference between <datalist> and <select> tags?

Ans: <select> is a dropdown list; <datalist> is for autocomplete suggestions while still allowing free typing.

7. What are “microformats” in HTML?

Ans: Conventions using class names like h-card, h-event to embed structured data that machines can parse
without extra APIs.

8. What is document.write() downside compared to modern HTML updates?

Ans: It blocks rendering and can overwrite full document if used after page load.

9. Can a <button> contain another block element inside it?

Ans: Yes in HTML5, a button can contain other elements like <div> or <span>.

10. What does the sandbox="allow-same-origin allow-scripts" in iframe mean?

Ans: It whitelists only those two restrictions: allows JS and same-origin behavior, but still blocks others like
forms or popups.

11. What is the difference between innerHTML and insertAdjacentHTML()?

Ans: insertAdjacentHTML inserts HTML without re-parsing entire element and without removing existing
event listeners.

12. What is HTML injection vs JavaScript injection?

Ans: HTML injection modifies page structure or layout; JS injection allows malicious script execution—XSS is
form of JS injection.

13. Purpose of role="alert" in accessibility?

Ans: Announces critical messages immediately to screen readers like notifications.

14. Can we use async and defer together on the same script tag?

Ans: If both are present, async is ignored and script acts like defer.
15. What is HTML Document.readyState?

Ans: A property (loading, interactive, complete) showing current parsing status of the document.

16. Difference between incremental DOM and virtual DOM in frameworks context?

Ans: Incremental DOM (Google’s approach) patches DOM as needed. Virtual DOM re-renders diff of entire
virtual structure.

17. What is meta http-equiv="refresh"?

Ans: Automatically refreshes or redirects a page after a specified time interval.

18. What is an HTML cloning attack?

Ans: Copying the structure of a legitimate page to trick users phish-style, often combined with HTML/CSS
mimicry.

19. What is meaning of aria-hidden="true"?

Ans: Hides content from assistive technologies (screen readers), even if visible visually.

20. What is “progressive HTML rendering”?

Ans: Delivering HTML in chunks combined with chunked transfer encoding, improving first contentful paint.

21. What is the <menu> and <menuitem> tag?

Ans: Used for context menus; <menuitem> is deprecated but <menu> can be used with browser context menu
features.

22. Explain the difference: headers attribute in <td> vs scope in <th>

Ans: scope on <th> Uplifts header to row or column; headers attribute on <td> explicitly associates data cell
with header id for accessibility.

23. What is Preconnect vs Prefetch in network hints?

Ans: Preconnect establishes connection. Prefetch downloads resource for future navigation.

24. What is MIME sniffing override in HTML?

Ans: Using <meta http-equiv="X-Content-Type-Options" content="nosniff"> to tell browser not to guess MIME
type.

25. What is a scroll restoration in HTML5 history API?

Ans: history.scrollRestoration = 'manual' or 'auto' controls restoring scroll position when navigating back.

26. What is the advantage of using rel="dns-prefetch"?

Ans: Instructs the browser to perform DNS lookup for an external domain early, even if no resources have been
requested yet.

27. Explain affordance in UI and its relation to specific HTML elements.

Ans: Affordance means visual cue of how to interact: e.g <button> clearly clickable. Semantic HTML elements
create better affordance and accessibility.
28. What are HTML parsing quirks that involve <tbody>, <thead>, and <tfoot>?

Ans: Browsers automatically reorder table sections even if written out-of-order, and insert <tbody> if not
present.

29. What is ARIA live-region and how do you declare it?

Ans: Regions where updates should be announced by screen readers automatically: e.g. aria-live="polite" or
assertive.

30. Purpose of <picture> + <source media="..."> vs CSS @media?

Ans: <picture> is for responsive images (file-level). CSS media is for styling; cannot swap image file logic as
efficiently.

31. Difference between <main> and <section>?

Ans: <main> is unique content of page (only one allowed). <section> can be multiple content groups.

32. What is Critical Path CSS extraction in context of HTML?

Ans: Extract minimal CSS required to render above-the-fold and inline it in HTML <head> to improve
performance before loading full CSS.

33. Explain HTML white-space collapse.

Ans: Multiple spaces, tabs, newlines in HTML text nodes are collapsed into a single space unless using <pre>
or CSS white-space.

34. Difference between autocomplete="new-password" vs off?

Ans: new-password indicates that the field expects a new password and suggests new strong password; off
might get ignored.

35. What is the crossorigin attribute on <img> or <script>?

Ans: Required when fetching resources from other origins to allow CORS requests with credentials or without
(anonymous).

36. What are HTML 'Custom Elements v1'?

Ans: Official spec to define your own HTML tags using class extends HTMLElement +
window.customElements.define().

37. Why is using <iframe srcdoc="..."> safer sometimes?

Ans: Embeds HTML without making external requests, reducing XSS risk and eliminating network
dependency.

38. What is a 'named anchor' in HTML?

Ans: Using id or name attribute inside an element to allow in-page navigation: <a href="#section1">Go</a>.

39. Explain the difference between HTML comments and conditional comments in IE.

Ans: HTML comments are universal. Conditional comments like <!--[if IE]> were IE-specific for legacy
browser hacks.
40. How can you prevent form auto-submission on Enter key?

Ans: Add onsubmit handler that returns false, or use <button type="button"> for custom buttons, or JS
event.preventDefault().

41. Difference between client-side includes (HTML imports) vs server-side includes?

Ans: HTML imports (deprecated) loaded other HTML into page via browser; server-side includes embed
partials before serving HTML.

42. What is the function of <s> vs <del> vs <strike>?

Ans: <s> = content no longer accurate but not deleted; <del> = removed text with history; <strike> is
deprecated.

43. How to embed mathematical formula in HTML without MathML?

Ans: Use images, or libraries like MathJax which parse custom notation and render via JS/CSS.

44. What is difference between HTML meta viewport width=device-width vs width=content-width?

Ans: device-width matches device screen width; content-width considers content width which may not align
with screen.

45. What is the difference between contenteditable="true" vs using <textarea>?

Ans: contenteditable allows any element to become editable rich text via browser; <textarea> is plain text input
in form.

46. What is a <group> role in ARIA and why used?

Ans: Groups related elements like form options into a single accessible group — helpful for screen readers.

47. Explain the difference between HTML Tags vs Components (in modern JS frameworks).Ans: HTML
tag is static markup. Component is reusable UI unit containing HTML + behavior + state defined in JS.

48. What is the spellcheck attribute?

Ans: Boolean attribute that tells browser to highlight spelling mistakes in editable content.

49. What is ford in accessibility context? (Focus, Operable, Robust, Understandable)?

Ans: Actually “POUR” model is correct (Perceivable, Operable, Understandable, Robust) – principles for
accessible HTML.

50. Why is avoiding multiple nested <div> called ‘div soup’?

Ans: Overuse of <div> without semantic meaning leads to unstructured, hard-to-maintain HTML code — poor
semantics and accessibility.

You might also like