Html Interview Questions

01

What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML. It introduced semantic elements (header, nav, article, section, footer), native audio/video support, the Canvas API, Web Storage (localStorage/sessionStorage), Web Workers, WebSockets, and improved form input types. HTML5 also deprecated presentational elements like <font> and <center>.

02

What are semantic HTML elements?

Semantic elements clearly describe their meaning to both the browser and developer. Examples: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>. They improve accessibility, SEO, and code readability.

03

What is the difference between <div> and <span>?

<div> is a block-level element that takes the full width and starts on a new line. <span> is an inline element that only takes as much width as its content. Use <div> for grouping block content and <span> for styling inline text.

04

What is the purpose of the DOCTYPE declaration?

<!DOCTYPE html> tells the browser which version of HTML the page uses. Without it, browsers enter quirks mode and may render the page inconsistently across different browsers.

05

What is the difference between <strong> and <b>, and <em> and <i>?

<strong> indicates important text (semantic) while <b> is purely visual bold with no semantic meaning. Similarly, <em> indicates stressed emphasis (semantic) while <i> is purely visual italic. Screen readers treat <strong> and <em> differently.

06

What are data attributes in HTML5?

Data attributes (data-*) allow you to store custom data on HTML elements. They are accessed via JavaScript using the dataset property.

Example

<div data-user-id="42" data-role="admin">User</div>

<script>
const div = document.querySelector("div");
console.log(div.dataset.userId); // "42"
console.log(div.dataset.role);   // "admin"
</script>

07

What is the difference between localStorage, sessionStorage, and cookies?

localStorage — persists until explicitly cleared; ~5MB; not sent to server.
sessionStorage — cleared when the tab is closed; ~5MB; tab-specific.
Cookies — sent to server with every HTTP request; ~4KB; can have expiry dates; can be HttpOnly and Secure.

08

What are void elements in HTML?

Void elements are self-closing elements that cannot have child nodes and do not need a closing tag. Examples: <br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.

09

What is the difference between <script> async and defer?

Normal <script> — blocks HTML parsing while downloading and executing.
async — downloads in parallel; executes immediately when downloaded (may run before DOM is ready).
defer — downloads in parallel; executes after HTML parsing is complete, in document order.
Use defer for DOM-dependent scripts; async for independent scripts like analytics.

10

What is ARIA and why is it important?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that improve accessibility for users with disabilities. ARIA roles, states, and properties help screen readers understand dynamic content. Examples: role="button", aria-label, aria-hidden, aria-expanded, aria-live.

11

What is the difference between <link> and <a>?

12

What are meta tags and what are they used for?

Meta tags provide metadata about the HTML document. Common uses: charset declaration, viewport settings for responsive design, SEO description and keywords, Open Graph tags for social sharing.

Example

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for SEO">
<meta property="og:title" content="Open Graph Title">

13

What is the Canvas API?

The Canvas API provides a 2D drawing surface via the <canvas> element. You draw using JavaScript with the 2D rendering context. Used for games, data visualizations, image manipulation, and animations.

Example

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#38bdf8";
ctx.fillRect(10, 10, 150, 100);

14

What is the difference between <section>, <article>, and <div>?

<article> — self-contained content that makes sense independently (blog post, news article, comment).
<section> — thematic grouping of content, typically with a heading. Part of a larger whole.
<div> — generic container with no semantic meaning. Use when no semantic element fits.

15

What are HTML forms and what attributes does <form> support?

HTML forms collect user input. Key <form> attributes: action (URL to submit to), method (GET or POST), enctype (multipart/form-data for file uploads), novalidate (disable browser validation), autocomplete.

16

What is the difference between GET and POST form methods?

GET — appends data to the URL as query string; visible in browser history; limited data size; used for searches.
POST — sends data in the request body; not visible in URL; no size limit; used for sensitive data and file uploads.

17

What is the <picture> element used for?

