Top 100 HTML Interview Questions and Answers for 2025

HTML (HyperText Markup Language) is the language used in developing and designing web pages. Doesn’t matter if you are new to HTML or you have some knowledge about it; it is important to know the basic concepts. In this blog, you will find the most frequently asked and crucial interview questions related to HTML, to prepare for interviews. Even if you are a beginner, our step-by-step guidance, examples, and explanations will help you gain confidence and be fully prepared for your interview.

Basic HTML Interview Questions for Freshers

1. What is HTML?

To build the structure of web pages, we use HTML (HyperText Markup Language), the most basic language used in constructing web pages. Different tags, such as <p>, <h1>, and <a>, enable us to organize content as well as provide linking, images, and so on. Hence, HTML serves as the basis of all websites, with CSS for style and JavaScript for interaction.

2. What are HTML Tags?

HTML tags are particular words that you put inside angle brackets, such as <p> or <h1>, and they tell the browser what to display on the page. These are used in headings, paragraphs, links, and images. Tags are of two types: open and closed; for example, <p> and </p> tags. Single tags occur, for example, when an <img> is used.

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

DIV: It is a block-level element. It generally contains tags that are larger in structure, like paragraphs and images. It starts on a new line.
SPAN: It is an inline element used to style or group small parts of text without disrupting the line flow.

4. What are semantic tags in <HTML>?

Semantic tags are those that define what is inside them and therefore make the webpage easily understandable, both for humans and search engines.

Examples:

<header>: The top-most section, like a title or navigation.
<footer>: The bottom section, mostly composed of copyright or contact information.
<article>: A self-contained piece of content, like a blog post.
<section>: Groupings of related content.

5. What is a <DOCTYPE> declaration?

A <DOCTYPE> declaration is the very first thing in an HTML document. It specifies the HTML version in use on that webpage so that the browser will read the contents in the proper format.

6. What are attributes in HTML?

Attributes provide information about an element. They are written inside the opening tag and define properties such as style and behaviour.

7. What is the ‘class’ attribute in HTML?

The class attribute in HTML is used to give a name to an element. This name can be used to apply the same style to many elements using CSS or to work with them in JavaScript.

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

id: Used for one unique element on a page. Each id must be different.
Example: <div id=”header”>
class: Can be used for multiple elements. It’s for grouping elements with similar styles.

Example: <div class=”box”>

9. What is the <a> tag in HTML?

The use of the ⁣<a> tag is to create hyperlinks. As such, it can link to other pages, websites, or resources. An href attribute describes the target address of the link.

Eg: <a href=”https://www.intellipaat.com”>Click here</a>

10. Define types of lists in HTML.

There are 3 types of lists in HTML:

<ol> (Ordered List): Items of a list which are enumerated or ordered.
<ul> (Unordered List): Items of a list are denoted with a marker or bullet points.
<dl> (Description List): Items in a list with a term and the respective description.

11. What is a marquee in HTML?

A marquee in HTML is used to make text or images move (scroll) across the screen automatically.

It is created using the <marquee> tag.

12. How do you separate a section of text in HTML?

You can separate a section of text in HTML using the <div>, <p>, or heading tags like <h1> to <h6>.

13. How do you align list items in an HTML file?

You can align list items in an HTML file using CSS.

Example – center align elements

HTML:

<ul class="course">

  <li>HTML</li>

  <li>CSS</li>

</ul>

CSS:

.course {

  text-align: center; /* or left, right */

}

14. Difference between an ordered list and an unordered list.

Feature	Ordered List (<ol>)	Unordered List (<ul>)
Definition	A list with items in a sequence	A list with items not in order
Tag Used	<ol>	<ul>
Bullet Type	Numbers, letters, or Roman numerals	Dots (default), circles, squares

15. What is an element in HTML?

An HTML element is the basic content of a webpage. It consists of a start tag, content, and an end tag.

Example: <p>Hello Intellipaat</p>

16. What is the difference between HTML and CSS?

Feature	HTML	CSS
Full Form	HyperText Markup Language	Cascading Style Sheets
Purpose	Creates the structure of a webpage	Styles the webpage (colors, layout, fonts)
Function	Defines content (text, images, links)	Defines how the content looks
Syntax Example	<p>Hello</p>	p {color: red;}
File Type	.html	.css

