INTERVIEW

Top 60 Basic HTML Interview Questions & Answers!

By Vaishali

May 04, 2026 10 Min Read 18567 Views

(Last Updated)

Are you preparing for your first web development interview and wondering which HTML interview questions are likely to come up? Whether you’re a student, a self-taught developer, or someone transitioning into tech, mastering the basics of HTML is your first stepping stone toward becoming a successful frontend developer.

HTML forms the foundation of every webpage, and interviewers often use it to assess your core understanding of how the web works.

In this article, we’ve curated the top 60 and highly HTML interview questions, complete with explanations and code examples, to help you walk into your interview with clarity and confidence.

Quick Answer:

HTML interviews focus on understanding core elements, tags, and attributes, creating forms and tables, using semantic HTML, handling multimedia content, differentiating inline and block elements, managing links and images, structuring web pages effectively, and explaining how HTML works with CSS and JavaScript in real-world scenarios.

Top 30 Basic HTML Interview Questions!

What is HTML?
What are tags in HTML?
What is the difference between HTML and HTML5?
What are semantic tags in HTML5?
5. How do you structure a basic HTML document?
What’s the role of <!DOCTYPE html>?
Explain the difference between <div> and <span>.
What are void elements in HTML?
How do you add a hyperlink in HTML?
How do you insert an image?
What is the purpose of the alt attribute in images?
What are the different types of lists in HTML?
What is the difference between <strong> and <b>?
How do forms work in HTML?
What are some commonly used form input types?
What is the difference between id and class attributes?
How do you link an external CSS file in HTML?
What is the purpose of the <head> tag?
How do you embed a video in HTML?
What is the difference between <script> and <noscript>?
What is the role of the <meta> tag?
What is an iframe?
What are data attributes in HTML?
How do you make a checkbox checked by default?
How do you open a link in a new tab?
How do you comment in HTML?
What is the purpose of the <label> tag?
How do you disable an input field?
What’s the difference between block, inline, and inline-block elements?
How do you create a table in HTML?

Scenario-Based Questions

You need to create a registration form for a new website that accepts user details and ensures no invalid submissions. How would you approach it?
A client wants a product listing page that displays differently on mobile, tablet, and desktop. How would you implement it?
You have to display multiple images for a gallery without slowing down page load. How would you handle this?
A website requires a multi-level dropdown menu for navigation. How would you implement it?
You are given a content-heavy blog page that must be clear and accessible. How would you structure it?
You need to embed a promotional video that must work across all browsers and provide captions. How would you implement it?
A client wants an interactive table that highlights rows on hover and is readable on mobile. How would you implement it?
You are asked to create a modal popup for newsletter signup that should be accessible and SEO-friendly. How would you approach it?
You need to create a dynamic survey form where additional questions appear based on previous answers. How would you implement this?
A client complains the page is slow due to multiple images and scripts. How would you optimize it without changing content structure?

Advanced HTML Interview Questions & Answers (Expert-Level Additions)

What is the difference between the DOM and HTML source code?
How does browser parsing work in HTML?
What is the significance of the “render tree”?
What are custom elements in HTML?
What is Shadow DOM and why is it used?
How does HTML handle internationalization (i18n)?
What is the difference between defer and async in script loading?
What are ARIA roles and when should you use them?
What is the purpose of the <template> tag?
What is progressive enhancement in HTML?
What are web storage APIs and how do they differ from cookies?
What is the difference between <picture> and <img>?
What is contenteditable in HTML?
How does HTML support SEO directly?
What is the difference between <section> and <article>?
What is the role of <main> tag?
What are microdata and structured data in HTML?
What is the difference between inline SVG and image SVG?
How does lazy loading improve HTML performance?
What is the importance of HTML validation?

Conclusion

Top 30 Basic HTML Interview Questions!

1. What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses markup tags to define elements like text, links, images, forms, and multimedia on the browser.

“HyperText” refers to the way web pages are linked together.
“Markup Language” means HTML uses tags to mark elements in a document.

