Top HTML Interview Questions and Answers [2025]

HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content using elements and tags such as headings, paragraphs, links, and images. Browsers interpret HTML to render a page visually.

Tags are the basic building blocks of HTML. They define how content should appear on a webpage.

Example:
<p>This is a paragraph</p>

HTML5 is the modern version that adds new semantic tags, multimedia support, and APIs for advanced features. It improves performance, SEO, and accessibility compared to older HTML versions.

Example:
HTML5 introduced <audio>, <video>, <canvas>, and semantic tags like <section>, <article>.

Semantic elements describe meaning rather than just presentation, making content easier for search engines and assistive technologies to interpret.

Example:
<header>, <footer>, <nav>, <article>, <aside>.

Block elements start on a new line and take full width. Inline elements stay within a line and only occupy as much width as needed.

Example:
Block: <div>, <p>
Inline: <span>, <a>, <strong>

Attributes provide extra information about an element, such as source, size, or accessibility labels.

Example:
<img src="image.jpg" alt="profile picture">
Here src specifies the image file, and alt provides alternative text.

ID is unique to one element, while Class can be applied to multiple elements for styling or grouping.

Example:
<div id="header">
<div class="container">

Meta tags provide metadata about a webpage such as description, keywords, charset, and viewport settings for responsive design.

Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Relative URL: Path relative to the current page.
Absolute URL: Full path including protocol and domain.

Example:
Relative: about.html
Absolute: https://example.com/about.html

<ol> creates an ordered list with numbers, while <ul> creates an unordered list with bullets.

Example:
<ol><li>One</li></ol>
<ul><li>One</li></ul>

XHTML is stricter than HTML. It requires all tags to be closed, attributes quoted, and lowercase element names.

Example:
HTML: <br>
XHTML: <br />

Empty elements have no closing tag or content.

Example:
<br>, <hr>, <img>, <input>

<strong> gives semantic importance (read by screen readers, improves SEO), while <b> only makes text bold without meaning.

Example:
<strong>Warning</strong> vs <b>Warning</b>

Inline CSS is written inside the HTML element’s style attribute. External CSS is linked via <link> and applies across multiple pages. External CSS is preferred for maintainability.

Example:
Inline: <p style="color:red;">Hello</p>
External: <link rel="stylesheet" href="style.css">

GET: Sends data via URL, less secure, suitable for search queries.
POST: Sends data in the request body, more secure, used for sensitive data like login or payments.

Example:
<form method="GET"> vs <form method="POST">

HTML5 introduced several APIs that extend the capabilities of the browser without relying on third-party plugins. These APIs allow developers to create richer, more interactive applications directly in the browser. Common APIs include Geolocation API, Web Storage API, Canvas API, Drag-and-Drop API, and Web Workers.

Example:
The Geolocation API can fetch a user’s location:
navigator.geolocation.getCurrentPosition(function(pos) );

Both localStorage and sessionStorage are part of the Web Storage API used for storing data on the client side. The key difference lies in persistence: localStorage persists data even after the browser is closed, while sessionStorage stores data only for the current session and clears when the browser tab is closed.

Example:
localStorage.setItem("user","John");
sessionStorage.setItem("token","12345");

HTML5 added new input types and attributes that enhance form validation and user experience without JavaScript. Attributes like required, placeholder, pattern, and input types like email, url, number, and date help in building robust forms with built-in validation and accessibility.

Example:
<input type="email" required placeholder="Enter your email">
This ensures the input is a valid email before form submission.

SVG (Scalable Vector Graphics) uses XML to describe 2D graphics, which remain sharp when scaled. Canvas provides a raster-based drawing surface that requires JavaScript for drawing. SVG is best for static images like charts or icons, while Canvas is suited for dynamic, pixel-based rendering like games or animations.

Example:
SVG: <svg><circle cx="50" cy="50" r="40" fill="red"/></svg>
Canvas: ctx.fillRect(20,20,150,100);

Previously, Flash or Silverlight were used for embedding audio and video. HTML5 introduced the <audio> and <video> tags, making it possible to embed media natively in the browser with attributes for controls, autoplay, loop, and preload.

Example:
<video src="movie.mp4" controls width="400"></video>

ARIA (Accessible Rich Internet Applications) roles make web content more accessible for users relying on screen readers or assistive technologies. They describe the role of elements beyond native semantics, ensuring better accessibility and compliance with standards like WCAG.

Example:
<button role="switch" aria-checked="true">Toggle</button>

Async: Loads the script asynchronously and executes it immediately once loaded, potentially before HTML parsing is complete.
Defer: Loads the script while parsing HTML but executes only after the document is fully parsed.
Defer is usually preferred for predictable execution order.