17. Are the HTML tags and elements the same thing?

No, they are not exactly the same, but they are closely related. A tag is just the markup used to define an element. It includes the start tag and sometimes an end tag. An element is the complete structure. It includes the tags and the content inside.

18. What are void elements in HTML?

Void elements are HTML elements that do not have a closing tag and do not contain any content.

Example: <br>, <img>, <input>, <meta>, <link>

19. How do you insert a comment in HTML?

You insert a comment in HTML using the following syntax:

<!-- This is a comment -->

Anything inside <!– and –> will be ignored by the browser and won’t be shown on the webpage. Comments are useful for adding notes or explanations in your code.

20. What are HTML Entities?

HTML Entities are special codes used to display reserved characters or characters that are not easily typed in HTML. Some characters like <, >, &, or “ have special meanings in HTML. To show them as normal text, you use HTML entities.

Future-Proof Your Career with Web Development Mastery

Transform Through Our Web Development Training

Explore Program

HTML Interview Questions for Experienced

21. What is the difference between HTML and XHTML?

Aspect	HTML	XHTML
Syntax	More flexible and doesn’t require all tags to be closed.	Strict rules: all tags must be closed.
Case Sensitivity	Tags can be in any case (e.g., <TITLE> or <title>).	Tags must be in lowercase (e.g., <title>).
Document Structure	Can have missing or incorrect closing tags.	Needs properly closed and nested tags.

22. What are data attributes in HTML?

Data attributes are extra attributes that you can add to any HTML element to contain additional information that doesn’t impact an element in any way. They begin with data, and then are followed by the name of your preference.

Example:

<div data-id=”123″ data-info=”content”>Click me</div>

23. What is the role of the <nav> tag?

The <nav> tag is used to create a section within a webpage that may consist of menus or links to other pages of the website. It makes sense to both search engines and guests that this strip is used for navigation between different parts of a site or tabs.

24. How do you create a table in HTML? What attributes can be used with a table?

To create a table in HTML, you use the <table> element along with other elements like <tr>, <th>, and <td>.

<table>: Defines the table.
<tr>: Defines a row in the table.
<th>: Defines a header cell.
<td>: Defines a regular table cell.

Example:

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>

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

The <section> and <article> tags both group content, but they are used differently:

<section>: Used to group related content in a webpage, like a part of an article or a specific topic.
<article>: Used for a self-contained piece of content that can stand alone, like a blog post or news article.

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

Inline elements: Inline elements like <span> or <a> begin at the same line as the content they affect and do not occupy additional lines, but only the number of lines needed by them. You can’t set their width or height.
Block elements: Block elements like <div> or <p> begin on a new line and take up the entire width of the container. You can set their width, height, margins, and padding.
Inline-block elements: Inline-block elements combine the features of both. Although they do not begin a new line as inline elements do, you can set the width and height of the container, among other properties of the context box model, just like block forms. Example: <img> and <button>.

27. How do you specify global attributes in HTML?

Global attributes in HTML tags are those attributes that can apply to almost all types of HTML elements. Here are a few examples of common global attributes:

id: Assigns unique names to an element.
class: Assigns one or several class names for styling or scripting purposes.
style: Writes either inline CSS styles for that element.
title: Displays extra information while hovering with a mouse on an element.
lang: Specifies the language of the element’s content.

28. What difference is there between <b> and <strong> tags in HTML?

<b>: It applies to making text bold, not by any special definition.
<strong>: It also makes the text bold, but it is used to show the importance of the text, like headings.

29. How do you insert a copyright symbol in HTML?

You can insert a copyright symbol in HTML using an HTML entity “©”.

For example:

<p>© 2025 Intellipaat</p>

Will result in:

<p>© 2025 Intellipaat</p>

30. What is white space in HTML?

White space in HTML refers to blank spaces, tabs, and line breaks between words or elements.

31. How do you create links to different sections within the same HTML web page?

You can create internal links using the id attribute and anchor tags <a>.

Example:

<!-- creating a link to that section -->

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

 

<!-- Give the target section an id -->

<h2 id="contact">Contact Section</h2>

<p>Reach out to us here.</p>

32. What is an image map?

