Scribd
Upload
2 views7 pages

Interview Questions

This document contains a comprehensive set of HTML interview questions and answers, covering fundamental concepts such as HTML structure, semantic elements, differences between attributes, and form handling. It also discusses advanced topics like data attributes, localStorage vs sessionStorage, and accessibility practices in HTML. Each question is accompanied by clear explanations and examples to aid understanding.

Uploaded by

Denom Boy Bhavik Rawal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views7 pages

Interview Questions

This document contains a comprehensive set of HTML interview questions and answers, covering fundamental concepts such as HTML structure, semantic elements, differences between attributes, and form handling. It also discusses advanced topics like data attributes, localStorage vs sessionStorage, and accessibility practices in HTML. Each question is accompanied by clear explanations and examples to aid understanding.

Uploaded by

Denom Boy Bhavik Rawal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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.

You might also like