Example:
<script src="app.js" async></script>
<script src="app.js" defer></script>

Relative: Positioned relative to its normal position.
Absolute: Positioned relative to the nearest positioned ancestor.
Fixed: Positioned relative to the viewport and does not move on scroll.

Example:
position: relative;
position: absolute;
position: fixed;

All three store data on the client-side but differ in size, persistence, and purpose. Cookies are small and often used for server communication, limited to ~4KB. localStorage allows ~5–10MB of persistent storage. sessionStorage is similar to localStorage but clears when the browser tab closes.

Example:
document.cookie="user=John";
localStorage.setItem("theme","dark");

Optimising HTML for SEO involves proper use of semantic elements, title and meta descriptions, header tags in hierarchy, alt attributes for images, clean URLs, and structured data. This ensures better crawling and ranking by search engines.

Example:
<h1>Best HTML Interview Questions</h1>
<img src="html.png" alt="HTML tutorial">

Custom data attributes allow developers to store extra information directly in HTML elements without cluttering the DOM. They are defined as data-* attributes and can be accessed via JavaScript for dynamic functionality.

Example:
<div data-user="123" data-role="admin">John</div>
element.dataset.user → “123”

Web Components are reusable custom elements with encapsulated functionality. They use Shadow DOM, Custom Elements, and HTML Templates to build modular, maintainable web apps without external frameworks.

Example:
class MyButton extends HTMLElement } customElements.define("my-btn", MyButton);

Progressive rendering refers to techniques that improve perceived load speed by displaying content as it becomes available. This includes lazy loading images, using <link rel="preload">, and rendering above-the-fold content early.

Example:
<img src="large.jpg" loading="lazy">

Iframes embed another HTML document within the page. Object/Embed tags are used for embedding external resources like PDFs, Flash (legacy), or media. Iframes are most commonly used today.

Example:
<iframe src="page.html"></iframe>

Cross-browser compatibility ensures a website functions consistently across Chrome, Firefox, Safari, and Edge. Developers achieve this by using semantic HTML, testing with modern tools, adding polyfills for unsupported features, and avoiding deprecated tags.

Example:
Using CSS resets and testing HTML5 features with Modernizr helps detect and patch missing browser capabilities.

Optimising image-heavy pages is crucial for performance and SEO. You can reduce load time by compressing images (WebP, AVIF), using responsive images with srcset, implementing lazy loading, and serving images via a CDN.

Example:
<img src="image.jpg" srcset="image-480.jpg 480w, image-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" loading="lazy">

A responsive navigation bar should use semantic HTML elements and be mobile-friendly. Typically, you use the <nav> element with a list of links, and CSS/JavaScript to toggle visibility on smaller screens.

Example:
<nav><ul><li><a href="#home">Home</a></li></ul></nav>
On mobile, you can implement a “hamburger menu” with JS toggling the menu display.

Accessibility in forms is achieved by associating labels with inputs, using ARIA attributes where needed, and ensuring error messages are descriptive. Always use the <label> tag, proper alt text, and keyboard navigation support.

Example:
<label for="email">Email Address</label> <input id="email" type="email" required aria-required="true">

IDs must be unique per page. Duplicates cause issues with CSS targeting, JavaScript DOM manipulation, and accessibility. To resolve this, replace duplicate IDs with classes if multiple elements share styles, or dynamically assign unique IDs where scripting is required.

Example:
Instead of multiple <div id="box">, use <div class="box">.

For SEO, search engines should access meaningful HTML content. With heavy JavaScript frameworks, always provide server-side rendering (SSR) or static HTML fallbacks. Include semantic HTML tags, meta descriptions, and structured data for crawlers.

Example:
Implement <noscript> fallback or use Next.js/Nuxt.js for server-rendered HTML output.

Optimise form-heavy pages by reducing unnecessary fields, using client-side validation, deferring non-critical scripts, and compressing assets. Group related fields using <fieldset> and ensure proper use of semantic elements for clarity and performance.

Example:
<fieldset><legend>Contact Details</legend> ... </fieldset>

Embedding multiple YouTube iframes can hurt performance. Instead, use a lazy-load technique where only a thumbnail loads initially, and the actual iframe loads on user interaction.

Example:
Load a preview image (img) and replace it with the iframe when clicked using JavaScript.

Cumulative Layout Shift (CLS) is a Core Web Vital metric. Prevent layout shifts by defining explicit width and height for images and ad slots. This reserves space before assets load.

Example:
<img src="banner.jpg" width="728" height="90" alt="Ad">