An image map is a special kind of image where different parts of the image are clickable. Each clickable part (called a hotspot) can link to a different URL or section of the website. This is useful when you want to use one image to link to several places.

Example:

<img src="image.jpg" usemap="#examplemap">

<map name="examplemap">

  <area shape="rect" coords="34,44,270,350" href="page1.html">

  <area shape="circle" coords="130,136,60" href="page2.html">

</map>

33. Why do we use a style sheet in HTML?

We use a style sheet (CSS) to control the appearance of the content on a webpage. It helps us set the colour, size, spacing, and layout of elements. Without CSS, HTML pages would look plain and unstyled.

Benefits:

Makes web pages look better
Keeps the style separate from the content
Allows consistent design across multiple pages

34. What is SVG in HTML?

SVG stands for Scalable Vector Graphics. It is used to draw graphics like lines, shapes, and images directly in HTML using code. Unlike normal images (like JPG or PNG), SVG images don’t lose quality when resized.

35. What are the different types of headings in HTML?

HTML provides six levels of headings to organize content:

<h1> – main heading (used once per page)
<h2> to <h6> – subheadings (used for sections and sub-sections)

Example:

<h1>Website Title</h1>

<h2>Section Title</h2>

<h3>Sub-section</h3>

Headings help improve readability and are also important for SEO.

36. How do you create nested web pages in HTML?

You can create nested web pages using the <iframe> tag. An iframe is like a window inside your webpage that displays another webpage.

Example:

<iframe src="anotherpage.html" width="600" height="400"></iframe>

This shows a separate page inside your current page.

37. How do you add buttons in HTML?

You can add buttons using the <button> tag or <input type=”button”>. Buttons can be used to submit forms, run JavaScript, or perform actions.

Examples:

<button>Click Me</button>

<input type="button" value="Click Me">

To make a button do something, you can add JavaScript:

<button onclick="alert('Hello!')">Click Me</button>

38. How do you insert an image in an HTML webpage?

Use the <img> tag to insert an image. The src attribute tells the browser where the image is located, and alt gives a description if the image can’t load.

Example:

<img src="photo.jpg" alt="A beautiful sunset" width="300" height="200">

39. What is the alt attribute in HTML?

The alt attribute provides alternative text for an image if it cannot be displayed. It’s also useful for screen readers, which help visually impaired users.

Example:

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

Get 100% Hike!

Master Most in Demand Skills Now!

40. How do you add a hyperlink in an HTML webpage?

Use the <a> tag to create a hyperlink. The href attribute specifies the URL you want to link to.

Example:

<a href="https://www.google.com">Go to Google</a>

You can also make images or buttons clickable by putting them inside <a> tags.

41. How do you add color to the text in HTML?

To color text, you use CSS. You can either use the style attribute directly or write CSS in a <style> tag.

Example (inline):

<p style="color: blue;">This text is blue.</p>

Example (CSS):

<style>

  p {

    color: green;

  }

</style>

<p>This text is green.</p>

42. How do you add JavaScript to an HTML webpage?

You can add JavaScript using the <script> tag. It can go in the <head> or at the end of the <body>.

Example:

<script>

  alert("Hello, world!");

</script>

Or link an external file:

<script src="script.js"></script>

43. What is the role of the <head> tag in HTML?

The <head> tag contains information about the webpage, not what is shown on the screen. It includes things like:

Page title (<title>)
Meta info (for search engines)
Links to CSS
Scripts

Example:

<head>

  <title>My Website</title>

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

</head>

44. What is a form in HTML?

A form lets users enter data that can be sent to a server, such as contact information, login details, or survey answers.

Example:

<form action="submit.php" method="post">

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

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

</form>

45. How to create a form in HTML?

Use the <form> tag with different input types like text boxes, checkboxes, radio buttons, and buttons.

Example:

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

  <label>Name:</label>

  <input type="text" name="name"><br>

  <label>Email:</label>

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

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

</form>

46. What are the different types of form input fields in HTML?

HTML provides many input types for different purposes:

text – for plain text
email – for email addresses
password – hides the text
checkbox – for multiple selections
radio – for single selection
submit – to send the form
button – a general button
file – to upload files
date – for selecting a date

Example:

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

<input type="checkbox" name="subscribe">

47. What is the difference between link tag <link> and anchor tag <a>?

