Modern HTML and Debugging: Interview Questions and Answers

The final set focuses on decisions that come up when building and debugging a real site. HTML evolves, so check current browser support and the living standard when an answer depends on a newer feature.

1. What is the difference between details and dialog?#

details creates a disclosure widget whose content can be expanded or collapsed, usually with a summary label. dialog represents a dialog box or other interactive window. A dialog can be shown modally with showModal() or non-modally with show(). A modal dialog places the rest of the page behind a modal interaction, so it should have a clear title, a sensible initial focus, and a way to close it.

2. What is the Popover API used for?#

The Popover API provides browser-managed popover behavior for elements, commonly used for menus, teaching tips, and small panels. The popover attribute opts an element into the API, and a button can connect to it with popovertarget. It is not automatically a complete menu or tooltip pattern; choose the right semantics and make the interaction keyboard-friendly.

<button type="button" popovertarget="help-panel">Help</button>
<div id="help-panel" popover>
  Contact support if you cannot continue.
</div>

3. What is the purpose of the template element?#

A template stores markup that is not rendered as part of the document when it is parsed. JavaScript can clone its content and insert it later. It is useful when a page needs a repeatable markup fragment, but it does not create a component system or run the contained scripts automatically.

4. What is the difference between defer and async on classic scripts?#

A classic script with defer downloads while HTML parsing continues and runs after parsing completes, in document order. A classic script with async downloads in parallel and runs as soon as it is ready, so its execution order relative to other async scripts is not guaranteed. Use defer for scripts that depend on the parsed document or one another in order; use async for independent scripts.

<script src="/js/site.js" defer></script>
<script src="https://example.com/metrics.js" async></script>

Module scripts are deferred by default. Their loading and dependency behavior differs from classic scripts, so do not add defer merely out of habit to a module script.

5. Why can an image cause layout shift, and how do you reduce it?#

If the browser does not know an image's dimensions, it may initially reserve too little space and move nearby content when the image arrives. Provide width and height attributes or an explicit CSS aspect ratio so the browser can reserve the right space. Also choose image sizes that fit the rendered slot and avoid lazy-loading the page's primary above-the-fold image without considering its loading priority.

6. How would you debug a broken image?#

Check the src URL, spelling, case, file location, and whether the server actually serves that path. Open the image URL directly, then inspect the Network panel for status codes and response content. Confirm the file type is supported, the path is correct relative to the document, and any cross-origin or content-security policy rule is relevant. A missing image is often a path or deployment issue rather than an HTML syntax issue.

7. What should you check when /site.webmanifest returns 404 in a Next.js project?#

First check whether the document or metadata configuration references /site.webmanifest. If the site intends to provide a web app manifest, place the file at public/site.webmanifest so Next.js serves it at that root URL, or use the framework's metadata file convention. If the site does not need a manifest, remove the stale reference instead of adding an empty file just to silence the request.

8. If a page looks correct in the browser, does that mean its HTML is valid?#

No. Browsers are designed to recover from many markup errors, so a page can appear usable even when its source contains invalid nesting, missing required relationships, or obsolete elements. Use an HTML conformance checker, inspect the browser's DOM, and test interactions. Visual appearance alone does not prove valid or accessible markup.

9. What is the difference between the HTML source and the DOM?#

The source is the markup delivered to the browser. The DOM is the parsed document tree exposed to scripts and browser tools. The browser may correct malformed markup while parsing, and JavaScript can change the DOM after the initial response. When debugging, compare View Source with the Elements panel to see whether the issue is in the delivered document or a later DOM change.

10. How do you keep HTML knowledge current?#

Use the WHATWG HTML Living Standard for normative behavior and MDN for explanations, examples, and browser compatibility information. Be careful with old tutorials that teach obsolete presentational elements or outdated claims about HTML versions. Before relying on a newer feature, check its specification status, browser support, and whether a simpler native element solves the problem.