HTML Interview Questions

Core HTML questions that come up in frontend, fullstack, and web developer interviews. Many candidates underestimate HTML knowledge - strong answers here set you apart.

1. What is semantic HTML and why does it matter?

Semantic HTML uses elements whose names describe their meaning and purpose, not just their visual appearance. Examples: <article> for standalone content, <nav> for navigation, <button> for interactive controls vs a styled <div>. It matters for three reasons: (1) Accessibility - screen readers use semantic structure to let users navigate by landmarks, headings, and form fields. (2) SEO - search engines weight content inside <main>, <article>, <h1> higher than generic divs. (3) Maintainability - code communicates intent. The rule: choose the element with the correct semantic meaning; use CSS to change how it looks.

2. What are data- attributes and when would you use them?

data-* attributes store custom data on HTML elements without using non-standard attributes or making extra server requests. They can hold any string value and are accessible via element.dataset in JavaScript. Example: <button data-product-id="42" data-action="add-to-cart">. Access via btn.dataset.productId (camelCase). Use cases: passing server-rendered data to JavaScript, tracking analytics metadata, storing state for CSS styling via attribute selectors ([data-state="active"]), and configuration options for web components. Avoid storing sensitive data in them since they are visible in the DOM.

3. What is the difference between defer and async on script tags?

Both attributes make script loading non-blocking (download happens in parallel with HTML parsing), but they differ in execution timing. async: script executes as soon as it downloads, potentially before the DOM is fully parsed - order is not guaranteed. Best for independent scripts like analytics. defer: script executes after the HTML is fully parsed, in document order. Best for scripts that interact with the DOM or depend on each other. A plain <script> tag (neither) blocks HTML parsing during download and execution. Rule of thumb: use defer for most scripts; use async only for truly independent analytics/tracking scripts.

4. How does srcset work and when would you use the picture element?

srcset on <img> provides multiple image versions at different resolutions; the browser picks the best one based on device pixel ratio and viewport width. Example: srcset="/img-400.jpg 400w, /img-800.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw". The browser uses the sizes hint to calculate actual display size, then picks the most efficient resolution. The <picture> element goes further - it allows art direction (completely different crops for different screens) using <source media="..."> and different format negotiation (WebP with JPEG fallback) using type="image/webp". Use srcset+sizes for resolution switching; use <picture> for art direction or format fallback.

5. What is the purpose of the meta viewport tag?

Without the viewport meta tag, mobile browsers render pages at a virtual ~980px wide viewport (to avoid breaking desktop-only sites) then scale down, making text tiny. The tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> tells the browser to set the viewport width equal to the device's actual screen width and use 1:1 pixel scale. This is the prerequisite for responsive design - CSS media queries check the actual viewport width, not the virtual one. Never use maximum-scale=1.0, user-scalable=no because they disable browser zoom, creating a WCAG accessibility violation.

6. What is the difference between preload, prefetch, and preconnect?

These are resource hints that control browser prioritization. preload (<link rel="preload" as="font">): fetch this resource immediately with high priority because it is needed for the current page - for critical above-the-fold resources. prefetch (<link rel="prefetch">): low priority fetch for resources needed on the next navigation (next page, next step in a flow). preconnect (<link rel="preconnect" href="https://fonts.googleapis.com">): establish the TCP connection, TLS handshake, and DNS lookup for a third-party origin in advance - saves ~100-500ms when the actual request fires. Use preconnect for critical third-party origins; preload for render-blocking assets like custom fonts.

7. What is ARIA and when should you use it?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes (roles, states, properties) that describe the semantics of custom UI components to assistive technology. The first rule of ARIA is: do not use ARIA - prefer native HTML semantics. <button> is better than <div role="button"> because you get keyboard focus, Enter/Space activation, and semantics for free. ARIA is appropriate when: building custom widgets that have no HTML equivalent (tabs, tree views, comboboxes, sliders), updating dynamic content (aria-live regions for notifications), and bridging gaps in framework-rendered SPAs where semantic structure is lost. Never use ARIA to fix broken HTML - fix the HTML instead.

8. What is the difference between block, inline, and inline-block elements?

Block-level elements (<div>, <p>, <section>, <h1>-<h6>, <ul>, <li>, <table>) start on a new line and stretch to full container width by default - you can set width and height. Inline elements (<span>, <a>, <strong>, <em>, <img>) flow within text, only take up as much space as their content, and width/height properties are ignored (for replaced elements like img, they work). Inline-block combines both: flows inline with text but respects width, height, margin, and padding. Note: display is a CSS property - HTML elements have default display values that can be changed with CSS.

9. What is the difference between id and class attributes?

id must be unique within a page - only one element can have a given id. It is used for: fragment links (<a href="#section1">), form label associations (for/id pairing), JavaScript getElementById(), and CSS targeting (though high specificity makes this fragile). class can be applied to multiple elements and one element can have multiple classes. Classes are the primary styling hook. For JavaScript, prefer data attributes over id for behavior hooks. For accessibility, id is required for aria-labelledby, aria-describedby, and aria-controls associations. Duplicate ids are a common bug that breaks these ARIA relationships.

10. How does HTML handle character encoding and why does it matter?

Character encoding maps byte sequences to characters. UTF-8 encodes all Unicode characters and should always be used. The <meta charset="UTF-8"> tag must be the first element in <head> (within the first 1024 bytes) so the browser knows how to parse the rest of the document. Without it, browsers fall back to a detected or default encoding (often Windows-1252 or Latin-1) which corrupts non-ASCII characters like accented letters, emoji, and non-Latin scripts. The HTTP Content-Type: text/html; charset=UTF-8 header takes precedence over the meta tag. Both should match. HTML entities like &amp;, &lt;, &gt;, &quot; are alternatives for characters with special HTML meaning and do not depend on encoding.