<link> is used in the <head> to link external files, like CSS.
<a> is used in the body to create clickable links.

Example:

<!-- link tag -->

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

<!-- anchor tag -->

<a href="page.html">Go to Page</a>

48. When to use scripts in the head and when to use scripts in the body?

Use scripts in the head if they need to load before the page content (e.g., libraries or page settings).
Use scripts at the end of the body if they interact with page elements, so everything loads first.

Best practice: Place scripts at the end of <body> for better performance.

49. What is the advantage of collapsing white space?

In HTML, extra spaces, tabs, or line breaks are automatically reduced to a single space. This makes code easier to write and cleaner to display.

Example:

<p>This       is     spaced</p>

Will show as:

“This is spaced”

50. What exactly does a <meta> tag signify?

A <meta> tag is used to insert meta-information in HTML documents, such as page descriptions, keywords, authors, and character sets. With all the above info, search engines and browsers can accept services that will present a page.

Advanced HTML Interview Questions

51. What is a viewport? How do you set a viewport in an HTML document?

The viewport is that area of the web page that is actually visible on the screen of a particular device. It specifies the location along with the area that is going to display a page’s content and its corresponding size.

The viewport is set within the HTML document by placing the <meta> tag with the name=”viewport” attribute. This particular tag is situated within the head part of the HTML code of the document.

52. How to import a video or audio file in HTML?

1. Embedding Video: A video file is embedded using the <video> tag. To improve compatibility in different browsers, it is advisable to give a few video formats.

Example:

<video controls>

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

</video>

2. Embedding Audio: Use the <audio> tag to embed an audio file.

Example:

<audio controls>

  <source src="audio.mp3" type="audio/mp3">

</audio>

Note: Both tags use the controls attribute to add play, pause, and volume buttons.

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

Both the <iframe> tag and the <embed> tag are used to embed something in an HTML page, but they do so differently and for different purposes:

<iframe>: Embeds another webpage inside your page.
<embed>: Embeds multimedia content into the page, such as audio or video, or capabilities for a PDF to be part of that page.

Stay Ahead with Excellence in Web Development Skills

The Ultimate Web Development Program Awaits

Explore Program

54. What are some best practices for optimizing HTML for performance?

Minify HTML Files: Removing unnecessary blurbs and comments for file-size minimization.
Correct Structure of HTML: Organize headers and footers to enhance readability and improve its SEO performance through semantic elements such as <header>, <footer>, <article>, <section>, and others.
Optimizing Images: File formats and optimization synthesize accurate photography for size reduction.
Defer or Async JavaScript: Using defer or async loads scripts, but doesn’t stop the loading of the web page.
Use External CSS/JS: More efficient in using external CSS and JavaScript rather than linking them through the HTML tags.
Images and Videos Lazy Loading: Lazy load the images and videos so that they load only when scrolled to that part of the page or screen with lazy load.
Use CDN: Use a content delivery network for resource provision. Speed up the process.

55. How to add Scalable Vector Graphics (SVG) to your web page?

To add SVG (Scalable Vector Graphics) to your web page, there are a few straightforward methods you can use:

Using the <img> Tag: Similar to any other image, you can incorporate an SVG file with the <img> tag.
Inline SVG: You can directly include the SVG code in your HTML, giving you greater control over its size and style.
Using the <object> Tag: This method allows you to embed an SVG file as an object.
Using the <iframe> Tag: You can also utilize an <iframe> to display the SVG file in a separate frame.

56. What is the role of the action attribute in HTML forms?

The action attribute in an HTML form indicates the URL to which the form data will be sent upon submission. It specifies the endpoint that will handle the form data, such as a server-side script or a specific page.

57. How to handle JavaScript events in HTML?

Data can be displayed in a tabular format with the help of the <table> tag. It can also be used to manage the layout of the web page. For example, the header section, the navigation bar, the content of the body, and the footer section.

The following HTML tags are used when building a table on an HTML webpage:

JavaScript events can be managed in an HTML document using the <script> tag. Script events can be registered on HTML elements using the addEventListener() method. This way, certain functions are called when there is a user action (like a click or keystroke), creating interactive behavior in the webpage.

58. What are HTML Web Workers?