The <picture> element provides multiple image sources for different screen sizes or formats, enabling responsive images and modern format support (WebP, AVIF).

Example

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback image">
</picture>

18

What is the difference between <iframe> and <embed>?

19

What are Web Workers?

Web Workers run JavaScript in a background thread separate from the main UI thread. They prevent heavy computations from blocking the UI. Workers communicate with the main thread via postMessage() and cannot access the DOM directly.

20

What is the difference between <ol>, <ul>, and <dl>?

<ul> — unordered list with bullet points. Use for items with no particular order.
<ol> — ordered list with numbers. Use for sequential steps or ranked items.
<dl> — description list with <dt> (term) and <dd> (description) pairs. Use for glossaries and metadata.

21

What is the srcset attribute on <img>?

srcset provides multiple image sources at different resolutions. The browser picks the most appropriate one based on device pixel ratio and viewport size, improving performance on high-DPI screens.

Example

<img
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Responsive image">

22

What is the difference between <head> and <body>?

<head> contains metadata not displayed on the page: title, meta tags, CSS links, script references, and favicons. <body> contains all visible page content: text, images, links, forms, and other elements.

23

What is the tabindex attribute?

tabindex controls the tab order of focusable elements. tabindex="0" adds an element to the natural tab order. tabindex="-1" makes it focusable via JavaScript but not via keyboard tab. Avoid positive values as they create confusing tab orders.

24

What is the difference between <input type="button"> and <button>?

<button> is more flexible — it can contain HTML content (icons, styled text). <input type="button"> only supports plain text via the value attribute. <button> defaults to type="submit" inside a form, so always specify type="button" when not submitting.

25

What is the purpose of the <template> element?

The <template> element holds HTML that is not rendered when the page loads. Its content is inert (scripts do not run, images do not load). It is used as a client-side template that can be cloned and inserted into the DOM via JavaScript.

26

What is the difference between block-level and inline elements?

Block-level — start on a new line and take the full available width. Examples: <div>, <p>, <h1>–<h6>, <ul>, <table>, <section>.
Inline — flow within text and only take as much width as their content. Examples: <span>, <a>, <strong>, <img>, <input>.
Inline-block — flow inline but respect width/height like block elements.

27

What is the difference between <th> and <td>?

<th> defines a table header cell — bold and centered by default with semantic meaning for accessibility. <td> defines a standard data cell. Use scope="col" or scope="row" on <th> to associate headers with data cells.

28

What is the <details> and <summary> element?

<details> creates a native disclosure widget — content is hidden by default and shown when the user clicks. <summary> provides the visible label/toggle. No JavaScript required.

Example

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for web pages.</p>
</details>

29

What is the difference between <input type="submit"> and <button type="submit">?

Both submit a form. <button type="submit"> is more flexible — it can contain HTML (icons, styled text) and its label is separate from its value. <input type="submit"> only supports plain text via the value attribute. Prefer <button> for richer UI.

30

What is the <datalist> element?

<datalist> provides a list of predefined options for an <input> element, creating an autocomplete/suggestion dropdown. Unlike <select>, the user can still type a custom value.

Example

<input list="languages" name="lang" placeholder="Choose a language">
<datalist id="languages">
  <option value="JavaScript">
  <option value="Python">
  <option value="Java">
</datalist>

31

What is the difference between <progress> and <meter>?

<progress> — represents the completion of a task (e.g., file upload). Use max and value attributes. Indeterminate when value is omitted.
<meter> — represents a scalar measurement within a known range (e.g., disk usage, score). Supports min, max, low, high, optimum attributes.

Example

<progress value="70" max="100">70%</progress>
<meter value="0.7" low="0.3" high="0.8" optimum="1">70%</meter>

32

What is the difference between <b>, <strong>, and <mark>?

<b> — visually bold, no semantic importance.
<strong> — semantically important text; screen readers may emphasize it.
<mark> — highlighted/marked text for reference or search results (yellow highlight by default).

