HTML Interview Questions and Answers for Freshers
Basic HTML Questions
1. What is HTML?
2. What are the different versions of HTML?
3. What is the latest version of HTML?
4. What are HTML tags?
5. What is the difference between HTML and HTML5?
6. How do you structure a basic HTML page?
7. What are attributes in HTML?
8. What is the difference between an element and a tag in HTML?
9. What is the purpose of the <head> tag in HTML?
[Link] are empty elements in HTML? Can you give some examples?
[Link] is the difference between block-level and inline elements?
[Link] are semantic elements in HTML? Give examples.
[Link] is the use of the <meta> tag in HTML?
[Link] is the difference between <strong> and <b> tags?
[Link] is the difference between <em> and <i> tags?
[Link] are self-closing tags?
[Link] is the difference between <div> and <span>?
[Link] is the difference between <ol>, <ul>, and <dl>?
[Link] do you create a hyperlink in HTML?
[Link] is the difference between absolute and relative URLs?
[Link] is the use of the title attribute in HTML?
[Link] is the use of the alt attribute in an <img> tag?
[Link] is the difference between <section> and <article> tags?
[Link] is the <nav> tag used for?
[Link] is the difference between <header> and <footer>?
[Link] is the <aside> tag used for?
[Link] are global attributes in HTML?
[Link] is the difference between the <iframe> and <frame> elements?
[Link] is the <figure> and <figcaption> tag used for?
[Link] do you comment out code in HTML?
[Link] are HTML entities? Give some examples.
[Link] do you create an HTML table?
[Link] are the different table tags in HTML?
[Link] is the purpose of the colspan and rowspan attributes?
[Link] is the difference between thead, tbody, and tfoot?
[Link] is the <form> tag used for?
[Link] are the different types of form input fields in HTML?
[Link] is the difference between GET and POST methods in forms?
[Link] is the placeholder attribute in an input field?
[Link] is the difference between name and id attributes in an input field?
[Link] is the use of the disabled attribute in form elements?
[Link] is the required attribute in form elements?
[Link] is the readonly attribute?
[Link] do you create a dropdown list in HTML?
[Link] is the difference between <button> and <input type="submit">?
[Link] do you create a multi-line text input field in HTML?
[Link] is the <fieldset> and <legend> tag used for?
[Link] is the <datalist> tag used for?
[Link] do you create a file upload input field in HTML?
[Link] is the difference between the <label> and <legend> tags?
Intermediate HTML Questions
[Link] is the autocomplete attribute in forms?
[Link] do you create a progress bar in HTML?
[Link] is the <output> tag in HTML forms?
[Link] is the pattern attribute in an input field?
[Link] do you create an audio player in HTML?
[Link] do you embed a video in an HTML page?
[Link] is the <source> tag used for in <audio> and <video> elements?
[Link] is the purpose of the controls, autoplay, and loop attributes in media
elements?
[Link] is the <track> tag used for in the <video> element?
[Link] is the poster attribute in the <video> tag?
[Link] do you embed a YouTube video in HTML?
[Link] is the difference between <noscript> and <script> tags?
[Link] is the use of the <canvas> tag?
[Link] is the <svg> tag used for?
[Link] are vector graphics and how do <svg> and <canvas> differ?
[Link] is the data-* attribute in HTML?
[Link] do you use aria- attributes in HTML?
[Link] is the difference between src and href attributes?
[Link] is the download attribute in the <a> tag?
[Link] do you specify multiple image sources for different screen
resolutions?
[Link] is the srcset and sizes attribute in an <img> tag?
[Link] is the difference between defer and async in the <script> tag?
[Link] is the purpose of the rel attribute in a <link> tag?
[Link] is a favicon and how do you add it to an HTML page?
[Link] do you make a website mobile-friendly using HTML?
[Link] are responsive images and how do you implement them in HTML?
[Link] do you optimize images for faster loading in HTML?
[Link] is lazy loading in HTML?
[Link] are web components in HTML?
[Link] is shadow DOM in HTML?
[Link] do you create a modal popup in HTML?
[Link] are microdata and [Link] in HTML?
[Link] do you use <template> in HTML?
[Link] is the difference between an iframe and an embed tag?
[Link] are service workers and how do they relate to HTML?
Advanced HTML Questions
[Link] do you improve HTML page performance?
[Link] is progressive enhancement in web development?
[Link] is graceful degradation in web development?
[Link] is the difference between cookies, session storage, and local
storage?
[Link] is the <base> tag used for?
[Link] is content security policy (CSP) in HTML?
[Link] is the importance of accessibility (a11y) in HTML?
[Link] do you make an HTML page accessible to screen readers?
[Link] is the role of semantic HTML in SEO?
[Link] are canonical tags and why are they important?
[Link] do you prevent an HTML form from being submitted multiple
times?
[Link] do you implement a custom tooltip in HTML?
[Link] are meta viewport settings in HTML?
[Link] is AMP (Accelerated Mobile Pages) in HTML?
100. What is the importance of structured data in HTML?
1. What is HTML?
Sure! HTML stands for HyperText Markup Language. It’s used to structure web pages by
defining elements like headings, paragraphs, images, and links. Every webpage we see is
built using HTML, which acts as the skeleton of the website.
2. What are the different versions of HTML?
HTML has evolved over the years. The main versions are:
• HTML 1.0 (1993) – The first version.
• HTML 2.0 (1995) – Improved standards.
• HTML 3.2 (1997) – More formatting features.
• HTML 4.01 (1999) – Introduced CSS support.
• XHTML (2000) – A stricter version of HTML.
• HTML5 (2014) – The latest, with multimedia and semantic elements.
3. What is the latest version of HTML?
The latest version is HTML5. Iantt brings improvements like semic elements (<article>,
<section>), better multimedia handling (<audio>, <video>), and local storage APIs
for better offline support.
4. What are HTML tags?
HTML tags are used to define elements. They are enclosed in angle brackets (<>). For
example, <p> is a paragraph tag. Tags usually come in pairs like <p>...</p>, where the
first is an opening tag and the second is a closing tag.
5. What is the difference between HTML and HTML5?
HTML5 is a major upgrade over HTML4. It introduced semantic elements like <header>,
<footer>, and <nav>, provided built-in support for audio and video, and eliminated the
need for third-party plugins like Flash.
6. How do you structure a basic HTML page?
A basic HTML page follows this structure:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
This starts with <!DOCTYPE html> to define the document type, followed by <html>,
which contains the <head> (metadata) and <body> (visible content).
7. What are attributes in HTML?
Attributes provide additional information about an element. For example:
<a href="[Link]
Here, href is an attribute that specifies the link’s destination.
8. What is the difference between an element and a tag in HTML?
A tag is just the name of the element inside angle brackets (<p>, <div>), while an element
includes the start tag, content, and end tag (<p>Hello</p>).
9. What is the purpose of the <head> tag in HTML?
The <head> tag contains metadata like the title, character encoding, linked stylesheets, and
scripts. It doesn’t directly display content on the webpage.
10. What are empty elements in HTML?
Empty elements are self-closing and don’t have a closing tag. Examples include:
• <br> (line break)
• <img> (image)
• <hr> (horizontal line)
11. What is the difference between block-level and inline elements?
• Block-level elements take up the full width (e.g., <div>, <p>, <h1>).
• Inline elements stay within the flow of text (e.g., <span>, <a>, <strong>).
12. What are semantic elements in HTML? Give examples.
Semantic elements provide meaning to the structure. Examples:
• <article> – Represents an independent content block.
• <section> – Groups related content.
• <header> – Defines the top section of a page.
• <footer> – Defines the bottom section.
13. What is the use of the <meta> tag in HTML?
The <meta> tag provides metadata like character encoding, description, and viewport
settings. For example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
This helps in SEO and responsive design.
14. What is the difference between <strong> and <b> tags?
• <strong> gives bold text with importance, helping SEO and screen readers.
• <b> just makes text bold without added meaning.
15. What is the difference between <em> and <i> tags?
• <em> means emphasis, useful for accessibility.
• <i> simply makes text italic.
16. What are self-closing tags?
Self-closing tags don’t require an end tag. Examples:
• <img> – Inserts an image.
• <br> – Adds a line break.
• <hr> – Inserts a horizontal line.
17. What is the difference between <div> and <span>?
• <div> is a block-level container.
• <span> is an inline container.
18. What is the difference between <ol>, <ul>, and <dl>?
• <ol> creates an ordered list (numbered items).
• <ul> creates an unordered list (bullets).
• <dl> is a definition list with <dt> (term) and <dd> (definition).
19. How do you create a hyperlink in HTML?
<a href="[Link] Here</a>
20. What is the difference between absolute and relative URLs?
• Absolute URL: Includes full path
([Link]
• Relative URL: Uses a path relative to the current document (/[Link]).
21. What is the use of the title attribute in HTML?
It shows a tooltip when hovering over an element:
<p title="Hello">Hover over me</p>
22. What is the use of the alt attribute in an <img> tag?
It provides alternative text for images (useful for SEO and screen readers):
<img src="[Link]" alt="Description of image">
Can an HTML element have multiple id attributes?
Answer:
No, an HTML element can have only one unique id. However, multiple elements can
share the same class for styling or JavaScript selection.
Can a <div> be placed inside a <span>?
Answer:
No, a <div> is a block-level element, while <span> is inline. Placing a <div> inside a
<span> can break the document structure and cause styling issues.
Can a <form> be nested inside another <form>?
Answer:
No, HTML does not allow nested <form> elements. However, you can use <fieldset> to
group inputs within a form.
What is the difference between defer and async attributes in <script>?
Answer:
• async: The script loads asynchronously while the HTML is being parsed,
executing as soon as it loads.
• defer: The script loads in parallel but executes after HTML parsing is
complete.
Example:
<script src="[Link]" async></script> <!-- Executes as soon as ready -->
<script src="[Link]" defer></script> <!-- Waits until HTML is fully loaded -->
Can a <form> be nested inside another <form>?
Answer:
No, HTML does not allow nested <form> elements. However, you can use <fieldset> to
group inputs within a form.
What happens if you put multiple <body> tags in an HTML document?
Answer:
Browsers ignore the additional <body> tags and only consider the first one, but it is
considered invalid HTML.
opening links in a new tab (target="_blank").<a
href="[Link] target="_blank" rel="noopener
noreferrer">Visit</a>
1. What is the difference between relative, absolute, fixed, and sticky
positioning?
Answer:
• Relative: The element moves relative to its original position.
• Absolute: The element moves relative to the nearest positioned
ancestor (if no ancestor, then <html>).
• Fixed: The element stays fixed relative to the viewport, even when
scrolling.
• Sticky: Acts like relative until a certain scroll position, then becomes
fixed.
Example:
css
CopyEdit
.positioned {
position: absolute; /* Moves relative to its parent */
top: 20px;
left: 30px;
}
2. What is the difference between em, rem, %, and px?
Answer:
• px (Pixels): Fixed unit, does not change.
• em: Relative to the parent element’s font size.
• rem: Relative to the root (html) element’s font size.
• %: Relative to the parent element’s size.
Example:
css
CopyEdit
html { font-size: 16px; }
.container { font-size: 2em; } /* 32px */
3. What is the difference between visibility: hidden; and display: none;?
Answer:
• visibility: hidden; → The element is invisible but still takes up space.
• display: none; → The element is removed from the layout, so it does
not take up space.
Example:
css
CopyEdit
.hidden { visibility: hidden; }
.removed { display: none; }
4. How is inline, block, and inline-block different?
Answer:
• inline → Elements flow in a line and cannot have width or height
(e.g., <span>).
• block → Takes full width and forces a new line (e.g., <div>).
• inline-block → Like inline, but can have width & height.
Example:
css
CopyEdit
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; width: 100px; height: 50px; }
5. How can you create a CSS grid layout?
Answer:
Use display: grid and define rows/columns:
css
CopyEdit
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns */
grid-gap: 10px;
}
Intermediate CSS Questions
6. How can you center a div horizontally and vertically?
Answer:
Using Flexbox:
css
CopyEdit
.container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh;
}
Using Grid:
css
CopyEdit
.container {
display: grid;
place-items: center;
height: 100vh;
}
Using margin: auto (only for block elements with fixed width):
css
CopyEdit
.center {
width: 200px;
margin: auto;
}
7. What is the difference between nth-child() and nth-of-type()?
Answer:
• nth-child(n) → Selects the nth child of a parent, regardless of type.
• nth-of-type(n) → Selects the nth child of a specific tag type.
Example:
css
CopyEdit
p:nth-child(2) { color: red; } /* Second child of any type */
p:nth-of-type(2) { color: blue; } /* Second `<p>` */
8. What is the difference between min-width, max-width, and width?
Answer:
• width → Sets a fixed width.
• min-width → Ensures the element does not shrink below this value.
• max-width → Ensures the element does not grow beyond this value.
Example:
css
CopyEdit
.box {
min-width: 200px;
max-width: 500px;
width: 50%;
}
9. What are pseudo-elements and pseudo-classes?
Answer:
• Pseudo-classes (:) → Select elements based on state (:hover, :nth-
child()).
• Pseudo-elements (::) → Style specific parts (::before, ::after).
Example:
css
CopyEdit
a:hover { color: red; } /* Pseudo-class */
p::first-letter { font-size: 24px; } /* Pseudo-element */
10. What is the difference between absolute and relative units in CSS?
Answer:
• Absolute units → Fixed (e.g., px, cm).
• Relative units → Depend on other elements (e.g., %, em, vw).
Example:
css
CopyEdit
.relative { font-size: 2em; } /* Twice the parent size */
.absolute { width: 300px; } /* Fixed width */
Advanced CSS Questions
11. What is the difference between rem and vh/vw?
Answer:
• rem → Based on the root font size.
• vh / vw → Based on viewport height/width (100vh = full height).
Example:
css
CopyEdit
.full-height { height: 100vh; } /* Full screen */
12. What is the difference between clip-path and mask?
Answer:
• clip-path → Hides parts of an element outside a defined shape.
• mask → Uses transparency to create complex shapes.
Example:
css
CopyEdit
.clip {
clip-path: circle(50% at center);
}
13. How does the z-index property work?
Answer:
Elements with a higher z-index value appear in front. Only works on
elements with position: relative/absolute/fixed.
Example:
css
CopyEdit
.box1 { position: absolute; z-index: 1; }
.box2 { position: absolute; z-index: 2; } /* Appears above box1 */
14. How can you create a responsive design using CSS?
Answer:
• Media Queries:
css
CopyEdit
@media (max-width: 600px) {
body { background-color: lightgray; }
}
• Flexbox/Grid for layout.
• vw/vh/rem for scalable units.