HTML Web Workers are JavaScript scripts that work behind the main page. They allow users to do calculations without the interface “freezing” or “slowing down.” Web Workers communicate with the main page through message passing – a much easier way for handling heavy-duty tasks without putting a dent in performance.

59. Describe HTML layout structure.

The layout structure of an HTML page defines how different parts of the page are arranged. Common layout elements include:

<header> – top section (usually for logo and navigation)
<nav> – navigation menu
<main> – main content of the page
<section> – a group of related content
<article> – self-contained content (like a blog post)
<aside> – side content (like ads or extra info)
<footer> – bottom of the page (like copyright info)

Example:

<header>My Website</header>

<nav>Menu</nav>

<main>

  <section>Welcome!</section>

</main>

<footer>© 2025</footer>

60. What are the various formatting tags in HTML?

Formatting tags change the appearance of text:

<b> – Bold
<strong> – Strong importance (also bold)
<i> – Italic
<em> – Emphasized text (also italic)
<mark> – Highlighted text
<u> – Underlined text
<sup> – Superscript (e.g., x²)
<sub> – Subscript (e.g., H₂O)
<del> – Deleted text
<ins> – Inserted text

61. What is the role of the <legend> tag in a form?

The <legend> tag is used inside a <fieldset> to give a title or label to grouped form elements. It helps users understand what the group is about.

Example:

<fieldset>

  <legend>Contact Info</legend>

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

</fieldset>

62. What is the difference between <sup> and <sub> tags in HTML?

<sup>: Superscript – text appears above the line (e.g., x²)
<sub>: Subscript – text appears below the line (e.g., H₂O)

Example:

E = mc<sup>2</sup>  <!-- Superscript -->

H<sub>2</sub>O     <!-- Subscript -->

63. What are deprecated tags in HTML?

Deprecated tags are old HTML tags that should not be used anymore because better options (like CSS) now exist. They still might work in some browsers but are not recommended.

Examples:

<font> – use CSS for font styling
<center> – use CSS text-align
<u> – use CSS text-decoration

64. How can you make an image clickable in HTML?

Wrap the <img> tag inside an <a> tag.

Example:

<a href="https://example.com">

  <img src="image.jpg" alt="Clickable Image">

</a>

65. What is the <details> tag and how is it used?

The <details> tag is used to create a section that can be expanded or collapsed by the user. It’s often used for FAQs or extra information.

Example:

<details>

  <summary>More Info</summary>

  <p>This is hidden until clicked.</p>

</details>

66. How can you create a tooltip in HTML?

Use the title attribute. When the user hovers over the element, the tooltip appears.

Example:

<p title="This is a tooltip!">Hover over this text.</p>

67. What is the <output> tag used for in HTML5 forms?

The <output> tag is used to display the result of a calculation or script in a form.

Example:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">

  <input type="number" id="a"> + 

  <input type="number" id="b"> =

  <output name="result"></output>

</form>

68. What is the purpose of the <noscript> tag?

The <noscript> tag shows alternative content if the browser doesn’t support JavaScript or if JavaScript is turned off.

Example:

<noscript>Your browser does not support JavaScript.</noscript>

69. What is the difference between readonly and disabled attributes in form inputs?

readonly: User can’t change the value, but it’s sent with the form.
disabled: User can’t change or focus it, and it’s not sent with the form.

Example:

<input type="text" value="Can't edit" readonly>

<input type="text" value="Disabled" disabled>

70. How do you open a link in a new browser tab or window in HTML?

Use the target=”_blank” attribute in the <a> tag.

Example:

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

Stay Ahead with Excellence in Web Development Skills

The Ultimate Web Development Program Awaits

Explore Program

71. What are the different values for the target attribute in anchor tags?

_self: Opens in the same tab (default)
_blank: Opens in a new tab/window
_parent: Opens in the parent frame
_top: Opens in the full window (removes frames)

72. What is the role of the <base> tag in HTML?

The <base> tag sets a base URL for all relative links in the page. It goes inside the <head> tag.

Example:

<base href="https://example.com/">

<a href="page.html">Goes to https://example.com/page.html</a>

73. How can you auto-focus an input field in HTML?

Use the autofocus attribute. It makes the input field automatically active when the page loads.

Example:

<input type="text" name="name" autofocus>

74. What are the different types of button tags in HTML?