33

What is the <dialog> element?

<dialog> is a native HTML modal/dialog element. Use the open attribute or JavaScript showModal() / show() methods. It supports the ::backdrop pseudo-element for overlay styling.

Example

<dialog id="modal">
  <p>Are you sure?</p>
  <button onclick="document.getElementById('modal').close()">Close</button>
</dialog>
<button onclick="document.getElementById('modal').showModal()">Open</button>

34

What is the difference between <figure> and <img>?

<img> embeds an image. <figure> is a semantic container for self-contained content (images, diagrams, code snippets) referenced from the main content. <figcaption> inside <figure> provides an accessible caption.

Example

<figure>
  <img src="chart.png" alt="Sales chart for Q1 2026">
  <figcaption>Figure 1: Q1 2026 Sales Performance</figcaption>
</figure>

35

What is the difference between <nav>, <header>, and <footer>?

<header> — introductory content or navigational aids for its nearest sectioning element. Can appear multiple times on a page.
<nav> — a section of major navigation links. Not all link groups need <nav>.
<footer> — footer for its nearest sectioning element. Contains author info, copyright, related links.

36

What is the <base> element?

<base> specifies the base URL for all relative URLs in the document and the default link target. Only one <base> element is allowed per page and it must be in <head>.

Example

<head>
  <base href="https://www.tutorialslogic.com/" target="_blank">
</head>
<!-- All relative links now resolve from tutorialslogic.com -->

37

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

preload — fetches a resource needed for the current page immediately (high priority). Use for critical fonts, CSS, JS.
prefetch — fetches a resource likely needed for the next navigation (low priority, background).
preconnect — establishes a connection (DNS + TCP + TLS) to an origin early, reducing latency for future requests.

Example

<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page.html">
<link rel="preconnect" href="https://fonts.googleapis.com">

38

What are the new HTML5 input types?

HTML5 introduced many new input types that provide native UI controls and built-in validation.

email, url, tel — validate format automatically.
number, range — numeric inputs with min/max/step.
date, time, datetime-local, month, week — date/time pickers.
color — native color picker.
search — search field with clear button.
file — file upload with accept and multiple attributes.

39

What is the difference between placing <script> in <head> vs end of <body>?

Scripts in <head> without defer/async block HTML parsing, delaying page render. Placing scripts at the end of <body> allows HTML to parse first. The modern best practice is <script defer> in <head> — it downloads in parallel and executes after parsing.

40

What is the <abbr> element?

<abbr> marks abbreviations and acronyms. The title attribute provides the full expansion shown as a tooltip. <acronym> was deprecated in HTML5 — use <abbr> for both.

Example

<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="World Wide Web Consortium">W3C</abbr>

41

What is the difference between <cite>, <q>, and <blockquote>?

<cite> — references the title of a creative work (book, article, film). Renders in italic.
<q> — inline quotation. Browsers automatically add quotation marks.
<blockquote> — block-level quotation from another source. Use the cite attribute for the source URL.

42

What is the <output> element?

<output> represents the result of a calculation or user action. It is associated with form inputs via the for attribute and updated dynamically via JavaScript.

Example

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

43

What is the <address> element?

<address> is a semantic element specifically for contact information related to the nearest <article> or <body>. Screen readers and search engines understand it as contact info. Use it instead of a plain <p> for contact details.

44

What is the difference between the id and class attributes?

