Advanced HTML Interview Questions and Answers
Q: What is semantic HTML and why is it important?
A: Semantic HTML uses elements that clearly describe their meaning (e.g., <article>, <section>). It
improves accessibility, SEO, and code maintainability.
Q: Explain the browsers parsing process for HTML. What are reflows and repaints?
A: The browser builds a DOM from HTML, applies styles (CSSOM), constructs a render tree, and
paints it. Reflow: layout changes. Repaint: visual changes without layout shifts.
Q: How do aria-* attributes enhance accessibility?
A: ARIA attributes provide context to screen readers (e.g., aria-label, aria-hidden). Use native HTML
when possible for better support.
Q: Difference between client-side and server-side validation in HTML?
A: Client-side: fast, done in browser, not secure. Server-side: secure, always required. Best to use
both.
Q: How would you create a custom HTML element (Web Component)?
A: Use [Link] and extend HTMLElement. E.g.,
[Link]('my-element', class extends HTMLElement {...})
Q: What are defer and async in script tags?
A: defer: scripts load in parallel and execute after HTML. async: scripts load and execute
immediately, may block HTML parsing.
Q: How does <link rel="preload"> improve performance?
A: It hints to the browser to fetch critical resources early, improving loading time. E.g., preload fonts,
CSS.
Q: What are the most important HTML elements for SEO?
A: <title>, <meta name="description">, <h1>-<h6>, <a>, and semantic tags help search engines
understand structure and content.
Q: How does HTML5 help prevent XSS (Cross-Site Scripting)?
A: Stricter parsing, sandboxed iframes, CSP headers, and secure input types (e.g., email, number)
reduce attack vectors.
Q: What are data-* attributes used for?
A: They store custom data on elements for JavaScript. Access via dataset API, e.g.,
[Link].
Q: How does the browser handle invalid HTML markup?
A: Browsers use a parsing algorithm called 'error handling' to fix and interpret broken HTML,
creating a best-guess DOM structure.
Q: What are reflows and repaints in the rendering process?
A: Reflow recalculates the layout, triggered by DOM changes. Repaint updates the pixel style
without layout change. Reflows are more costly.
Q: What is the difference between <section>, <article>, and <div>?
A: <section> defines a thematic grouping, <article> is independent content, and <div> is a
non-semantic container.
Q: When should you use <button> vs <a>?
A: Use <button> for actions (e.g., submit, toggle) and <a> for navigation (link to URLs).
Q: What is the purpose of the <template> tag in HTML?
A: It holds client-side HTML that isn't rendered until activated by JavaScript, useful for reusable
components.
Q: What is the Shadow DOM and how does it relate to HTML?
A: Shadow DOM allows encapsulation of HTML/CSS/JS in a component, preventing style leakage
and DOM conflicts.
Q: Explain the difference between innerHTML, textContent, and innerText.
A: innerHTML parses and renders HTML tags. textContent gives raw text. innerText respects CSS
styles and hidden elements.
Q: What is the difference between inline, block, and inline-block elements?
A: Inline: flows with text, no width/height. Block: takes full width, starts new line. Inline-block: inline
flow with block-like styling.
Q: How do HTML5 attributes like 'required', 'pattern', and 'autocomplete' improve UX?
A: They enable instant feedback, validation, and enhanced form usability without extra JS.
Q: What are global HTML attributes?
A: Attributes applicable to all HTML elements, e.g., id, class, style, title, hidden, and data-*
attributes.