Example:

html

<p>This is a paragraph in HTML.</p>

2. What are tags in HTML?

HTML Tags are the core syntax used in HTML to define elements. Tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>), with the content placed between them.

Example:

<h1>Hello World</h1>

<h1> is the opening tag
</h1> is the closing tag
Hello World is the content

Note: Some tags are self-closing (like <img>, <br>, etc.).

3. What is the difference between HTML and HTML5?

Feature	HTML	HTML5
Version	Older versions (HTML 4.01)	Latest version
Multimedia Support	Requires plugins (e.g. Flash)	Native support with <audio> and <video>
Semantics	Uses generic tags like <div>	Introduces semantic tags like <section>, <article>
APIs	No built-in APIs	Includes APIs like geolocation, local storage, canvas

Difference between HTML and HTML5

Example of HTML5 semantic tag:

<article>

  <h2>Blog Title</h2>

  <p>Blog content goes here...</p>

</article>

4. What are semantic tags in HTML5?

Semantic tags describe the meaning of the content they enclose, making the code more readable and accessible.

Examples:

<header>: Represents introductory content or navigation
<footer>: Footer section of a page
<section>: Defines a section of content
<nav>: Navigation links

Example:

<nav>

  <a href="/">Home</a>

  <a href="/contact">Contact</a>

</nav>

5. How do you structure a basic HTML document?

Every HTML page follows a basic structure:

<!DOCTYPE html>

<html>

  <head>

    <title>My First Page</title>

  </head>

  <body>

    <h1>Welcome!</h1>

    <p>This is a paragraph.</p>

  </body>

</html>

<!DOCTYPE html>: Declares HTML5
<html>: Root element
<head>: Contains metadata
<body>: Visible content on the browser

6. What’s the role of <!DOCTYPE html>?

The <!DOCTYPE html> declaration is placed at the top of an HTML document. It tells the browser that the file is using HTML5, so it should render the page accordingly.

Without this declaration, browsers may switch to quirks mode, leading to rendering inconsistencies.

7. Explain the difference between <div> and <span>.

Tag	Type	Use Case
<div>	Block-level	Used to group sections of a page
<span>	Inline-level	Used to style or target inline text

Difference between <div> and <span>

Example:

<div class="container">

  <p>This is inside a block div.</p>

</div>

<p>This is <span style="color: red;">red text</span> in a paragraph.</p>

8. What are void elements in HTML?

Void elements (also called empty elements) don’t have closing tags and cannot contain content.

Common void elements:

<br>: Line break
<hr>: Horizontal line
<img>: Image
<input>: Input field

Example:

<img src="logo.png" alt="Company Logo">

9. How do you add a hyperlink in HTML?

Use the <a> (anchor) tag to create links.

Example:

<a href="https://openai.com">Visit OpenAI</a>

Attributes:

href: Destination URL
target=”_blank”: Opens in a new tab (optional)

10. How do you insert an image?

Use the <img> tag, which is a void element.

Example:

<img src="profile.jpg" alt="User Profile Picture" width="150" height="150">

src: Source path of the image
alt: Alternate text for accessibility
width & height: Dimensions

11. What is the purpose of the alt attribute in images?

The alt attribute provides:

Accessibility for screen readers
A fallback description of the image doesn’t load
Help for SEO

Example:

<img src="logo.png" alt="Company Logo">

12. What are the different types of lists in HTML?

HTML supports three list types:

Ordered List (<ol>) – numbered
Unordered List (<ul>) – bulleted
Description List (<dl>) – term-description pairs

Example:

<ol>

  <li>First</li>

  <li>Second</li>

</ol>

<ul>

  <li>Apple</li>

  <li>Banana</li>

</ul>

<dl>

  <dt>HTML</dt>

  <dd>HyperText Markup Language</dd>

</dl>

13. What is the difference between <strong> and <b>?

Tag	Meaning	Semantic?
<b>	Just makes text bold	No
<strong>	Indicates importance	Yes

Difference between <strong> and <b>