Use the lang attribute to define the document language. For multilingual content, set lang on individual elements. Ensure proper encoding (UTF-8) and consider hreflang for SEO when serving alternate versions.

Example:
<html lang="en"> vs <span lang="fr">Bonjour</span>

Accessible tables require clear headers, captions, and scope attributes for screen readers. Use <caption> for context, <th> for headers, and scope attributes to define relationships.

Example:
<table><caption>Employee List</caption><tr><th scope="col">Name</th></tr></table>

HTML5 introduced semantic elements that provide meaning to the document structure, making it easier for browsers, developers, and search engines to interpret content. These include <header>, <footer>, <article>, <section>, <aside>, and <nav>. They replace generic <div> elements and improve SEO and accessibility.

Example:
<article><h2>Blog Post</h2><p>Content here</p></article>

The <canvas> element provides a drawing surface that allows developers to render graphics, charts, or animations dynamically using JavaScript. Unlike SVG, Canvas is pixel-based and well-suited for real-time rendering like gaming, image processing, or interactive dashboards.

Example:
<canvas id="myCanvas" width="200" height="100"></canvas>
var ctx=document.getElementById("myCanvas").getContext("2d"); ctx.fillRect(20,20,150,60);

HTML5 improved form handling with new input types (email, url, number, date, color), attributes (placeholder, required, pattern, min/max), and built-in validation. This reduces the need for JavaScript while enhancing UX and accessibility.

Example:
<input type="number" min="1" max="10" required>

HTML5 introduced Web Storage API (localStorage, sessionStorage) and the Application Cache (now deprecated in favour of Service Workers) for offline functionality. These allow web apps to continue functioning without internet access by storing key-value pairs locally in the browser.

Example:
localStorage.setItem("theme","dark");
Data persists even after closing the browser.

HTML5 introduced <audio> and <video> elements, allowing native embedding of multimedia without plugins. Both support attributes like controls, autoplay, loop, and muted. Video can specify multiple sources for browser compatibility.

Example:
<video width="400" controls><source src="movie.mp4" type="video/mp4"></video>

Canvas is pixel-based and best for high-performance graphics updated frequently (games, charts). SVG is vector-based and scalable, making it ideal for static images, logos, or charts that need resolution independence. Canvas requires scripting, while SVG is declarative.

Example:
Canvas: ctx.arc(75,75,50,0,2*Math.PI); ctx.stroke();
SVG: <circle cx="75" cy="75" r="50" stroke="black" fill="red"/>

The Geolocation API in HTML5 allows web apps to request a user’s location (with consent). This enables location-aware services like maps, weather apps, and local search results. Accuracy depends on GPS, Wi-Fi, or IP address.

Example:
navigator.geolocation.getCurrentPosition(function(pos) );

Web Workers in HTML5 enable background JavaScript execution without blocking the main UI thread. They are useful for heavy computations like image processing, large data parsing, or running algorithms while keeping the interface responsive.

Example:
var worker = new Worker("worker.js"); worker.postMessage("start");

HTML5’s semantic tags improve accessibility by giving meaning to page sections. Combined with ARIA roles and attributes, developers can create web pages that are screen-reader friendly and compliant with WCAG standards. Proper use of <header>, <nav>, and <main> enhances navigation for assistive technologies.

Example:
<main role="main"><h1>Article Title</h1></main>

Responsive design in HTML5 is facilitated by the <meta name="viewport"> tag, semantic structure, and media queries in CSS. HTML5’s fluid grid support, responsive images (srcset and sizes), and modern layout techniques help build mobile-first applications.

Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w" sizes="(max-width: 600px) 480px, 1024px">

✔️ HTML Interview Quick Prep Checklist

• Revise the basic structure of an HTML document — <!DOCTYPE html>, <html>, <head>, <body>.
• Memorise the most common HTML tags: headings, paragraphs, links, images, lists, forms, tables.
• Understand semantic HTML5 elements (<header>, <nav>, <article>) and their SEO benefits.
• Be clear on the difference between inline, block, and inline-block elements.
• Know HTML forms & attributes: input types, validation, required, pattern, placeholder.
• Review multimedia tags — <audio>, <video>, <source>.
• Understand HTML APIs: localStorage, sessionStorage, Canvas, Geolocation, Web Workers.
• Revise HTML accessibility practices: ARIA roles, alt text, label in forms.
• Practice SEO-friendly HTML: correct heading hierarchy, meta descriptions, alt attributes.
• Know differences between HTML vs HTML5 and why HTML5 is used in modern applications.
• Prepare examples of real-world scenarios: responsive design with viewport, lazy loading images, handling large forms.