There are 3 main types of <button>:

type=”button” – regular button
type=”submit” – submits the form
type=”reset” – resets form fields

Example:

<button type="submit">Submit</button>

<button type="reset">Reset</button>

<button type="button">Click Me</button>

75. What is the difference between HTML and HTML5?

HTML is the older version of the language used to build web pages.

HTML5 is the latest version with more features, such as:

New tags: <video>, <audio>, <article>, <section>
Better support for multimedia
Form enhancements (like date, email, range)
Mobile-friendly and faster loading

In short: HTML5 is a more powerful and modern version of HTML.

HTML5 Interview Questions and Answers

1. What is the difference between localStorage and sessionStorage in HTML5?

Both localStorage and sessionStorage are used to store data in the browser. The key difference is that localStorage persists data even after the browser is closed, while sessionStorage only persists data for the duration of the page session.

2. What are Web Workers in HTML5?

Web Workers allow scripts to run in the background, independent of the user interface, making web applications more responsive by offloading tasks like data processing to separate threads.

3. What are HTML5 Semantic Elements?

HTML5 introduced semantic elements like <header>, <footer>, <article>, <section>, <nav>, and <aside>, which improve the structure of web pages and make the code more readable and accessible.

4. Explain what HTML5 means and its various features.

HTML5 is the latest advancement in HTML and is capable of rendering web pages dynamically, modern, and easy to build.

Important Features of HTML5:

Recently added Tags: for example, <header>, <footer>, etc., and <section>, which have been created to organize content better.
Multimedia: The new <video> and <audio> tags are available for embedding audio or video.
Canvas: You draw graphics and animations within a browser using the <canvas> tag.
Improved Forms: With new input such as email, date, and range incorporated, forms will be easier to work with.
Local Storage: It stores data directly for offline usage in the browser.
Geolocation: Websites can access your location.

5. Define <canvas> element in HTML5?

The <canvas> element in HTML5 allows you to draw graphics and animations on a web page using JavaScript.

Key Functions:

fillRect(): Draws a rectangle.
arc(): Draws a circle or arc.

6. Give a description of a template element within HTML5.

The <template> element becomes a part of HTML5 that is used to mold HTML contents during the loading of the page, and later on, such contents would be referred to or dynamically aggregated through JavaScript.

7. What is MathML in HTML 5?

MathML is a markup language that is used in HTML5 to represent mathematical expressions and equations. This allows the representation of complex mathematical symbols, equations, and notations as they appear on web pages, making them accessible and formatted well.

8. What are inline and block elements in HTML5?

Block elements take up the full width and start on a new line.
Examples: <div>, <p>, <h1>, <section>
Inline elements stay within the same line and only take as much width as needed.
Examples: <span>, <a>, <img>, <strong>

Think of it like:
Block = Big boxes
Inline = Small items inside a line

9. What is the difference between the <figure> tag and the <img> tag?

<img> is used to display an image.
<figure> is a container used to group media content (like <img>) with a caption (<figcaption>).

Example:

<figure>

  <img src="photo.jpg" alt="A photo">

  <figcaption>This is a caption for the photo.</figcaption>

</figure>

10. How to specify the metadata in HTML5?

Metadata gives information about the web page (like title, character set, description) and is placed in the <head> section.

Example:

<head>

  <meta charset="UTF-8">

  <meta name="description" content="A beginner guide to HTML5">

  <meta name="author" content="John Doe">

  <title>My HTML5 Page</title>

</head>

11. Are the <datalist> tag and <select> tag the same?

<select> shows a dropdown list of fixed options.
<datalist> gives suggested options as you type in an input field.

Example:

<input list="browsers">

<datalist id="browsers">

  <option value="Chrome">

  <option value="Firefox">

</datalist>

12. What is the difference between the <meter> tag and <progress> tag?

<meter> shows a specific value within a known range (like battery level).
<progress> shows how much of a task is done, like a loading bar.

Example:

<meter value="0.7" min="0" max="1">70%</meter>

<progress value="50" max="100">50%</progress>

13. How to do drag and drop in HTML5?

HTML5 allows elements to be dragged using the draggable attribute and JavaScript events like dragstart, dragover, and drop.

Example:

<div id="drag" draggable="true" ondragstart="drag(event)">Drag me</div>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>