Example:

html

<p>This is <b>bold</b> text.</p>

<p>This is <strong>important</strong> text.</p>

Use <strong> when you want to convey emphasis or meaning, especially for screen readers.

14. How do forms work in HTML?

Forms collect user inputs and can send data to a server for processing.

Example:

<form action="/submit" method="post">

  <label for="name">Name:</label>

  <input type="text" id="name" name="username">

  <input type="submit" value="Send">

</form>

action: Where the form data is sent
method: HTTP method (GET or POST)
input: Field for user input

15. What are some commonly used form input types?

HTML provides a wide variety of input types:

text: Single-line input
password: Hidden text (dots or asterisks)
email: Email format validation
checkbox: Tickable boxes
radio: Single selection
date: Date picker
file: Upload a file
submit: Form submission button

Example:

<form>

  <input type="text" placeholder="Your Name">

  <input type="email" placeholder="Email Address">

  <input type="checkbox"> Subscribe to newsletter

</form>

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

Both id and class are used to identify and style elements, but they serve different purposes:

Attribute	Unique?	Use Case
id	Yes	Uniquely identify one element
class	No	Target multiple elements with the same styling

Difference between id and class attributes

Example:

html

<div id="main-banner">Main Banner</div>

<p class="highlight">This is a highlighted paragraph.</p>

<p class="highlight">Another highlighted paragraph.</p>

In CSS:

#main-banner {

  background-color: yellow;

}

.highlight {

  color: red;

}

17. How do you link an external CSS file in HTML?

Use the <link> tag inside the <head> section to connect an external stylesheet.

Example:

<head>

  <link rel="stylesheet" href="styles.css">

</head>

Attributes:

rel=”stylesheet”: Relationship type
href: Path to the CSS file

18. What is the purpose of the <head> tag?

The <head> contains metadata (data about data) and external resource links.

Common elements inside <head>:

<title>: Title of the page (shown in browser tab)
<meta>: Charset, description, viewport
<link>: Stylesheets
<script>: JavaScript files

Example:

<head>

  <title>My Portfolio</title>

  <meta charset="UTF-8">

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

</head>

19. How do you embed a video in HTML?

Use the <video> element with <source> to embed a video file.

Example:

html

<video width="400" controls>

  <source src="intro.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

Attributes:

controls: Shows play/pause buttons
autoplay, muted, loop: Optional attributes

20. What is the difference between <script> and <noscript>?

Tag	Purpose
<script>	Used to run JavaScript in the page
<noscript>	Shown only if JavaScript is disabled in the browser

Difference between <script> and <noscript>

Example:

<script>

  alert('JavaScript is enabled!');

</script>

<noscript>

  Please enable JavaScript for the best experience.

</noscript>

21. What is the role of the <meta> tag?

The <meta> tag provides information to the browser or search engines, like encoding, description, keywords, and viewport settings for responsiveness.

Examples:

html

<meta charset="UTF-8">

<meta name="description" content="Best HTML guide for beginners.">

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

22. What is an iframe?

An <iframe> (inline frame) allows you to embed another HTML page within your current page.

Example:

<iframe src="https://example.com" width="600" height="400"></iframe>

Common use cases:

Embedding maps, forms, YouTube videos, other sites

Note: Many modern websites block iframe embedding for security reasons.

23. What are data attributes in HTML?

data-* attributes store custom data within HTML elements. They’re useful for scripts or frameworks without cluttering classes or IDs.

Example:

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

In JavaScript:

javascript

const div = document.querySelector('div');

console.log(div.dataset.userId); // "1234"

24. How do you make a checkbox checked by default?

Use the checked attribute inside the <input type=”checkbox”> element.

Example:

<input type="checkbox" checked> Subscribe to newsletter

25. How do you open a link in a new tab?

Add the attribute target=”_blank” to the <a> tag.

Example:

<a href="https://example.com" target="_blank">Open in new tab</a>

Optional: Add rel=”noopener noreferrer” for security.

26. How do you comment in HTML?

