9/3/25, 11:06 AM 50 HTML Interview Questions
50 HTML Interview Questions &
Answers
A comprehensive guide for front-end developers.
HTML Fundamentals
1. What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to
create the structure and content of web pages. It provides the framework for a
webpage using a series of elements.
2. What's the difference between an HTML tag and an HTML element?
An HTML tag is the keyword or symbol enclosed in angle brackets, like <h1>. An
HTML element is the entire structure, including the opening tag, the closing tag,
and all content in between, e.g., <h1>My Heading</h1>.
3. What is a doctype?
The <!DOCTYPE html> declaration is a required preamble that tells the browser which
version of HTML the document is using. For HTML5, it ensures the browser renders
the page in "standards mode."
[Link]:5500/[Link] 1/11
9/3/25, 11:06 AM 50 HTML Interview Questions
4. What are HTML attributes?
Attributes are used inside the opening tag to provide additional information about
an HTML element, such as src for an image or href for a link.
5. What's the difference between `id` and `class` attributes?
An `id` is a unique identifier for a single element on a page (e.g., `#main-header`). A
`class` is a non-unique attribute used to apply styles to multiple elements (e.g.,
`.card`).
6. What's the purpose of the `head` and `body` tags?
The <head> contains metadata about the HTML document that isn't displayed on the
page, like the title and links to stylesheets. The <body> contains all the visible content
of the webpage, like text, images, and links.
7. How do you create a hyperlink?
You use the anchor tag <a>, with the `href` attribute specifying the destination URL:
<a href="[Link] Example</a>.
8. How do you embed an image?
You use the <img> tag, which is a self-closing tag. It requires the `src` attribute for the
image URL and the `alt` attribute for accessibility: <img src="[Link]" alt="A
descriptive alt text">.
9. What is the purpose of the `alt` attribute on an image?
[Link]:5500/[Link] 2/11
9/3/25, 11:06 AM 50 HTML Interview Questions
The `alt` (alternative text) attribute provides a text description of the image for screen
readers and search engines. It also displays if the image fails to load.
10. How do you add a comment in HTML?
Comments are added using <!-- This is a comment -->. They are not displayed in
the browser and are used to leave notes for developers.
Semantic HTML
11. What is semantic HTML?
Semantic HTML uses tags that convey the meaning or purpose of the content they
contain, rather than just how the content should look. This improves accessibility,
readability, and SEO.
12. Give examples of semantic and non-semantic tags.
Semantic tags: <header>, <nav>, <article>, <section>, <footer>.
Non-semantic tags: <div>, <span>.
13. Why is using semantic tags important?
Semantic tags make the code easier for developers to read and understand. They
also help search engines and assistive technologies (like screen readers) understand
the structure and hierarchy of the page, which is crucial for SEO and accessibility.
14. What is the difference between `<b>` and `<strong>`?
[Link]:5500/[Link] 3/11
9/3/25, 11:06 AM 50 HTML Interview Questions
<b> is a non-semantic tag used for purely stylistic bolding. <strong> is a semantic tag
used to indicate that the text is of strong importance.
15. What is the difference between `<i>` and `<em>`?
<i> is a non-semantic tag used for stylistic italicization. <em> is a semantic tag used to
emphasize text or show a change in mood.
16. When should you use `<section>` vs. `<article>`?
An <article> is for self-contained, independent content (like a blog post or news
story). A <section> groups related content within an article or on a page. An article
can contain multiple sections, and a section can contain multiple articles.
17. What is the purpose of the `<nav>` tag?
The <nav> tag is a semantic element used to contain major navigation links on a
page.
HTML5 Features
18. What are some new features in HTML5?
HTML5 introduced new semantic elements (<header>, <nav>, etc.), new form input
types (`date`, `email`, etc.), and APIs for features like geolocation, drag-and-drop, and
web storage.
19. How do you embed audio and video in HTML5?
[Link]:5500/[Link] 4/11
9/3/25, 11:06 AM 50 HTML Interview Questions
Use the <audio> and <video> tags. For example, <video src="video.mp4" controls>
</video>. The `controls` attribute adds play, pause, and volume controls.
20. What is the `<canvas>` element used for?
The <canvas> element is a container for graphics, which can be drawn on the fly
using JavaScript. It's often used for games, charts, and interactive animations.
21. What are `data-*` attributes?
They are custom attributes that allow you to store extra data on standard HTML
elements. The data can then be accessed and manipulated using JavaScript.
22. What is the difference between `localStorage` and `sessionStorage`?
Both are HTML5 web storage APIs. `localStorage` stores data with no expiration
date, while `sessionStorage` stores data for a single session and is cleared when the
browser tab is closed.
23. What is the `<details>` and `<summary>` element pair?
They create an interactive widget that the user can open and close. The <summary>
provides a visible heading, and the <details> contains the hidden content.
24. How do you implement client-side form validation in HTML5?
You can use attributes like `required`, `type="email"`, `min`, `max`, and `pattern`
directly on the input fields. The browser will then handle the validation automatically
without JavaScript.
[Link]:5500/[Link] 5/11
9/3/25, 11:06 AM 50 HTML Interview Questions
25. What is the purpose of the `<meter>` and `<progress>` elements?
The <meter> element represents a scalar measurement within a known range (like
disk usage). The <progress> element represents the completion progress of a task.
Page Structure & Layout
26. What is the difference between block-level and inline elements?
Block-level elements start on a new line and take up the full available width (<div>,
<p>). Inline elements do not start on a new line and only take up as much width as
needed (<span>, <a>, <img>).
27. What is the `iframe` tag used for?
The <iframe> tag is used to embed another HTML document within the current
document. It's often used for embedding content like Google Maps or YouTube
videos.
28. How can you display a web page inside a web page?
By using the <iframe> tag, you can nest one webpage within another.
29. How can you make a website responsive with HTML?
While responsiveness is primarily a CSS and JavaScript concern, HTML plays a role
through the <meta name="viewport" content="width=device-width, initial-
scale=1.0"> tag in the <head>, which ensures proper rendering on various devices.
[Link]:5500/[Link] 6/11
9/3/25, 11:06 AM 50 HTML Interview Questions
30. What are HTML entities?
They are special characters used to display reserved characters in HTML, like < (`<`),
> (`>`), and & (`&`).
31. What is the `srcset` attribute?
The `srcset` attribute on an <img> tag allows a developer to provide a list of different
image sources for the browser to choose from based on the device's pixel density
and viewport size.
32. What's the difference between `display: none` and `visibility: hidden`?
This is a CSS question, but often asked in an HTML context. `display: none`
completely removes the element from the document flow, while `visibility: hidden`
hides the element but still reserves the space it would have occupied.
Accessibility (A11y)
33. What is web accessibility?
Web accessibility means designing and coding websites so that people with
disabilities can use them effectively. This includes people with visual, auditory,
cognitive, and motor impairments.
34. How does the `alt` attribute on an image contribute to accessibility?
It provides a text alternative for users who cannot see the image, such as those using
screen readers.
[Link]:5500/[Link] 7/11
9/3/25, 11:06 AM 50 HTML Interview Questions
35. What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added
to HTML elements to improve their accessibility for screen reader users.
36. When should you use ARIA roles and attributes?
You should use ARIA to provide semantic meaning to non-semantic HTML or to
convey the state of dynamic content (e.g., `aria-expanded="true"`). The general rule
is to use native HTML elements first, as they often have built-in accessibility.
37. What is the purpose of the `<label>` tag?
The <label> tag improves the usability and accessibility of form inputs. When a user
clicks on the label, the corresponding input field is focused. It's semantically linked
using the `for` attribute that matches the input's `id`.
38. How can you ensure proper heading hierarchy?
You should use heading tags <h1> through <h6> to outline the content structure.
There should only be one <h1> per page, and headings should be used in a logical
order without skipping levels.
Forms & Input
39. How do you create a form in HTML?
You use the <form> tag, which acts as a container for all the form controls, like input
fields, checkboxes, and buttons.
[Link]:5500/[Link] 8/11
9/3/25, 11:06 AM 50 HTML Interview Questions
40. What is the `action` attribute in a form?
The `action` attribute specifies the URL where the form data will be submitted when
the user clicks the submit button.
41. What is the difference between `GET` and `POST` methods?
`GET` appends the form data to the URL as query parameters. It should be used for
retrieving data and is not secure for sensitive information. `POST` sends the form
data in the body of the HTTP request, making it more secure and suitable for
sending larger amounts of data.
42. What is the `input` tag and what are some common `type` attributes?
The <input> tag is used to create interactive controls in a form. Common types
include `text`, `password`, `email`, `checkbox`, `radio`, `submit`, and `file`.
43. How do you create a dropdown list?
You use the <select> tag, which contains one or more <option> tags.
44. What is the `placeholder` attribute?
The `placeholder` attribute provides a hint to the user about what kind of input is
expected in a field. It appears inside the input field and disappears when the user
starts typing.
45. What is the purpose of the `required` attribute?
[Link]:5500/[Link] 9/11
9/3/25, 11:06 AM 50 HTML Interview Questions
The `required` attribute is a boolean attribute that specifies that a form input field
must be filled out before the form can be submitted.
Miscellaneous
46. What are void elements? Give examples.
Void elements are HTML elements that do not have a closing tag because they
cannot have any content. Examples include <img>, <br>, <input>, and <hr>.
47. What is the difference between an ordered and an unordered list?
An ordered list (<ol>) is a list of items with a specific sequential order, typically
displayed with numbers. An unordered list (<ul>) is a list of items where the order
doesn't matter, typically displayed with bullets.
48. How do you use the `colspan` and `rowspan` attributes?
These attributes are used in HTML tables. colspan specifies how many columns a cell
should span, and rowspan specifies how many rows a cell should span.
49. What is the `meta` tag used for?
The <meta> tag is used to provide metadata about the HTML document, such as
character set, description, and keywords for search engines.
50. How can you include JavaScript code in an HTML file?
[Link]:5500/[Link] 10/11
9/3/25, 11:06 AM 50 HTML Interview Questions
You can use the <script> tag. You can either write the JavaScript code directly inside
the tag or link to an external `.js` file using the `src` attribute, like <script
src="[Link]"></script>.
[Link]:5500/[Link] 11/11