HTML
INTERVIEW
Q&A
BEGINNER LEVEL
1. What is HTML?
HTML (HyperText Markup Language) is the standard language used to
create and design the content of web pages.
It tells the web browser what to show on the screen — like text, images,
buttons, and links — and how to organize them.
2. What does HTML stand for?
HTML stands for HyperText Markup Language.
HyperText means text that links to other pages or websites.
Markup means using special tags to describe how the content should
look.
Language means a way to write instructions that the computer can
understand.
3. What are HTML tags?
HTML tags are special codes used to tell the browser what each part of a
web page is.
Tags usually come in pairs, like <p> to start a paragraph and </p> to end
it.
They are written between angle brackets (< >) and help structure and
format the content.
4. What is the structure of an HTML document?
A basic HTML document has the following structure:
<html> wraps the whole page.
<head> contains the page’s settings and title.
<body> holds the visible content like text, images, and links.
5. What is the <html> tag used for?
The <html> tag is the root element of an HTML document.
It tells the browser, “This is an HTML page,” and it wraps around all the
other HTML code on the page.
BEGINNER LEVEL
6. What does the <head> tag contain?
The <head> tag holds information about the page that is not shown on the
screen.
This includes:
The page title (<title>)
Links to stylesheets
Meta data (like the description of the page)
7. What is the purpose of the <body> tag?
The <body> tag contains all the content that appears on the screen — such
as:
Text
Images
Buttons
Videos
Forms
In short, everything the user sees and interacts with is inside the <body>.
8. What is the difference between <div> and <span>?
Both <div> and <span> are used to group parts of a webpage, but they
behave differently:
<div> is a block-level element — it takes up the whole width and starts on
a new line. It’s used for big sections.
<span> is an inline element — it stays inside a line with other text. It’s used
for small pieces of content.
9. How do you create a hyperlink in HTML?
You can create a link using the <a> tag (which stands for “anchor”).
Example:
href is the attribute that holds the link’s destination.
The text between the tags is what the user clicks on.
BEGINNER LEVEL
10. How do you insert an image in HTML?
Use the <img> tag to show an image on a web page.
Example:
src is the source of the image (file path or URL).
alt is the alternate text shown if the image doesn’t load — it’s also good
for accessibility.
11. What are void elements in HTML?
Void elements are tags that don’t need a closing tag.
They are self-contained and do not have any content inside.
Examples include:
<br> (line break)
<img> (image)
<hr> (horizontal line)
They work on their own like a one-word sentence!
12. What is the purpose of the <title> tag?
The <title> tag sets the name of the web page, which appears at the top
of the browser tab.
It also helps search engines understand what your page is about.
Example:
13. What is the use of the <br> tag?
The <br> tag means line break.
It moves the text to a new line — like when you press “Enter” on the
keyboard.
Example:
BEGINNER LEVEL
13. What is the use of the <br> tag?
Shows as:
14. How do you make a list in HTML?
You can make two types of lists:
Ordered list (numbered) using <ol>
Unordered list (bullets) using <ul>
Inside both, you use <li> for each item.
Example:
15. What is the difference between <ul>, <ol>, and <li>?
<ul> = Unordered list (bullets)
<ol> = Ordered list (numbers)
<li> = List item (each thing in the list)
They work together to make neat lists.
16. What are HTML attributes?
Attributes give extra information about an HTML element.
They go inside the opening tag.
Example:
src tells where the image is
alt describes the image
BEGINNER LEVEL
17. How do you create a table in HTML?
Tables are made using the <table> tag. You also use:
<tr> for table row
<td> for table data (cell)
<th> for table heading
Example:
18. How do you open a link in a new tab?
Use the target="_blank" attribute inside the <a> tag.
Example:
This tells the browser to open the link in a new tab.
19. What is the use of the alt attribute in <img>?
The alt attribute shows alternate text if the image doesn’t load.
It also helps people using screen readers know what the image is.
Example:
20. How do you add comments in HTML?
Comments are notes in your code that don’t show up on the web page.
They help you remember things or explain the code.
Syntax:
BEGINNER LEVEL
21. What is the difference between block-level and inline elements?
Block-level elements take up the full width of the page and always start on
a new line.
Examples: <div>, <p>, <h1>
Inline elements only take up as much space as needed and stay in the
same line as other elements.
Examples: <span>, <a>, <img>
Think of block elements as full-size boxes, and inline ones as small stickers
inside a sentence.
22. What is the purpose of the id attribute?
The id attribute gives an element a unique name.
It’s used when you want to style, find, or control that one specific
element.
Example:
Only one element can have that exact id on the page
23. How is the class attribute used?
The class attribute is used to group multiple elements together with the
same name.
This is helpful for applying the same style or behavior to many elements.
Example:
Now both <p> tags can be styled the same using CSS.
24. What is semantic HTML?
Semantic HTML uses tags that have meaning, so both people and
computers understand the structure of the content.
Examples:
<header> – for the top section
<footer> – for the bottom section
<article> – for a blog or post
Instead of just using <div> everywhere, semantic tags describe what the
content is.
BEGINNER LEVEL
25. What is the <form> tag used for?
The <form> tag is used to collect user input.
For example, it helps build things like:
Contact forms
Login forms
Signup pages
It holds all the input fields, buttons, and labels.
26. What are the input types in HTML?
HTML has different types of <input> elements for different kinds of user
input:
text – for typing text
password – for secret text
email – for email addresses
checkbox – for multiple choice
radio – for one choice
submit – for sending the form
file – for uploading files
number – for numbers only
Each one is used based on what kind of data you need.
27. What is the <label> tag used for?
The <label> tag is used to give a name to an input field, so the user knows
what to type.
Example:
It also makes clicking on the label focus the input box — helpful for
accessibility.
28. What is the difference between <input type="text"> and <textarea>?
<input type="text"> is used for short, single-line text.
<textarea> is used for long, multi-line text, like a message or comment.
BEGINNER LEVEL
28. What is the difference between <input type="text"> and <textarea>?
Example:
Use <textarea> when the user needs more space to write.
29. How do you create a checkbox in HTML?
You can use <input type="checkbox"> to let users select one or more options.
Example:
Checkboxes are great for selecting multiple items like "I agree to terms" or
favorite colors.
30. How do you create radio buttons?
Radio buttons are made with <input type="radio">.
They let users choose only one option from a group.
Example:
All buttons with the same name are connected — so only one can be
selected at a time.
BEGINNER LEVEL
31. What is the purpose of the <select> tag?
The <select> tag is used to create a drop-down menu.
It lets users choose one (or sometimes more) options from a list.
Example:
32. What is the <option> tag used for?
The <option> tag is used inside a <select> tag to show the different choices
in the drop-down menu.
Each <option> is one item in the list.
Example:
33. What are meta tags?
Meta tags go inside the <head> of an HTML page and give extra
information about the page — like its description, author, or keywords.
They help search engines understand the page better.
Example:
34. How do you include a favicon in HTML?
A favicon is the small icon that shows in the browser tab next to the page
title.
You add it using a <link> tag in the <head> section.
Example:
BEGINNER LEVEL
35. What is the role of the action attribute in a form?
The action attribute tells the browser where to send the form data when
the user clicks “Submit.”
Example:
If action is left empty, the form submits to the same page.
36. What is the difference between GET and POST in forms?
GET sends the form data in the URL (visible). Best for simple searches.
POST sends the data securely in the background. Best for login or
passwords.
Example:
Use POST when sending private information.
37. What is the <fieldset> and <legend> used for?
<fieldset> is used to group related form fields together with a box around
them.
<legend> gives the group a title.
Example:
38. What is the use of the <iframe> tag?
An <iframe> is used to embed another webpage inside your webpage.
It’s like putting one website inside a small window on another site.
Example:
BEGINNER LEVEL
39. What is the purpose of the <nav> tag?
The <nav> tag is used to hold navigation links.
It shows the part of the page that helps people move around — like a
menu or navbar.
Example:
40. What is the use of the <footer> and <header> tags?
<header> is used for the top section of a page — like the logo or site name.
<footer> is used for the bottom section — like contact info or copyright.
They help organize the page semantically (with meaning).
Example:
INTERMEDIATE LEVEL
41. What is the DOM in HTML?
The DOM (Document Object Model) is like a family tree for your HTML
page.
It turns everything (tags, text, etc.) into boxes or objects that browsers can
understand and change using JavaScript.
You can think of it like Lego blocks — each part of the page is a piece that
can be moved, edited, or deleted.
42. What are HTML5 semantic elements?
Semantic elements in HTML5 are special tags that have meaning — they
tell us what the content is, not just how it looks.
Examples:
<header> = top part of a page
<footer> = bottom part
<nav> = navigation links
<article>, <section>, <main> = content areas
They help search engines and developers understand the structure better.
43. What is the difference between HTML and HTML5?
HTML is the older version.
HTML5 is the newer version with more features,
like:
Built-in audio/video
New tags like <main>, <section>, <article>
Better mobile support
HTML5 is faster, smarter, and easier for modern web development.
44. What is the <article> tag used for?
The <article> tag is used to hold independent content,
like:
A blog post
A news story
A forum post
It means the content can stand alone and make sense by itself.
Example:
INTERMEDIATE LEVEL
45. What is the <section> tag used for?
The <section> tag is used to group related content on a page.
It’s like dividing a book into chapters. Each section has a theme or topic.
Example:
46. What is the <aside> tag used for?
The <aside> tag is used for side information — like a sidebar, tips, or ads
that relate to the main content but aren't the main story.
Example:
47. What is the purpose of the <main> tag?
The <main> tag holds the main content of the page.
It shows what the page is really about — not the header, footer, or menu.
Example:
48. How do you embed audio and video in HTML?
To add audio or video, use the <audio> or <video> tags with the src
attribute and controls.
Example for audio:
INTERMEDIATE LEVEL
48. How do you embed audio and video in HTML?
Example for audio:
49. What is the use of the <canvas> element?
The <canvas> tag is used to draw things on the page — like shapes,
graphs, games, or animations — using JavaScript.
It’s like a blank drawing board in your browser.
Example:
50. How does the <svg> element differ from <canvas>?
<svg> is for drawing shapes with code using XML. The shapes stay sharp
and editable.
<canvas> is for drawing with JavaScript. It’s more like a painting — once
drawn, you can’t easily change parts.
Use <svg> for icons and charts.
Use <canvas> for games and complex drawings.
51. What are custom data attributes in HTML5?
Custom data attributes let you store extra information in HTML elements
using data-* format.
Example:
You can later access these values using JavaScript.
They're useful when you want to pass small bits of custom data without
affecting the layout.
INTERMEDIATE LEVEL
52. How do you create a responsive image in HTML?
To make an image responsive, use the width="100%" in CSS or add a class.
Example:
This way, the image resizes itself to fit the screen, whether it's on a mobile
or desktop.
53. What is lazy loading in HTML?
Lazy loading means images or content load only when needed — like
when the user scrolls near them.
Add loading="lazy" to your <img> tag:
It helps your page load faster and saves data.
54. What is the autocomplete attribute in forms?
The autocomplete attribute lets the browser remember and suggest
values the user typed before.
Example:
You can turn it on or off. It’s useful for login or checkout forms.
55. What is the purpose of the required attribute?
The required attribute makes sure the user must fill in the field before
submitting the form.
Example:
If it's left empty, the browser will show a warning.
INTERMEDIATE LEVEL
56. What is the difference between disabled and readonly?
Attribute Can Edit? Submits Value? Grayed Out?
readonly ❌ No ✅ Yes ❌ No
disabled ❌ No ❌ No ✅ Yes
Use readonly when you want to show a value that can't be edited but still
submitted.
Use disabled when you don’t want it submitted or used at all.
57. What is the purpose of the placeholder attribute?
placeholder shows light gray text inside an input box to guide the user
about what to type.
Example:
It disappears when the user starts typing.
58. What is the pattern attribute in HTML input?
The pattern attribute lets you set a specific format using a regular
expression.
Example (for 5-digit ZIP code):
If the user enters something else, the browser shows an error message.
59. What is the novalidate attribute in forms?
If you add novalidate to a <form>, the browser won’t check for errors
before submitting.
Example:
Use it when you want to handle validation yourself with JavaScript.
INTERMEDIATE LEVEL
60. What are global attributes in HTML?
Global attributes are the ones you can use on any HTML tag.
Some examples:
id
class
style
title
hidden
data-*
These help you style, identify, or interact with elements more easily.
61. What is the contenteditable attribute?
The contenteditable attribute makes any HTML element editable by the
user.
Example:
It’s useful when you want users to type directly on your web page.
62. What is the draggable attribute?
The draggable attribute lets you move elements around using drag and
drop.
Example:
You can later use JavaScript to handle what happens when it's dragged.
63. What is the hidden attribute?
The hidden attribute hides the element from the page — it’s there in the
code, but users can’t see it.
Example:
You can show it later using JavaScript.
INTERMEDIATE LEVEL
64. What is the difference between <b> and <strong>?
Tag Appearance Meaning (Semantics)
<b> Makes text bold Just visual – no meaning
<strong> Makes text bold Shows importance
So, use <strong> when you want to show something important.
65. What is the difference between <i> and <em>?
Tag Appearance Meaning (Semantics)
<i> Italic text Just visual style
<em> Italic text Shows emphasis
Use <em> to stress a word in a sentence.
66. How do you create a tooltip in HTML?
You can use the title attribute. When you hover over the element, a small
box (tooltip) appears.
Example:
The text inside title shows as a tooltip.
67. What is the target attribute used for?
The target attribute tells the browser where to open the link.
Example:
Common values:
_self – same tab (default)
_blank – new tab
INTERMEDIATE LEVEL
68. How do you link CSS to HTML?
You link CSS using the <link> tag inside the <head> section.
Example:
This connects your HTML to an external stylesheet.
69. What is the difference between inline, internal, and external CSS?
Type Where It's Written Use Case
Inline Inside the tag using style For quick styling
Internal Inside <style> in <head> For one page only
External In a separate .css file For multiple pages
Example:
70. What are deprecated tags in HTML5?
Deprecated tags are old HTML tags that should not be used anymore
because better options exist.
Examples:
<font> → use CSS instead
<center> → use CSS text-align: center
<big>, <strike>, <u> → use modern styles
These tags still work in browsers but are not recommended.
INTERMEDIATE LEVEL
71. What is the <noscript> tag used for?
The <noscript> tag is used to show a message or content only when
JavaScript is turned off in the browser.
Example:
It’s a backup message for users who can’t run JavaScript.
72. What is the purpose of the <base> tag?
The <base> tag sets a default URL for all relative links and images on the
page.
Example:
If you have a link like <a href="about.html">, it will go to
https://example.com/about.html.
73. What is the rel attribute in <link>?
The rel attribute describes the relationship between the current HTML file
and the linked file.
Example:
In this case, it tells the browser, "This file is a stylesheet for this page."
74. What is the difference between synchronous and asynchronous script
loading?
Type Description
Synchronous Scripts load one at a time, stopping other tasks.
Asynchronous Scripts load in the background without stopping the page.
Asynchronous loading is faster and better for user experience.
INTERMEDIATE LEVEL
75. What is the srcset attribute used for in <img>?
The srcset attribute lets the browser choose the best image size based on
the screen size or resolution.
Example:
This helps make your website responsive and faster on all devices.
76. What are ARIA roles in HTML?
ARIA (Accessible Rich Internet Applications) roles help screen readers and
assistive tools understand what an element does.
Example:
It improves web accessibility for people with disabilities.
77. How do you create a progress bar in HTML?
Use the <progress> tag.
Example:
This creates a progress bar that's 60% complete.
78. How do you use the <meter> tag?
The <meter> tag shows a value within a known range, like speed or
temperature.
Example:
It’s for measurement, not progress.
INTERMEDIATE LEVEL
79. How do you specify language in HTML?
You use the lang attribute in the <html> tag.
Example:
This tells the browser (and search engines) the page is in English.
80. What is the lang attribute used for?
The lang attribute helps browsers, screen readers, and translators know
the language of the text.
For example:
lang="en" – English
lang="hi" – Hindi
lang="gu" – Gujarati
It improves accessibility and SEO.
ADVANCED LEVEL
81. What are microdata and how are they used in HTML?
Microdata is a way to add extra information to your HTML that helps
search engines better understand your content.
Example (adding product info):
Why it matters: It improves search engine results (like rich snippets with
prices, reviews, etc.).
82. What is the Shadow DOM and how is it related to HTML?
Shadow DOM is a special hidden part of the DOM. It lets developers create
components (like buttons or cards) with their own private HTML and CSS,
so it doesn't mess up the rest of the page.
Why it's useful: It keeps the component's code isolated and reusable.
Example (in JavaScript):
83. How do Web Components work in HTML?
Web Components are a set of technologies (including Shadow DOM) that
let you create custom, reusable HTML elements.
Example:
You define how it behaves using JavaScript, and it works like any other
HTML tag.
Web Components include:
Custom Elements
Shadow DOM
HTML Templates
ADVANCED LEVEL
84. What is the purpose of the <template> tag?
The <template> tag holds HTML that won’t show up when the page loads
but can be used later with JavaScript.
Example:
Used to clone or insert elements dynamically.
85. What is the use of the <slot> element?
The <slot> element is used inside a Web Component to mark a spot where
outside content will go.
Example:
Inside the component:
It helps build flexible and customizable components.
86. What is the Accessibility Tree in HTML?
The Accessibility Tree is what screen readers and assistive tools use to
understand your web page.
It’s built from:
HTML structure
ARIA roles
Element attributes like alt, label, role
✅ Making your HTML clear and semantic helps people with disabilities
access your site.
ADVANCED LEVEL
87. What are differences between HTML5 APIs like Web Storage,
Geolocation, and Web Workers?
API Purpose
Web Storage Store data in the browser (localStorage/sessionStorage)
Geolocation Get user’s location (latitude & longitude)
Web Workers Run JavaScript in the background for faster apps
These APIs make HTML more powerful and interactive.
88. How does <script defer> differ from <script async>?
Attribute Behavior
defer Loads script in background, waits to run it after HTML is loaded
async Loads and runs script as soon as it's ready, may interrupt HTML
Use defer for scripts that depend on the page structure.
89. What is the purpose of the srcdoc attribute in <iframe>?
The srcdoc attribute lets you write HTML directly inside an <iframe>.
Example:
It's useful for showing small snippets or demos without loading another
page.
90. What is CORS and how does it relate to HTML?
CORS stands for Cross-Origin Resource Sharing. It controls which websites
are allowed to use data from another domain.
Example: Your HTML page on example.com tries to load data from
api.othersite.com. If that site doesn't allow it, you'll get a CORS error.
Browsers use CORS to protect users and data.
ADVANCED LEVEL
91. What are Service Workers and how do they relate to HTML?
A Service Worker is a script that runs in the background of your website. It
helps with features like:
Offline support
Faster loading (by caching files)
Push notifications
Though not written in HTML, they work with HTML pages to make them more
powerful and app-like.
92. What is the manifest file and how is it linked in HTML?
The manifest file is a JSON file that tells the browser how your web app
should behave when installed on a phone or desktop.
It includes:
App name
Icons
Theme colors
You link it in HTML like this:
It makes your website feel more like a real mobile app (PWA).
93. How does the <picture> tag work?
The <picture> tag lets you show different images based on screen size or
device type.
Example:
Great for responsive images, improving performance and design on all
devices.
ADVANCED LEVEL
94. How do you optimize HTML for SEO?
SEO (Search Engine Optimization) helps your site rank higher on Google.
To optimize your HTML:
Use semantic tags (<article>, <header>, etc.)
Add proper titles and meta descriptions
Use alt text on images
Structure content with headings (<h1>, <h2>)
Good HTML structure makes your website easier to find online.
95. What are the security concerns in HTML?
While HTML itself is not dangerous, security issues can arise from:
Untrusted scripts (JavaScript)
Form misuse (like stealing login data)
Embedding malicious content
HTML needs to be used carefully with secure coding practices.
96. How do you prevent XSS in HTML forms?
XSS (Cross-Site Scripting) is when attackers put harmful scripts into your
forms.
To prevent it:
Validate and sanitize user input
Use HTML escaping (<, >, ", etc.)
Don’t insert raw input into HTML/JS
Always treat user input as untrusted.
97. What is the difference between XHTML and HTML5?
Feature XHTML HTML5
Syntax strict Yes (must be perfect) No (more forgiving)
Tags closed Must be closed (<br />) Not always required
Based on XML HTML
HTML5 is newer, more flexible, and widely used today.
ADVANCED LEVEL
98. How do you validate an HTML document?
You can use online tools like the W3C Validator to check your HTML code.
It helps you find:
Missing tags
Errors in syntax
Accessibility issues
Validating your code makes it cleaner and more reliable.
99. What are the limitations of HTML?
HTML is great for structure but has limits:
Can’t add logic (like conditions or loops)
Can’t store or process data
Can’t style pages (that’s CSS)
Can’t create interactions (that’s JavaScript)
It needs CSS and JavaScript to build full websites.
100. How does HTML interact with CSS and JavaScript in modern web
development?
HTML works as the structure of a webpage.
CSS makes it look good (colors, fonts, layouts)
JavaScript makes it interactive (clicks, animations, data handling)
Together, they form the foundation of modern websites.
HTML5 is newer, more flexible, and widely used today.
Was this post helpful ?
Follow Our 2nd Account
Follow For More
Tap Here