Comments are written between <!– and –>. They are not rendered in the browser.

Example:

html

<!-- This is a comment explaining the section below -->

<section>

  <h2>About Us</h2>

</section>

27. What is the purpose of the <label> tag?

The <label> improves accessibility and usability by linking descriptive text to a form element.

Example:

html

<label for="email">Email:</label>

<input type="email" id="email" name="email">

When you click the label, it focuses on the associated input.

28. How do you disable an input field?

Add the disabled attribute to an input field. It will appear greyed out and be non-editable.

Example:

<input type="text" value="Not Editable" disabled>

29. What’s the difference between block, inline, and inline-block elements?

Display Type	Description	Examples
Block	Takes full width, starts on a new line	<div>, <p>, <h1>
Inline	Takes only as much space as needed	<span>, <a>, <strong>
Inline-block	Behaves like inline but allows block-level styling (width/height)	Custom buttons, nav items

Difference between block, inline, and inline-block elements

Visual example:

<span style="display: inline-block; width: 100px;">Box</span>

30. How do you create a table in HTML?

Tables are created using the <table>, <tr>, <th>, and <td> tags.

Example:

html

<table border="1">

  <tr>

    <th>Product</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>T-shirt</td>

    <td>$20</td>

  </tr>

</table>

<tr>: Table row
<th>: Table heading (bold + centered by default)
<td>: Table data (cells)

Scenario-Based Questions

31. You need to create a registration form for a new website that accepts user details and ensures no invalid submissions. How would you approach it?

Use the <form> An element with inputs for name, email, password, and other required fields. Apply HTML5 validation attributes such as required, type="email", and pattern for passwords. Group related fields using <fieldset> and <legend> for clarity. Add aria-labels for accessibility and ensure the submit button is disabled until all fields pass validation. Consider client-side feedback messages to guide users and improve UX.

32. A client wants a product listing page that displays differently on mobile, tablet, and desktop. How would you implement it?

Structure the HTML semantically with <section> and <article> for each product. Include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the head. Use CSS Flexbox or Grid with media queries to adjust layouts, resize images, and reposition text for different screen sizes. Test across devices to ensure consistency and accessibility, and consider performance optimizations like lazy loading images.

33. You have to display multiple images for a gallery without slowing down page load. How would you handle this?

Use the <img> tag with srcset and sizes attributes for responsive images, and loading="lazy" to defer off-screen image loading. Compress images without quality loss, convert to modern formats like WebP, and provide descriptive alt text for accessibility. Optionally, use <picture> elements to serve different formats or resolutions based on device capabilities, ensuring fast load and SEO-friendly markup.

Use semantic <nav> with nested <ul> and <li> elements for hierarchy. Apply ARIA roles like menu and menuitem for accessibility. Use CSS for hover/focus interactions and JavaScript for dynamic toggling. Ensure keyboard accessibility so users can navigate with Tab/Enter keys, and test responsiveness so dropdowns work properly on touch devices.

35. You are given a content-heavy blog page that must be clear and accessible. How would you structure it?

Divide content into semantic sections: <header> for the top section, <article> for main content, <aside> for related links, and <footer> for metadata. Maintain proper heading hierarchy using <h1>–<h6>, add descriptive link text, and provide ARIA labels for accessibility. Consider including skip links and ensure the page is readable on different devices with responsive typography and spacing.

36. You need to embed a promotional video that must work across all browsers and provide captions. How would you implement it?

Use the <video> tag with multiple source formats (mp4, webm, ogg) and the controls attribute. Include <track> elements for captions to meet accessibility requirements. Provide fallback content, such as a download link or external video link, for browsers that do not support HTML5 video. Test playback across major browsers and devices to ensure compatibility and smooth user experience.

37. A client wants an interactive table that highlights rows on hover and is readable on mobile. How would you implement it?

Use <table> with <thead> and <tbody> for semantic structure. Apply CSS for :hover effects to highlight rows visually. Make it responsive using a wrapper with horizontal scrolling or reflow layout for small screens. Include scope attributes for headers, and ensure adequate contrast and ARIA labels so the table is accessible to screen readers.

