Your one-stop platform to prepare, practice and ace your interviews.
Loading your questions…
30 hand-picked HTML interview questions with detailed answers. Open the interactive version above to search, filter by difficulty, run code, bookmark questions and track your progress.
Using elements that describe their meaning — <header>, <nav>, <main>, <article>, <footer> — instead of generic <div>s.
Benefits: better accessibility (screen readers understand structure), improved SEO, and more maintainable markup.
It tells the browser to render in standards mode rather than legacy 'quirks mode'. Without it, older browsers emulate 1990s bugs and box models, breaking layouts.
div, p, section).span, a).It controls how mobile browsers scale the page. Without it, phones render at desktop width and zoom out. width=device-width, initial-scale=1 makes the layout match the device's real width — essential for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1">Data attributes are custom HTML attributes used to store application-specific data on an element. They start with data- and can be accessed in JavaScript using the dataset API.
<li data-id="42" data-name="Angular">Angular</li>
const item = document.querySelector('li');
console.log(item.dataset.id); // '42'
console.log(item.dataset.name); // 'Angular'localStorage.setItem('theme', 'dark');
localStorage.getItem('theme');Both download the script without blocking HTML parsing.
<script src="app.js" defer></script>Attributes like required, type="email", min/max, pattern, and minlength validate input before submit, with built-in error UI — no JS needed for basics.
<input type="email" required pattern=".+@company\.com">alt text on images; labels tied to inputs.Use srcset + sizes so the browser picks the best resolution for the device, or <picture> for art direction / modern formats (WebP/AVIF) with fallbacks. Add loading="lazy" for offscreen images.
<img src="s.jpg" srcset="s.jpg 480w, l.jpg 1080w" loading="lazy" alt="..."><title> and <meta name="description"> for search results; Open Graph (og:title, og:image) and Twitter Card tags for rich link previews; canonical to avoid duplicate-content penalties.
<meta property="og:title" content="...">
<link rel="canonical" href="https://site.com/page">A Progressive Web App (PWA) combines modern web technologies to deliver a native app-like experience. The three core requirements are a Web App Manifest (defines the app's name, icons, theme, and display mode), a Service Worker (enables offline support, caching, and background functionality), and HTTPS (required for security and service workers). Together, these allow users to install the website, launch it like an app, and continue using it even with limited or no internet connection.
<link rel="manifest" href="manifest.json">Web Components are a set of browser standards for building reusable, framework-independent UI components. They consist of Custom Elements (custom HTML tags), Shadow DOM (encapsulated DOM and styles), and HTML Templates using <template> and <slot>. Since they are browser-native, they can be used with Angular, React, Vue, or plain JavaScript.
class MyCard extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' }).innerHTML = `
<style>
div { border: 1px solid #ccc; padding: 12px; }
</style>
<div><slot></slot></div>`;
}
}
customElements.define('my-card', MyCard);The right type gives free validation, the correct mobile keyboard (numeric/email layout), native pickers (date/color), and better accessibility — improving UX with zero JS.
<input type="email" inputmode="email">
<input type="number" inputmode="numeric">A built-in modal/popup with showModal()/close(), automatic focus trapping, backdrop (::backdrop), and Esc-to-close — accessibility that used to require a library.
<dialog id="m"><form method="dialog"><button>OK</button></form></dialog>
<script>m.showModal();</script>A native, zero-JS disclosure widget: <summary> is the always-visible label and the rest of <details> expands/collapses on click — accessible and keyboard-friendly out of the box (this app's cards use the same idea).
<details><summary>Show answer</summary><p>Hidden content</p></details>Without it, the newly opened page can access window.opener and hijack the original tab (tabnabbing). rel="noopener" severs that reference; noreferrer also hides the referrer. Modern browsers imply noopener, but set it explicitly.
<a href="https://ext.com" target="_blank" rel="noopener noreferrer">Link</a>These resource hints help improve page performance. preload fetches a critical resource needed for the current page as early as possible. prefetch downloads a low-priority resource that is likely to be needed on a future page. preconnect establishes the DNS, TCP, and TLS connection to another origin before any requests are made, reducing connection latency.
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="next-page.js">
<link rel="preconnect" href="https://fonts.googleapis.com">SVG is vector, DOM-based, scalable, and stylable/accessible — good for icons, charts, and anything interactive or resolution-independent. Canvas is an immediate-mode pixel bitmap — better for lots of objects, games, and heavy pixel manipulation.
tabindex="0" — makes a non-focusable element focusable in normal order.tabindex="-1" — focusable via script only (not Tab), for managing focus.tabindex="1+" — avoid; it breaks natural tab order.<div role="button" tabindex="0">Custom button</div>The steps the browser takes to turn HTML/CSS/JS into pixels: build the DOM and CSSOM, combine into the render tree, then layout and paint. CSS is render-blocking and synchronous JS is parser-blocking — optimise by inlining critical CSS, deferring JS, and minimising above-the-fold work.
An ARIA live region is an element with the aria-live attribute that automatically announces dynamic content changes to screen readers without moving keyboard focus. Use aria-live="polite" for non-urgent updates and aria-live="assertive" for critical messages that should be announced immediately.
<div aria-live="polite">12 results found</div>
<div aria-live="assertive">Your session has expired.</div>The <noscript> element defines content that is displayed only when JavaScript is disabled or not supported by the browser. It is commonly used to inform users that JavaScript is required, provide alternative content, or include fallback resources.
<noscript>
<p>This application requires JavaScript to function properly. Please enable JavaScript in your browser.</p>
</noscript>The Document Object Model is the browser's in-memory, tree-shaped representation of your HTML. Each tag becomes a node, and JavaScript can read and change these nodes (querySelector, textContent, createElement) to update the page dynamically.
The DOM is a live API, not the original HTML source — frameworks like Angular/React manipulate it (often via a virtual DOM or their own diffing) instead of you touching it by hand.
document.querySelector('h1').textContent = 'Hi';
const li = document.createElement('li');
document.body.appendChild(li);Never send passwords or sensitive data with GET — it lands in URLs, history, and server logs.
<form method="get" action="/search">...</form>
<form method="post" action="/login">...</form>#id has higher specificity than .class.getElementById(), while classes are commonly selected using querySelectorAll().<div id="header"></div>
<div class="card"></div>
<div class="card"></div>The label element improves accessibility by associating descriptive text with an input. Clicking the label automatically focuses the corresponding input, making forms easier to use for both mouse and keyboard users as well as screen readers.
<label for="email">Email</label>
<input id="email" type="email">The alt attribute provides alternative text when an image cannot be displayed. It is also read by screen readers for visually impaired users and helps search engines understand image content. Decorative images should use alt="".
<img src="profile.jpg" alt="Profile photo of John Doe">An iframe embeds another webpage inside the current page. It is commonly used for videos, maps, and third-party widgets. Since embedded content may be untrusted, use the sandbox attribute to restrict its capabilities and improve security.
<iframe
src="https://example.com"
sandbox="allow-scripts allow-same-origin">
</iframe>The autocomplete attribute tells the browser whether it should automatically fill form fields using previously saved user information. It improves user experience by reducing typing and supports values like email, username, current-password, and new-password.
<input type="email" autocomplete="email">
<input type="password" autocomplete="current-password">
<input type="password" autocomplete="new-password">