HTML INTERVIEW QUESTIONS
1. What is HTML?
Answer: HTML stands for HyperText Markup Language. It is the standard language used to create and
structure content on the web. HTML provides the basic framework of a web page using a system of
tags and attributes. These tags tell the browser how to display text, images, links, and other media.
HTML is not a programming language; it's a markup language that defines the structure and layout of
web content.
Key features:
Platform-independent
Supported by all browsers
Easy to learn and implement
Works with CSS and JavaScript for styling and interactivity
2) . What are semantic HTML elements?
Answer: Semantic HTML elements clearly describe their meaning in a human- and machine-readable
way. For example:
<article>: represents an independent piece of content.
<section>: groups related content.
<header>: represents introductory content or navigational links.
<footer>: represents a footer for its nearest sectioning content.
<aside>: represents content that is tangentially related.
3) .What is the difference between block, inline, and inline-block elements?
Answer:
PropertyBlock Block Inline Inline-block
1)Layout Starts on a new line Stays in flow (same Stays in flow but allows
line) width/height
2)Width/height Respects both Cannot set Can set both
3)example <div>, <p>, <h1> <span>, <a>, <img> <button>, <input>
Use inline-block when you want inline elements that behave like blocks (e.g., buttons in a row).
5. What are data- attributes in HTML?*
Answer: data-* attributes are custom attributes used to store extra information on HTML elements
that don’t affect the layout or display. They are useful for storing data for JavaScript use.
Example:
<button data-user-id="123">Click</button>
You can access it via JavaScript:
const btn = document.querySelector("button");
console.log(btn.dataset.userId); // 123
Use cases:
Storing IDs, categories, or metadata
Passing info from backend to frontend
Light-weight alternatives to hidden inputs
6. What is the purpose of the alt attribute in <img> tags?
Answer: The alt attribute provides alternative text for an image if it fails to load or for users with
screen readers.
Benefits:
Improves accessibility
Aids SEO
Displays text if image cannot be loaded
Example:
<img src="logo.png" alt="Company Logo">
7. What is the difference between id and class attributes?
Answer:
Attribute Id Class
Shared styling/behavior across multiple
Usage Unique element identifier
elements
Selector #id .class
Can only be used once per
Reuse Can be used multiple times
page
7. What are void (self-closing) elements in HTML?
Answer: Void elements are HTML tags that do not have a closing tag because they do not contain any
content.
Examples:
<br> – line break
<img> – image
<input> – form field
<hr> – horizontal rule
<meta> – metadata
Correct usage:
<img src="logo.png" alt="Company Logo">
In HTML5, it's fine to omit the slash (<br> instead of <br />), unlike XHTML.
8. What is the use of the <meta> tag in HTML?
Answer: The <meta> tag provides metadata about the HTML document. It is placed inside the <head>
section and is used for:
Character encoding
Page description
Keywords (for SEO)
Viewport settings (for responsive design)
Examples:
<meta charset="UTF-8">
<meta name="description" content="Web dev tutorial">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9). What is the difference between <script>, <noscript>, and <style>?
Answer:
Tag Purpose
<script> Embeds JavaScript or links to an external JS file
<noscript> Displays fallback content if JavaScript is disabled in the browser
<style> Embeds internal CSS in the HTML document
Examples:
<script src="main.js"></script>
<noscript>Your browser does not support JavaScript.</noscript>
<style>body { background: #f0f0f0; }</style>
10 ) HTML5 Input Types
HTML5 introduced new input types that improve user experience and provide better semantic
meaning and built-in validation.
Input
Description Example
Type
text Single-line text input <input type="text">
Requires a valid email
email <input type="email">
format
Numeric input with <input type="number"
number
min/max options min="1">
Slider control for numeric <input type="range" min="1"
range
input max="5">
date Calendar date selector <input type="date">
time Time picker <input type="time">
color Color picker <input type="color">
tel Telephone number input <input type="tel">
url Must be a valid URL format <input type="url">
search Styled for search fields <input type="search">
file File upload <input type="file">
11) GET vs POST Method in Forms
Feature GET POST
Data Appended to URL as
Sent in the request body
Location query string
Visible in URL (not Not visible in URL (more
Visibility
secure) secure)
Data Limited (usually 2048 No size limit (depends on
Length characters) server)
Caching Can be cached Not cached
Retrieving data (searches, Submitting data (login,
Use Case
filters) forms, uploads)
Example:
<form method="get" action="/search">
<input name="q" type="text">
</form>
<form method="post" action="/submit">
<input name="username" type="text">
</form>
12) What is Form Validation in HTML?
HTML provides client-side form validation using built-in input types and attributes:
Required fields: required
Pattern matching: pattern="[A-Za-z]{3,}"
Type validation: type="email", type="url"
Length constraints: minlength, maxlength
Numeric limits: min, max, step
Example:
<input type="email" required>
<input type="text" pattern="\d{3}-\d{2}-\d{4}">
The browser automatically prevents submission if these constraints aren't met.
12) Difference between required, readonly, and disabled Attributes
Sent
Attribut Editabl User
Description with
e e Interaction
Form
Field must be filled before
required ✅ ✅ ✅
form can be submitted
Field is visible but cannot
readonly ❌ ✅ ✅ (selectable)
be edited
Field is disabled and not
disabled ❌ ❌ ❌
submitted with form
🔷 Advanced Topics
1. What are data-* Attributes?
Used to store custom data on HTML elements. These do not affect layout or behavior by themselves
but are useful for scripts.
Example:
<div data-user-id="1234" data-role="admin">User</div>
Access in JS:
element.dataset.userId; // "1234"
element.dataset.role; // "admin"
2. localStorage vs sessionStorage
Feature localStorage sessionStorage
Until browser/tab is
Persistence Until manually cleared
closed
Scope Same-origin, accessible across Same-origin, tab-
Feature localStorage sessionStorage
sessions specific
Storage
~5MB ~5MB
Limit
Saving settings, themes, login Temp data during a
Use Case
tokens session
Example:
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('page', 'dashboard');
3. Difference between <section>, <article>, <aside>, and <nav>
Tag Purpose Example Usage
<section Grouping related blog
A thematic grouping of content
> topics
<article
Self-contained piece of content Blog post, news article
>
Content indirectly related to main
<aside> Sidebar, related links
content
<nav> Navigation links Main site menu
These elements improve SEO and assist screen readers in understanding layout structure.
5. What are iframes?
An <iframe> embeds another webpage inside the current page.
Example:
<iframe src="https://example.com" width="500" height="300"></iframe>
Uses:
Embed YouTube videos
Display third-party widgets
Embed Google Maps
Security Note: Use sandbox and allow attributes to restrict iframe permissions.
6. How does HTML handle accessibility?
HTML uses:
Semantic tags (<main>, <nav>, <header>) for meaningful structure
ARIA roles to enhance screen reader support
Labels and descriptions for form controls
Keyboard navigation with proper tab order
Example:
<label for="email">Email</label>
<input type="email" id="email" aria-required="true">
Screen readers use these cues to interpret and narrate the page.