Use a <div> with role="dialog" and aria-labelledby for the modal title. Ensure focus is trapped inside the modal while open, and that pressing ESC closes it. Keep modal content in the DOM for SEO purposes but hide it visually when inactive. Include descriptive labels for form fields, proper tab order, and test keyboard and screen reader accessibility.

39. You need to create a dynamic survey form where additional questions appear based on previous answers. How would you implement this?

Group questions using <fieldset> and <legend> and toggle visibility using JavaScript by adding/removing the hidden attribute or CSS classes. Ensure dynamically shown fields are validated before submission. Provide clear instructions for users and maintain ARIA attributes for screen readers. Test for accessibility and ensure the form behaves consistently across devices and browsers.

40. A client complains the page is slow due to multiple images and scripts. How would you optimize it without changing content structure?

Use loading="lazy" for off-screen images, srcset for responsive images, and compress all image assets. Minify HTML, CSS, and JavaScript files. Use defer or async attributes for scripts to prevent render-blocking. Implement browser caching and prioritize above-the-fold content. Ensure performance improvements do not break functionality or accessibility.

Advanced HTML Interview Questions & Answers (Expert-Level Additions)

41. What is the difference between the DOM and HTML source code?

Answer: HTML source code is the static markup written by the developer, whereas the Document Object Model (DOM) is a live, tree-like representation created by the browser after parsing the HTML. The DOM can be dynamically modified using JavaScript, meaning what users see may differ from the original HTML source. This distinction is critical for debugging and understanding runtime behavior.

42. How does browser parsing work in HTML?

Answer: Browsers parse HTML sequentially from top to bottom, converting it into a DOM tree. During parsing:

HTML tokens are generated
Nodes are created
CSS and JavaScript can block parsing (render-blocking)

Modern browsers use speculative parsing to improve performance by preloading resources like scripts and stylesheets in parallel.

43. What is the significance of the “render tree”?

Answer: The render tree is constructed after combining the DOM and CSSOM. It only includes visible elements and determines layout and painting. Unlike the DOM, it excludes elements like <head> or those with display: none. This is what the browser actually uses to render the UI.

44. What are custom elements in HTML?

Answer: Custom elements are part of Web Components that allow developers to define new HTML tags using JavaScript. Example:

<my-card></my-card>

They enable reusable, encapsulated components with their own logic and styling, improving scalability in large applications.

45. What is Shadow DOM and why is it used?

Answer: Shadow DOM allows encapsulation of a component’s structure and styles, preventing conflicts with the main DOM.
Benefits:

Style isolation
Scoped DOM
Reusability
It is heavily used in design systems and frameworks for building modular UI components.

46. How does HTML handle internationalization (i18n)?

Answer: HTML supports i18n through:

lang attribute for language specification
dir attribute for text direction (LTR/RTL)
Unicode support for global character sets
Example:

<html lang="ar" dir="rtl">

This ensures proper rendering, accessibility, and SEO for multilingual websites.

47. What is the difference between defer and async in script loading?

Answer:

async: Loads and executes script independently, may interrupt parsing
defer: Loads script in parallel but executes after HTML parsing is complete
Use defer for scripts dependent on DOM, and async for independent scripts like analytics.

48. What are ARIA roles and when should you use them?

Answer: ARIA (Accessible Rich Internet Applications) roles enhance accessibility for screen readers when native HTML semantics are insufficient.
Example:

<div role="button">Click</div>

However, ARIA should only be used when semantic HTML cannot achieve the same result, as overuse can harm accessibility.

49. What is the purpose of the <template> tag?

Answer: The <template> tag stores HTML content that is not rendered immediately. It can be cloned and inserted dynamically using JavaScript.
Use cases:

Client-side rendering
Reusable UI fragments
It improves performance and keeps markup clean.

50. What is progressive enhancement in HTML?