You’ll also need JavaScript to handle the logic.

14. What is the difference between SVG and Canvas in HTML5?

SVG (Scalable Vector Graphics): Uses XML-based tags, works well for static graphics, zoomable without losing quality.
Canvas: Used for drawing graphics with JavaScript, better for animations and games but not easily scalable.

In short:
SVG = shapes via code
Canvas = pixels via script

15. What type of audio files can be played using HTML5?

HTML5 supports audio formats like:

MP3 (.mp3)
WAV (.wav)
Ogg (.ogg)

Example:

<audio controls>

  <source src="sound.mp3" type="audio/mpeg">

</audio>

16. Explain the concept of web storage in HTML5.

Web storage lets websites store data in the user’s browser:

localStorage – stores data with no expiry (until manually cleared)
sessionStorage – stores data until the tab is closed

Example:

localStorage.setItem("name", "Alice");

let user = localStorage.getItem("name");

17. What is Microdata in HTML5?

Microdata helps add semantic meaning to content using itemscope, itemtype, and itemprop. It’s used by search engines for better indexing.

Example:

<div itemscope itemtype="http://schema.org/Person">

  <span itemprop="name">John Doe</span>

</div>

18. What are the new input types provided by HTML5 for forms?

HTML5 added new input types like:

email
url
tel
number
range
date, time, datetime-local
color
search

These improve validation and user experience.

19. What are the New tags in Media Elements in HTML5?

New tags for media handling include:

<audio> – plays audio files
<video> – plays video files
<track> – adds subtitles or captions to videos

Example:

<video controls>

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

  <track src="captions.vtt" kind="subtitles">

</video>

20. What are server-sent events in HTML5?

Server-Sent Events (SSE) let servers send updates to the browser automatically using the EventSource API.

Example:

const source = new EventSource('server.php');

source.onmessage = function(event) {

  console.log(event.data);

};

Used for real-time updates like notifications, news, or stock prices.

21. What is a manifest file in HTML5?

A manifest file allows a web app to work offline. It lists files the browser should cache.

Example in HTML:

<html manifest="app.manifest">

Example manifest file:

CACHE MANIFEST

/index.html

/style.css

/script.js

Note: This feature is now deprecated; use service workers instead.

22. What is the Geolocation API in HTML5?

It allows websites to get the location (latitude, longitude) of the user with their permission.

Example:

navigator.geolocation.getCurrentPosition(function(position) {

  console.log(position.coords.latitude);

});

23. What are some advantages of HTML5 over its previous versions?

Better support for multimedia (audio, video)
New form controls (like date, range)
Semantic tags (<article>, <section>)
Local storage (no need for cookies)
Mobile-friendly and faster performance
APIs like Geolocation, Web Storage, Canvas

24. How is the <mark> tag used in HTML5?

The <mark> tag is used to highlight or mark important text (like search keywords).

Example:

<p>Search result for <mark>HTML5</mark>.</p>

25. What is the purpose of the <time> element in HTML5?

The <time> tag is used to represent a date, time, or duration. It can help search engines and browsers understand the time-related content.

Example:

<time datetime="2025-05-26">May 26, 2025</time>

Conclusion

In conclusion, HTML is very important in a web developer’s career. HTML Interview Questions will surely help candidates gain an edge over others. Candidates should try to learn the tricks of the trade and practice most interview questions to showcase their skills and knowledge in the interview convincingly. Keep enlightening yourself and keep engaging with the fabulous HTML that must go with starting ahead of others in preparation not just for interviews but also for the future.

Related Blogs	What’s Inside
Is Web Development a Good Career?	Discusses the career prospects and rewards of web development roles.
Is Software Engineering a Good Career?	Details the benefits and career paths in software engineering.
Web Developer vs Software Developer Difference	Compares web and software developers in terms of skills and responsibilities.
How to Become IT Engineer	Explains the requirements and steps to pursue an IT engineering career.
Angular Interview Questions	Lists Angular questions to excel in front-end development interviews.
CSS Interview Questions	Details CSS questions for mastering web styling job interviews.
React Redux	Highlights React Redux for managing state in complex React applications.
What is WordPress?	Outlines WordPress as a platform for creating user-friendly websites.
React Carousel	Shows how to create a carousel in React for dynamic web displays.

