You can expect questions from all levels in an HTML interview, from basic syntax to advanced topics like Web Components and accessibility.
This guide makes your preparation easy. It breaks down the most common HTML interview questions by difficulty level: beginner, intermediate, and advanced.
Each level is provided with simple and clear answers, so you can learn and feel confident in your next technical interview.
Learn the essentials of frontend development with hands-on training in HTML, CSS, and JavaScript. Build stunning, responsive websites and gain the skills to bring your creative ideas to life!
Beginner HTML Questions
1. What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages.
It creates the structure of the page using HTML tags, specifying where elements like the heading, paragraph, image, or link will be displayed.
The browser reads these tags and displays the page on the screen accordingly.
2. What is a Doctype?
A Doctype is a mandatory declaration at the very beginning of an HTML file. It tells the browser which version of HTML the page uses so the browser can render the content correctly.
For example, in HTML5, we write:
<!DOCTYPE html>
This forces the browser to operate in “standards mode,” rendering everything according to the latest HTML rules, without any old quirks.
3. What are HTML attributes?
HTML attributes are words inside an opening tag to specify the element’s behavior or provide additional information about it.
They are always written as name/value pairs, such as name="value".
For example:
<a href="https://example.com">Visit</a>
Here, href is an attribute that indicates the address the link will point to.
Similarly, there are other attributes like src, alt, id, and class, which perform different functions.
4. What are the differences between id and class attributes?
Both id and class are used to style HTML elements or control them with JavaScript, but their functions are different.
id is unique to an element. It can be used only once in an entire page. For example:
<p id="intro">Hello!</p>
While class can be applied to multiple elements to group their style and behavior.
For example:
<p class="note">First</p>
<p class="note">Second</p>
5. What is the difference between <div> and <span>?
<div> and <span> are both generic container elements, used to group content. However, the difference lies in their display behavior.
<div> is a block-level element. It always starts on a new line and occupies the entire width.
Example:
<div>This is a div</div>
<div>This is another div</div>
Both of these will appear on separate lines.
<span> is an inline element. It occupies only as much space as the content requires and does not start a new line.
Example:
<span>This is a span</span><span>This is another span</span>
Both of these appear side by side on the same line.
6. How do you create a hyperlink in HTML?
We use the <a> tag to create a hyperlink. This tag makes any text or element clickable.
Within the <a> tag, you place the link to the destination page in the href attribute.
For example, if you want to create a link to Google, you might write:
<a href="https://www.google.com">Go to Google</a>
Now, when someone clicks on this text “Go to Google,” they will be directed to Google’s website.
7. What is the purpose of the alt attribute on an <img> tag?
The function of the alt attribute is to display text in place of an image if it fails to load.
For example:
<img src="photo.jpg" alt="A beautiful sunset over the mountains">
Now, if the image fails to load for any reason, such as slow internet or a missing file, this text will be displayed.
This is also important for accessibility, as screen readers read this alt text to visually impaired users.
And search engines can also understand the content of the image from the alt text, which improves SEO.
8. What are the basic list types in HTML?
There are mainly three types of lists in HTML:
Unordered List (<ul>): This is a list with bullet points (•). Each item is written with a <li> tag.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
Ordered List (<ol>) – This is a numbered (1, 2, 3…) or lettered (a, b, c…) list. Here, each item is marked with a <li> tag.
Example:
<ol>
<li>Wake up</li>
<li>Brush</li>
<li>Eat breakfast</li>
</ol>
Definition List (<dl>) – This list is slightly different. Here, we write the term and its meaning. Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Here <dt> is the term and <dd> is its description.
9. How do you add comments in HTML?
The syntax for writing a comment in HTML is:
<!-- This is a comment -->
Any text written between <!-- and --> will be ignored by the browser and will not be visible to users. Comments are meant for developers and are used to explain the code or add notes.
10. What is the difference between <head> and <body> tags?
Both <head> and <body> are important tags of an HTML page, but their functions are different.
The <head> tag contains all the meta-information that is not visible on the page, such as the page title, link to the CSS file, favicon, meta tags (for SEO and charset), etc. These details are meant to tell the browser and search engines about the page.
The <body> tag contains everything that is visible to the user on the page – such as text, images, buttons, videos, links, or any other visible content.
11. What is semantic HTML?
Semantic HTML means using HTML tags that convey the true meaning of the content.
This makes it easier for both browsers and search engines to understand the page’s structure, and improves both accessibility and SEO.
For example, instead of using <div> for everything:
- Use
<nav>for navigation <article>for articles<footer>for the last part of the page
12. What are <thead>, <tbody>, and <tfoot> used for in a table?
<thead>, <tbody>, and <tfoot> are used to organize the table’s content so that the structure remains clear.
<thead>→ The header portion of the table, such as column names.<tbody>→ The main content of the table, i.e., rows that display data.<tfoot>→ The footer portion of the table, such as a total or summary.
This structure helps browsers with scrolling on large tables and is also useful for applying styles.
13. How do you create a form in HTML?
The <form> element is used to create forms in HTML. Within a form, you can insert different input elements, such as:
<input>– text, password, email, etc.<textarea>– For long text<button>– For submit or any action
Some important attributes of a <form>:
action– This indicates where to send the form data.method– This defines the HTTP method, usuallyGETorPOST.
Example:
<form action="/submit" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Login</button>
</form>
This is a simple and standard way to create an HTML form.
14. What are some common <input> types?
Common types of <input> elements are:
text→ to enter simple textpassword→ to type a password, characters are hiddencheckbox→ to select from multiple optionsradio→ to select only one option from a groupsubmit→ to submit a form buttonfile→ to upload a file
HTML5 introduced several new types:
date→ to select a dateemail→ to validate an emailnumber→ for number inputcolor→ for a color picker
These new types provide browser validation and a better user experience. For example, if a user enters the incorrect email format, the browser will immediately inform the user.
Intermediate HTML Questions
15. Explain the difference between GET and POST form methods.
Both GET and POST are ways of sending form data, the only difference is:
GET: Form data is appended to the URL. For example:
example.com/search?query=hello
This is used when the data is not sensitive, such as search queries. Because the data will be visible in the URL.
POST: Form data is sent in the body of the HTTP request, not in the URL. Therefore, POST should be used for sensitive items, such as passwords and personal details.
16. What is the difference between localStorage and sessionStorage?
Both localStorage and sessionStorage are used to store data in the browser as key-value pairs.
The only difference is persistence (how long the data will remain).
localStorage: The data you save in this storage remains even after closing the browser. This means the data will be available the next time you open the page.
sessionStorage: The data in this storage remains as long as the page or tab is open. As soon as the tab is closed, all the data is lost.
17. What is the purpose of the data-* attribute?
The data-* attribute is used to store custom data within an HTML element, intended for use by the page or application. It allows you to safely store data in HTML without creating non-standard attributes. This data can be accessed in JavaScript using the dataset property.
Example:
<div data-user-name="John"></div>
Here, the stored data can be retrieved in JavaScript using:
element.dataset.userName;
18. What is an iframe and when would you use it?
<iframe> is an HTML element that allows us to embed another HTML page within a page.
For example, if you want to display a YouTube video, Google Map, or an advertisement on your page, an <iframe> is used.
Example:
<iframe src="https://www.youtube.com/embed/video_id"></iframe>
But excessive use of iframes can slow down the page and, if used sparingly, can also pose a security risk.
19. What does the defer attribute do on a <script> tag?
The defer attribute tells the browser to continue parsing the HTML while downloading the script in the background. The script executes only after the HTML parser has finished. This attribute improves page load performance by preventing render-blocking JavaScript.
20. What is the difference between defer and async for scripts?
Defer and async are both used when you load an external JavaScript file into HTML. Both download the script in the background (parallel), but their run timing is different.
Defer: The script is downloaded in the background, but it is executed only when the entire HTML is parsed.
Async: This is also downloaded in the background, but as soon as the script is ready, it is executed immediately, even if HTML parsing is in progress. Async scripts can interrupt HTML parsing.
21. What is HTML character encoding?
Character encoding is a system that maps characters (letters, numbers, symbols) to numbers for digital representation, so that the computer can display those characters.
It is necessary to declare a character encoding for web pages so that text displays correctly.
The standard encoding in HTML5 is UTF-8, and is written as:
<meta charset="UTF-8">
22. What is the purpose of the <meta> tag?
The <meta> tag provides additional information (metadata) about an HTML page. It’s not visible on the page, but is used by browsers and search engines.
It can reveal:
- The page’s character set (e.g., UTF-8)
- The page’s description
- Keywords
- The author’s name
- And viewport settings for mobile viewing
For example:
<meta name="description" content="This page explains HTML basics.">
Search engines display this meta description in their search results.
23. What is image optimization?
Image optimization means reducing the size of an image without significantly compromising its quality. This makes the page load faster and the website run faster.
Some common tricks for this are:
- Using the correct file format, such as JPEG, PNG, or WebP.
- Compressing the image (reducing its size slightly).
- And using responsive images, such as using the
<picture>element or thesrcsetattribute, so that the image automatically adjusts to different devices.
Advanced HTML Questions
24. What is the HTML DOM?
HTML DOM stands for Document Object Model. It is a programming interface in which the browser converts an HTML page into a tree-like structure.
When the page loads, the browser converts each tag into an “object,” such as <div>, <p>, and <img>, each becoming a node in that tree.
JavaScript can then use these objects to change the page’s structure, style, or content without reloading the page.
25. What is the difference between a <div> and a DocumentFragment?
A <div> is an HTML element that is added directly to the DOM (page structure), and can also be styled with CSS.
But a DocumentFragment is a little different. It’s like a temporary container, created in memory but not visible on the page.
It’s used when you’re creating many elements at once with JavaScript. First, put all the elements into a fragment, then append the fragment to the DOM all at once.
This prevents the page from re-rendering repeatedly, and performance is faster.
And when you add a fragment to the DOM, only the elements within it are added, not the fragment itself.
26. What is the purpose of the srcset attribute in an <img> tag?
The srcset attribute’s function is to allow the browser to display different size or quality versions of the same image.
For example:
<img src="small.jpg"
srcset="medium.jpg 768w, large.jpg 1200w"
alt="Sample Image">
Here, the browser will determine which image to load based on the screen size or resolution.
This prevents unnecessary heavy images from being loaded, saves bandwidth, and makes the page load faster.
27. Can you describe the difference between em and rem units?
Both em and rem are relative units of size, primarily used to set font size, padding, or margins.
The difference is this:
emis based on the font size of its parent element.
For example, if the parent’s font size is 20px and the child’s font-size: 2em is written, it will become 40px.
rem(root em) always works based on the font size of the root element, i.e.<html>.
This means that no matter how deep the element is, if the <html>‘s font size is 16px and the child’s font-size: 2rem is written, it will become 32px.
This is why rem is more predictable, especially when creating responsive layouts, as it does not depend on the size of the parent.
28. What is ARIA and why is it important?
ARIA stands for Accessible Rich Internet Applications. These are special attributes added to HTML elements to make a website accessible to users who use screen readers or assistive tools.
Sometimes we use custom UI elements like <div> as buttons. But screen readers don’t recognize it as a “button.” That’s where ARIA comes in.
You might write:
<div role="button">Click Me</div>
This helps assistive technologies recognize that this is a button-like element.
29. What are Microdata and Microformats?
Microdata and Microformats are methods for adding structured, machine-readable data to a web page. This data helps search engines and other software better understand the content of the page.
By using these methods, you can add meaningful details, such as the author’s name in an article, the date of an event, or the rating of a product. Search engines use this structured data to generate “rich snippets” that display extra information like star ratings, prices, or event dates in search results.
30. What is the difference between <b> and <strong> tags?
<b> and <strong> both make text appear bold, but their semantics are different.
<strong> is used when you want to make something appear important.
For example:
<strong>Warning:</strong> Do not share your password.
And <b> is used only for style, when you just want to pay some attention to the text, but it is not very important.
For example:
<b>Keyword:</b> HTML Tags
31. What is the <canvas> element?
The <canvas> element provides a blank area on a web page where you can draw anything using JavaScript, such as graphics, charts, animations, or small games.
It’s a kind of “drawing board” within the browser. But it’s not a high-level thing; it works at the pixel level. This means you have to manually create every line, shape, or image using JavaScript.
32. What is SVG, and how is it different from Canvas?
SVG stands for Scalable Vector Graphics. It’s an XML-based format for creating 2D vector images.
Canvas is pixel-based, meaning the image quality is degraded (blurred) if scaled or enlarged.
SVG is vector-based, so no matter how much you zoom in, the image will remain clear.
That’s why SVG is perfect for logos, icons, and illustrations, which need to look sharp on every screen size.
33. What is the purpose of the <figure> and <figcaption> elements?
The <figure> tag wraps self-contained content, such as an image, diagram, chart, or code snippet. This content is related to the main text, but can be understood independently.
And <figcaption> provides a caption or description below the figure.
For example:
<figure>
<img src="sunset.jpg" alt="Sunset view" />
<figcaption>Beautiful sunset over the mountains</figcaption>
</figure>
Both together tell browsers and search engines that this image and this caption are part of the same set.
34. Explain what a shadow DOM is.
Shadow DOM is a web standard that allows developers to encapsulate the structure and style of their components.
This means that the HTML, CSS, and JavaScript written within a component remain separate from the rest of the page’s code. External CSS will not interfere with its styling, nor will its styling affect external elements.
This system was created to prevent code mix-ups in large web apps.
35. What are Web Components?
Web components are a technology that allows us to create our own HTML tags, such as <my-button> or <user-card>. These tags are reusable and carry their own style and logic without disturbing the rest of the page.
They are made up of three main parts:
- Custom Elements: For which you can define new HTML tags.
- Shadow DOM: For which an element creates a separate, private world within itself, so its CSS and structure don’t mix with the rest of the page.
- HTML Templates: For which you store a pre-compiled HTML layout that you can later use with JavaScript.
Web Components provide a modular, clean, and reusable way of web development without any external libraries.