Answer: Progressive enhancement is a strategy where basic HTML functionality is delivered first, and advanced features (CSS/JS) are layered on top.
This ensures:

Accessibility
Better performance on low-end devices
Graceful degradation for unsupported features

51. What are web storage APIs and how do they differ from cookies?

Answer: HTML5 introduced:

localStorage (persistent)
sessionStorage (session-based)
Differences from cookies:
Larger storage capacity
Not sent with HTTP requests
Faster access
Used for client-side data storage without server overhead.

52. What is the difference between <picture> and <img>?

Answer: <img> displays a single image, whereas <picture> allows multiple sources for responsive images. Example:

<picture>

 <source media="(max-width: 600px)" srcset="small.jpg">

 <img src="large.jpg" alt="Example">

</picture>

This improves performance and responsiveness.

53. What is contenteditable in HTML?

Answer: The contenteditable attribute allows users to edit content directly in the browser.
Example:

<div contenteditable="true">Edit this text</div>

It is commonly used in rich text editors and CMS systems.

54. How does HTML support SEO directly?

Answer: HTML impacts SEO through:

Semantic tags (<article>, <header>)
Meta tags (description, viewport)
Proper heading hierarchy
Alt attributes for images
Clean HTML structure improves crawlability and ranking.

55. What is the difference between <section> and <article>?

Answer:

<section>: Groups related content
<article>: Represents independent, reusable content (like blog posts)
Use <article> when content can stand alone.

56. What is the role of <main> tag?

Answer: The <main> tag defines the primary content of a page, excluding headers, footers, and navigation.
It improves:

Accessibility
SEO clarity
Only one <main> element should exist per page.

57. What are microdata and structured data in HTML?

Answer: Microdata helps embed structured data into HTML for search engines.
Example:

<div itemscope itemtype="https://schema.org/Product">

This enables rich results like ratings, pricing, and FAQs in search results.

58. What is the difference between inline SVG and image SVG?

Answer:

Inline SVG: Written directly in HTML, fully customizable via CSS/JS
Image SVG: Used via <img> tag, limited control
Inline SVG is preferred for animations and styling flexibility.

59. How does lazy loading improve HTML performance?

Answer: Lazy loading delays loading of off-screen resources until needed.
Example:

<img src="image.jpg" loading="lazy">

Benefits:

Faster initial load
Reduced bandwidth usage
Improved Core Web Vitals

60. What is the importance of HTML validation?

Answer: HTML validation ensures code follows standards set by W3C.

Benefits:

Cross-browser compatibility
Better accessibility
Improved maintainability
Invalid HTML can lead to unpredictable rendering behavior.

Final Tip:

Go beyond memorization and practice these concepts in a live HTML editor like CodePen, JSFiddle, or PlayCode. Interviews often include practical tests, so being comfortable writing real code is a big plus!

If you want to learn everything related to full-stack development, consider enrolling in HCL GUVI’s IIT-M Pravartak-certified Full Stack Development Course that helps you learn it from scratch with mentor support and provides you with hands-on experience by giving unlimited access to Programming Practice Platforms with 1500+ Problem Statements

Conclusion

In Conclusion, mastering HTML is not just about knowing tags, it’s about understanding how to structure content effectively, how browsers interpret your code, and how your markup contributes to accessibility, responsiveness, and performance.

The HTML interview questions covered here are among the most commonly asked in entry-level web development interviews, and they reflect the real-world knowledge you’ll use on the job.

If you take the time to not only read but practice these concepts in a live environment, you’ll be well on your way to acing your interview and building robust, user-friendly websites. Keep learning, stay curious, and don’t be afraid to dig deeper into the “why” behind each tag.

Success Stories

About the Author

Vaishali

I'm a seasoned writer with four years of experience across technical, non-technical, and just about every genre or niche you can imagine. Adaptable and curious, I enjoy exploring new topics and making information engaging and easy to understand. Fueled by a steady stream of tea, I approach each project with creativity, reliability, and genuine enthusiasm for storytelling.

View all posts by Vaishali