id — must be unique within the page; used for JavaScript targeting, anchor links (#section), and ARIA associations.
class — can be reused on multiple elements; used for CSS styling and JavaScript selection.
An element can have multiple classes but only one id.

45

What is the contenteditable attribute?

contenteditable="true" makes any HTML element editable by the user directly in the browser, like a rich text editor. Used in WYSIWYG editors and inline editing UIs.

Example

<div contenteditable="true" style="border:1px solid #ccc; padding:8px">
  Click here to edit this text...
</div>

46

What is the difference between <noscript> and feature detection?

47

What is the <map> and <area> element?

<map> defines an image map — a clickable image with multiple hotspot regions. <area> defines each clickable region with shape (rect, circle, poly), coords, href, and alt attributes.

Example

<img src="world.png" usemap="#worldmap" alt="World map">
<map name="worldmap">
  <area shape="rect" coords="0,0,200,100" href="/europe" alt="Europe">
  <area shape="circle" coords="300,150,50" href="/asia" alt="Asia">
</map>

48

What is the <time> element?

<time> is a semantic element for dates and times. The datetime attribute provides a machine-readable format while the element content can be human-readable. This helps search engines, calendar apps, and screen readers understand temporal data.

Example

<p>Published on <time datetime="2026-04-22">April 22, 2026</time></p>
<p>Event starts at <time datetime="2026-04-22T09:00">9:00 AM</time></p>

49

What is the difference between <svg> and <canvas>?

<svg> — vector-based; DOM elements; scalable without quality loss; supports CSS and event listeners on individual shapes; good for icons, charts, and illustrations.
<canvas> — pixel-based (raster); drawn via JavaScript API; no DOM for individual shapes; better for games, real-time graphics, and image manipulation.
SVG is better for static/interactive graphics; Canvas for high-performance animations.

50

What is the <slot> element and when is it used?

<slot> is part of the Web Components API. It defines a placeholder inside a Shadow DOM where the consumer can inject their own HTML content. Named slots allow multiple injection points.

Example

<template id="card-template">
  <div class="card">
    <slot name="title">Default Title</slot>
    <slot></slot>
  </div>
</template>

Top 50 HTML Interview Questions

What is the difference between HTML and HTML5?

What are semantic HTML elements?

What is the difference between <div> and <span>?

What is the purpose of the DOCTYPE declaration?

What is the difference between <strong> and <b>, and <em> and <i>?

What are data attributes in HTML5?

What is the difference between localStorage, sessionStorage, and cookies?

What are void elements in HTML?

What is the difference between <script> async and defer?

What is ARIA and why is it important?

What is the difference between <link> and <a>?

What are meta tags and what are they used for?

What is the Canvas API?

What is the difference between <section>, <article>, and <div>?

What are HTML forms and what attributes does <form> support?

What is the difference between GET and POST form methods?

What is the <picture> element used for?

What is the difference between <iframe> and <embed>?

What are Web Workers?

What is the difference between <ol>, <ul>, and <dl>?

What is the srcset attribute on <img>?

What is the difference between <head> and <body>?

What is the tabindex attribute?

What is the difference between <input type="button"> and <button>?

What is the purpose of the <template> element?

What is the difference between block-level and inline elements?

What is the difference between <th> and <td>?

What is the <details> and <summary> element?

What is the difference between <input type="submit"> and <button type="submit">?

What is the <datalist> element?

What is the difference between <progress> and <meter>?

What is the difference between <b>, <strong>, and <mark>?

What is the <dialog> element?

What is the difference between <figure> and <img>?

What is the difference between <nav>, <header>, and <footer>?

What is the <base> element?

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

What are the new HTML5 input types?

What is the difference between placing <script> in <head> vs end of <body>?

What is the <abbr> element?

What is the difference between <cite>, <q>, and <blockquote>?

What is the <output> element?

What is the <address> element?

What is the difference between the id and class attributes?

What is the contenteditable attribute?

What is the difference between <noscript> and feature detection?

What is the <map> and <area> element?

What is the <time> element?

What is the difference between <svg> and <canvas>?

What is the <slot> element and when is it used?

Level Up Your HTML Skills

Popular Tutorials

HTML

CSS

JavaScript

Python

Java

PHP

Angular

React

Node.js

DSA

MongoDB

MySQL

Ready to Level Up Your Skills?