HTML interviews have changed. Knowing what <div>, <p>, and <a> do is still necessary, but interviewers increasingly test whether you understand semantic markup, accessibility, forms, browser behavior, responsive images, performance, and modern native HTML features. Current interview resources consistently cover these areas from beginner through advanced levels. GeeksforGeeks
These html interview questions cover the concepts most useful for frontend, web developer, and full-stack interviews. The answers are deliberately concise enough to explain aloud while still giving you the technical detail needed for follow-up questions.
Basic html interview questions
1. What is HTML?
HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of content on web pages.
A simple document might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>HTML provides structure, CSS generally handles presentation, and JavaScript adds behavior and application logic.
2. Is HTML a programming language?
No. HTML is a markup language, not a programming language.
It describes content using elements and attributes but does not itself provide programming constructs such as loops, variables, functions, or conditional logic.
3. What is the current version of HTML?
A more accurate modern answer is that HTML is maintained as the HTML Living Standard rather than being developed primarily as a sequence of numbered releases such as HTML 4 and HTML5.
The WHATWG standard is continuously updated; for example, the official specification was updated repeatedly during September 2026. HTML Living Standard
“HTML5” remains common shorthand in tutorials and interviews for modern HTML, but mentioning the Living Standard demonstrates more current knowledge.
4. What is an HTML element?
An HTML element is a complete structural component of a document.
For example:
<p>Hello World</p>The complete structure is the paragraph element. <p> is the opening tag, Hello World is its content, and </p> is the closing tag.
5. What is the difference between a tag and an element?
A tag is the markup syntax, such as <p> or </p>.
An element represents the complete HTML component, including its tags, attributes where applicable, and content.
For example:
<p class="intro">Welcome</p>The opening and closing <p> markup are tags, while the whole structure represents the element.
6. What are HTML attributes?
Attributes provide additional information or configuration for HTML elements.
<a href="/about" class="nav-link">About</a>Here, href and class are attributes.
Some attributes, such as disabled, required, and checked, are boolean attributes and do not need a conventional key-value pair to represent their enabled state.
7. What does <!DOCTYPE html> do?
The HTML doctype tells browsers to process the page using modern standards mode.
<!DOCTYPE html>It is a declaration rather than an HTML element. The HTML Living Standard’s syntax rules specify a doctype before the document’s html element. HTML Living Standard
8. What are void elements?
Void elements cannot contain child content and do not have closing tags.
Common examples include:
<img>
<input>
<br>
<hr>
<meta>
<link>For example:
<img src="photo.jpg" alt="Mountain at sunset">You do not write </img> in HTML.
9. What is the difference between id and class?
An id identifies a particular element and should be unique within the document.
<section id="contact">A class can be shared by multiple elements:
<p class="warning">First warning</p>
<p class="warning">Second warning</p>Classes are commonly used for styling and JavaScript selection, while IDs are useful for unique identification, fragment navigation, labels, and scripting.
10. What are data-* attributes?
Custom data attributes allow developers to attach application-specific information to HTML elements.
<button data-product-id="782">Buy</button>JavaScript can access this information through the element’s dataset interface.
They are preferable to inventing non-standard HTML attributes for application data.
Semantic HTML interview questions
11. What is semantic HTML?
Semantic HTML means selecting elements according to the meaning and purpose of their content, rather than using generic containers for everything.
Examples include:
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>Semantic markup improves document structure, maintainability, accessibility, and the ability of software to understand page relationships. W3C accessibility guidance specifically recommends using markup to convey meaning and structure. W3C
12. What is the difference between <div> and <span>?
Both are generic containers without the richer meaning provided by semantic elements.
<div> is typically used to group larger blocks of content:
<div class="card">
...
</div><span> is used around phrasing content:
<p>Price: <span class="price">$25</span></p>Neither should replace a more appropriate semantic element merely for styling convenience.
13. What is the difference between <section> and <div>?
<section> represents a thematic section of a document, usually with an associated heading.
<section>
<h2>Shipping Information</h2>
...
</section><div> has no inherent semantic meaning and is appropriate when a generic container is genuinely what you need.
A useful interview answer is: choose <section> for meaningful document structure and <div> primarily for generic grouping.
14. What is the difference between <article> and <section>?
<article> represents a self-contained composition that could potentially stand independently, such as a blog post, news story, or forum post.
<section> groups thematically related content within a larger document.
For example:
<article>
<h2>How Browsers Parse HTML</h2>
<section>
<h3>Tokenization</h3>
</section>
</article>15. What is the purpose of <main>?
<main> identifies the dominant content of the document’s body.
It helps distinguish primary page content from repeated interface areas such as navigation, sidebars, and footers.
16. What is the difference between <strong> and <b>?
<strong> indicates strong importance, seriousness, or urgency.
<b> draws attention to text without implying that semantic importance.
Similarly, <em> represents stress emphasis, while <i> is commonly appropriate for text in an alternate voice or similar convention.
The difference is semantic, not simply visual.
17. Why does heading hierarchy matter?
Headings such as <h1> through <h6> establish the organization of a document.
A meaningful hierarchy helps readers scan content and allows assistive technologies to navigate sections more effectively.
Use headings because they represent headings—not because their default font size happens to match the design.
HTML forms interview questions
18. What is the purpose of the <form> element?
The <form> element represents a collection of controls that can submit information.
<form action="/register" method="post">
...
</form>Its action typically identifies where the data is sent, while method specifies the HTTP submission method.
19. What is the difference between GET and POST in an HTML form?
With GET, submitted form data is generally encoded into the request URL. It suits operations such as searches where the resulting URL can reasonably be bookmarked or shared.
With POST, form data is sent in the request body.
POST does not automatically make sensitive information secure; HTTPS is still required for transport security.
20. Why is <label> important?
A label identifies a form control for users and assistive technologies.
<label for="email">Email address</label>
<input id="email" name="email" type="email">The for value should match the input’s id. This explicit association also provides a larger clickable area for controls and helps assistive technology identify them correctly. W3C
21. Is placeholder text a replacement for a label?
No.
A placeholder disappears when users type and should not be relied upon as the only identification or instruction for a field. W3C accessibility guidance explicitly states that placeholder text is not a replacement for labels. W3C
Prefer:
<label for="email">Email address</label>
<input
id="email"
type="email"
placeholder="name@example.com"
>22. What are <fieldset> and <legend> used for?
They semantically group related form controls.
<fieldset>
<legend>Preferred contact method</legend>
<input id="email-contact" type="radio" name="contact">
<label for="email-contact">Email</label>
<input id="phone-contact" type="radio" name="contact">
<label for="phone-contact">Phone</label>
</fieldset>W3C recommends this pattern because it communicates the relationship among grouped controls to users and assistive technology. W3C
23. What is built-in HTML form validation?
HTML provides attributes and input types that allow browsers to perform common validation without custom JavaScript.
Examples include:
<input type="email" required>
<input type="number" min="1" max="10">
<input type="text" minlength="3" maxlength="30">
<input pattern="[A-Za-z]+">Client-side validation improves usability, but important validation must still occur on the server because client-side restrictions can be bypassed.
24. What is the difference between disabled and readonly?
A disabled control cannot normally be interacted with and is not submitted with its form.
A readonly control cannot have its value edited by normal user interaction, but its value can still participate in form submission.
Their applicability also differs by form-control type.
25. Why should you use <button> instead of a clickable <div>?
A native <button> already has button semantics and built-in interaction behavior.
<button type="button">Open menu</button>Using a <div> as a button means developers must recreate important semantics and keyboard behavior manually.
W3C notes that native HTML controls expose roles, names, states, and keyboard behavior to browsers and assistive technologies. W3C
HTML accessibility interview questions
26. What is the alt attribute?
The alt attribute provides a text alternative for an image.
<img
src="chart.png"
alt="Revenue increased from $2M to $3M in 2026"
>Alternative text should communicate the image’s relevant purpose or information rather than mechanically describing every visual detail.
Decorative images commonly use:
<img src="decoration.svg" alt="">W3C guidance recommends text alternatives for informational and functional images and empty alternative text for decorative images. W3C
27. What is ARIA?
ARIA stands for Accessible Rich Internet Applications.
Attributes such as:
aria-label
aria-labelledby
aria-describedby
aria-expandedcan communicate accessibility information when native HTML alone cannot express the required relationship or state.
A strong interview principle is to prefer appropriate native HTML where it already provides the required semantics and behavior, then use ARIA where necessary.
28. What is aria-label?
aria-label supplies an accessible name directly:
<button aria-label="Close dialog">×</button>It is particularly useful when an interactive control has no suitable visible textual label.
For form controls, visible <label> elements are generally preferable when practical because they help both visual users and assistive-technology users. W3C
29. Why is the lang attribute important?
It declares the primary language of the document.
<html lang="en">This can help assistive technologies apply appropriate pronunciation and helps software interpret language-dependent content.
30. What makes HTML keyboard accessible?
Using native interactive elements correctly provides a strong foundation.
Links should generally be links:
<a href="/pricing">Pricing</a>Actions should generally be buttons:
<button type="button">Show details</button>Native controls come with established keyboard behavior and accessibility semantics. W3C specifically recommends ensuring interactive functionality is keyboard accessible. W3C
Intermediate html interview questions
31. What is the DOM?
DOM stands for Document Object Model.
When a browser parses HTML, it constructs an in-memory tree representing the document. JavaScript can then read and manipulate this tree.
Given:
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>the browser creates corresponding document nodes and relationships rather than treating the page as nothing more than a raw text file.
The HTML specification defines parsing rules that user agents use to generate DOM trees from HTML resources. HTML Living Standard
32. What happens when a browser parses invalid HTML?
HTML parsers include detailed error-recovery behavior.
Browsers may automatically infer missing elements, rearrange certain invalid structures, or ignore invalid markup according to standardized parsing rules.
This is why malformed source code can sometimes appear to “work,” but relying on browser error recovery is poor development practice.
33. What are HTML entities?
Character references allow developers to represent certain characters safely or conveniently in markup.
Examples include:
<
>
&
For example:
<p>5 < 10</p>renders the less-than character rather than allowing it to be interpreted as markup syntax.
34. What is the purpose of <meta charset="UTF-8">?
It declares the character encoding used by the document.
<meta charset="UTF-8">UTF-8 supports a very broad range of characters and is the standard choice for modern web pages.
35. What does the viewport meta tag do?
A common declaration is:
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>It instructs mobile browsers to use the device width appropriately for the layout and establishes the initial scale.
It is a standard part of responsive web-page setup.
36. What is the difference between localStorage and sessionStorage?
Both are browser Web Storage mechanisms using key-value data.
localStorage persists beyond a single browsing session until removed.
sessionStorage is scoped to the relevant browsing session and is cleared when that session ends.
A useful distinction in an interview is that Web Storage is a browser API associated with web applications; it is not simply an HTML element or tag.
37. What is the difference between <canvas> and SVG?
<canvas> provides a bitmap drawing surface generally controlled through scripting.
SVG describes vector graphics using structured elements.
SVG is often attractive when individual graphical objects need to remain addressable or scale cleanly. Canvas can work well for drawing-intensive scenarios where pixels are repeatedly rendered.
The appropriate choice depends on the application.
38. How do <audio> and <video> work?
HTML provides native media elements:
<video controls>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video>The <source> element can provide alternative resources so the browser can choose a supported option.
For accessible video, consider captions and other alternatives appropriate to the content.
Responsive HTML and performance questions
39. What are srcset and sizes?
They allow browsers to choose an appropriate image resource.
<img
src="photo-800.jpg"
srcset="
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="Mountain landscape"
>srcset describes available image candidates, while sizes gives the browser information about the image’s expected display size. The browser can then select an appropriate resource for the situation. MDN Web Docs
40. What is the <picture> element?
<picture> allows developers to provide different image sources for conditions such as media queries or formats.
<picture>
<source media="(max-width: 600px)" srcset="mobile.jpg">
<img src="desktop.jpg" alt="City skyline">
</picture>It is especially useful for art direction, where mobile and desktop layouts need genuinely different image compositions rather than merely different resolutions.
41. What is native lazy loading?
Images and iframes can use the loading attribute:
<img
src="gallery.jpg"
loading="lazy"
width="800"
height="600"
alt="Gallery interior"
>loading="lazy" allows the browser to defer loading an off-screen resource until it approaches the viewport.
For images, explicitly providing width and height is recommended because it helps reserve layout space and reduce unexpected layout shifts. MDN Web Docs
42. What is the difference between async and defer?
Both can reduce parser blocking for external classic scripts, but their execution behavior differs.
<script async src="analytics.js"></script>
<script defer src="app.js"></script>async executes when the script becomes available, so execution order among multiple async scripts is not guaranteed.
defer waits until document parsing is complete and preserves document order among deferred scripts. Module scripts are deferred by default. MDN Web Docs
Use async for independent scripts and defer when execution order or a parsed DOM matters.
43. Why specify image width and height in HTML?
For example:
<img
src="product.jpg"
width="800"
height="600"
alt="Product"
>The dimensions give the browser information needed to reserve the correct aspect-ratio space before the image finishes loading.
That reduces disruptive layout movement and is especially useful with lazy-loaded images. MDN Web Docs
Advanced html interview questions
44. What is the <dialog> element?
<dialog> provides a native element for dialogs.
<dialog id="confirm-dialog">
<p>Delete this item?</p>
<button>Cancel</button>
<button>Delete</button>
</dialog>JavaScript can open it as a modal with showModal() or as a non-modal dialog with show().
Using the native element can reduce the amount of custom dialog infrastructure required compared with building the entire component from generic containers.
45. What is the popover attribute?
The Popover API provides native declarative behavior for content displayed above the normal page interface.
For example:
<button popovertarget="help">Help</button>
<div id="help" popover>
Helpful information goes here.
</div>The current HTML Living Standard defines popover, popovertarget, and popovertargetaction as HTML features. HTML Living Standard
This can simplify interfaces such as lightweight menus, hints, and similar temporary UI.
46. What does the inert attribute do?
inert makes a subtree non-interactive for relevant user interaction.
<div inert>
...
</div>It can be useful when a region of the interface should temporarily stop participating in interaction, such as background content during certain UI states.
The HTML Living Standard includes inert subtrees and the inert attribute as part of its user-interaction model. HTML Living Standard
47. What are <details> and <summary>?
They create a native disclosure widget.
<details>
<summary>View shipping information</summary>
<p>Orders normally ship within two business days.</p>
</details>They are useful when content needs simple show-and-hide behavior without requiring a custom JavaScript disclosure component.
The HTML specification itself encourages declarative alternatives such as details where they can replace unnecessary scripting. HTML Living Standard
48. How can an iframe be made safer?
An iframe embeds another browsing context:
<iframe
src="https://example.com/embed"
sandbox
referrerpolicy="no-referrer"
></iframe>The sandbox attribute can restrict capabilities granted to embedded content. Permissions should then be added deliberately only when needed.
The HTML standard defines sandbox as security rules for nested content and allow as a way to specify a Permissions Policy for iframe contents. HTML Living Standard
49. What is progressive enhancement?
Progressive enhancement means starting with a functional, meaningful HTML foundation and then layering CSS and JavaScript enhancements on top.
For example, a navigation link should ideally still lead somewhere useful even if optional JavaScript enhancement fails.
The HTML specification encourages declarative mechanisms where possible and recommends graceful degradation when scripting is unavailable. HTML Living Standard
This approach can improve robustness, accessibility, and resilience.
50. How would you write production-quality HTML?
A strong interview answer should go beyond saying “valid syntax.”
Production-quality HTML should have:
- meaningful semantic elements;
- a logical document and heading structure;
- accessible names and labels;
- useful alternative text;
- native interactive controls where possible;
- appropriate form validation and instructions;
- responsive images;
- deliberate resource loading;
- secure handling of embedded content;
- minimal dependence on unnecessary JavaScript;
- maintainable, understandable markup.
For example, instead of:
<div onclick="submitForm()">Send</div>prefer an actual control:
<button type="submit">Send</button>And instead of:
<input type="email" placeholder="Email">use a real label:
<label for="email">Email address</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
>That distinction captures what modern HTML interviews increasingly test: not whether you can memorize dozens of tags, but whether you understand how markup affects browsers, users, accessibility tools, performance, and maintainability. Current interview material now regularly extends into semantics, accessibility, browser rendering, responsive HTML, security, and production troubleshooting. Udemy
How to Prepare for html interview questions
The fastest way to prepare is to practice explaining each concept aloud rather than memorizing textbook definitions. An interviewer can easily turn “What is semantic HTML?” into follow-ups about <article> versus <section>, accessibility, landmarks, headings, or why a native <button> is preferable to a clickable <div>.
Build one small page containing semantic layout elements, a labeled form, responsive images, a <dialog>, a popover, <details>, deferred JavaScript, and accessible controls. Then inspect the DOM and test the page using only a keyboard.
That practical exercise connects most of the concepts covered by these html interview questions. If you can explain not only what each element does but why you chose it, you will be much better prepared for both basic and scenario-based HTML interview questions.