Frequently Asked Questions

Q1. What is HTML?

HyperText Markup Language is the basic language through which one can build or manipulate all contents of the web like images, text, links, etc.

Q2. What are types of List in HTML?

The three types of lists in HTML are: ordered lists (<ol>), unordered lists (<ul>) and descriptions (<dl>).

Q3. What is the difference between the <div> and <span> tags?

<div> is a block element, whereas <span> is an inline element; <div> is meant for larger chunks of content, while <span> tends to be used to style or group smaller pieces of text or content.

Q4. What are semantic tags in HTML?

Semantic tags in HTML, such as <header>, <footer>, <article>, and <section>, add meaning to the content, enhancing the web page’s structure for both search engines and developers.

Q5. What is the <meta> tag used for in HTML?

The <meta> tag gives metadata about the web page concerning the character encoding, author, and keywords for search engines. This is an important factor in the optimization and performance of web pages in general.

HTML Interview Questions

Table of Contents:

Basic HTML Interview Questions for Freshers

1. What is HTML?

2. What are HTML Tags?

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

4. What are semantic tags in <HTML>?

5. What is a <DOCTYPE> declaration?

6. What are attributes in HTML?

7. What is the ‘class’ attribute in HTML?

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

9. What is the <a> tag in HTML?

10. Define types of lists in HTML.

11. What is a marquee in HTML?

12. How do you separate a section of text in HTML?

13. How do you align list items in an HTML file?

14. Difference between an ordered list and an unordered list.

15. What is an element in HTML?

16. What is the difference between HTML and CSS?

17. Are the HTML tags and elements the same thing?

18. What are void elements in HTML?

19. How do you insert a comment in HTML?

20. What are HTML Entities?

HTML Interview Questions for Experienced

21. What is the difference between HTML and XHTML?

22. What are data attributes in HTML?

23. What is the role of the <nav> tag?

24. How do you create a table in HTML? What attributes can be used with a table?

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

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

27. How do you specify global attributes in HTML?

28. What difference is there between <b> and <strong> tags in HTML?

29. How do you insert a copyright symbol in HTML?

30. What is white space in HTML?

31. How do you create links to different sections within the same HTML web page?

32. What is an image map?

33. Why do we use a style sheet in HTML?

34. What is SVG in HTML?

35. What are the different types of headings in HTML?

36. How do you create nested web pages in HTML?

37. How do you add buttons in HTML?

38. How do you insert an image in an HTML webpage?

39. What is the alt attribute in HTML?

40. How do you add a hyperlink in an HTML webpage?

41. How do you add color to the text in HTML?

42. How do you add JavaScript to an HTML webpage?

43. What is the role of the <head> tag in HTML?

44. What is a form in HTML?

45. How to create a form in HTML?

46. What are the different types of form input fields in HTML?

47. What is the difference between link tag <link> and anchor tag <a>?

48. When to use scripts in the head and when to use scripts in the body?

49. What is the advantage of collapsing white space?

50. What exactly does a <meta> tag signify?

Advanced HTML Interview Questions

51. What is a viewport? How do you set a viewport in an HTML document?

52. How to import a video or audio file in HTML?

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

54. What are some best practices for optimizing HTML for performance?

55. How to add Scalable Vector Graphics (SVG) to your web page?

56. What is the role of the action attribute in HTML forms?

57. How to handle JavaScript events in HTML?

58. What are HTML Web Workers?

59. Describe HTML layout structure.

60. What are the various formatting tags in HTML?

61. What is the role of the <legend> tag in a form?

62. What is the difference between <sup> and <sub> tags in HTML?

63. What are deprecated tags in HTML?

64. How can you make an image clickable in HTML?

65. What is the <details> tag and how is it used?

66. How can you create a tooltip in HTML?

67. What is the <output> tag used for in HTML5 forms?

68. What is the purpose of the <noscript> tag?

69. What is the difference between readonly and disabled attributes in form inputs?

70. How do you open a link in a new browser tab or window in HTML?

71. What are the different values for the target attribute in anchor tags?

72. What is the role of the <base> tag in HTML?

73. How can you auto-focus an input field in HTML?

74. What are the different types of button tags in HTML?

75. What is the difference between HTML and HTML5?