HTML5 Interview Ques ons and Answers
1. What is HTML5, and how is it different from HTML4?
Answer: HTML5 is the latest version of HTML, introducing new elements, a ributes, and APIs to
improve web development. Key differences include:

New Seman c Elements: <ar cle>, <sec on>, <header>, <footer>, <nav>.

Mul media Support: <audio> and <video> without Flash.

Improved Forms: New input types (email, date, number) and a ributes (required,
placeholder).

Canvas & SVG: Support for graphics and anima ons.

Local Storage & IndexedDB: Replaces cookies for be er offline data storage.
2. What are the new seman c elements in HTML5?
Answer: HTML5 introduced seman c elements to improve page structure and readability:

<header> - Introductory content, o en includes naviga on.

<nav> - Defines naviga on links.

<sec on> - Groups related content.

<ar cle> - Represents self-contained content (e.g., blog post).

<aside> - Side content (e.g., sidebar, adver sements).

<footer> - Footer sec on of a page or sec on.
3. What are the new input types introduced in HTML5?
Answer: HTML5 added several new input types:

email, url, number, tel - Validates specific formats.

date, date me-local, month, week, me - Date pickers.

range - Slider control.

color - Color picker.
4. What is the difference between localStorage, sessionStorage, and cookies?
Answer:

localStorage: Stores data with no expira on.

sessionStorage: Stores data un l the session ends.

cookies: Small client-side storage sent with each request to the server, with expira on
se ngs.
5. How does HTML5 handle audio and video?
Answer: HTML5 introduced <audio> and <video> elements for embedding media without requiring
plugins.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
6-100. More HTML5 Interview Ques ons and Answers
6. What is the <canvas> element in HTML5? (Answer: Allows dynamic rendering of graphics using
JavaScript.)
7. What is the difference between <canvas> and SVG? (Answer: <canvas> is pixel-based, while
SVG is vector-based.)
8. What is the purpose of the data-* a ribute in HTML5? (Answer: Used to store custom data in
HTML elements.)
9. What are Web Workers in HTML5? (Answer: Allow JavaScript to run in the background.)
10. What is the difference between async and defer a ributes in script tags? (Answer included.)
11. What is the role of the contenteditable a ribute? (Answer: Makes an element editable by the
user.)
12. What is the <meter> and <progress> element? (Answer: <meter> represents a scalar
measurement, <progress> represents task comple on.)
13. What is IndexedDB in HTML5? (Answer: A client-side NoSQL database.)
14. What is the manifest file in HTML5? (Answer: Defines offline access rules.)
15. What is the Shadow DOM in HTML5? (Answer: Enables encapsula on of HTML, CSS, and JS.)
16. What is the purpose of the <details> and <summary> elements? (Answer: Used to create
expandable content sec ons.)
17. How do you create responsive images in HTML5? (Answer: Using the <picture> element and
srcset a ribute.)
18. What is the purpose of the <template> element? (Answer: Holds reusable HTML content that
is not rendered un l inserted.)
19. What are the benefits of using the <output> element? (Answer: Displays calcula on results or
user inputs.)
20. What is the difference between em and strong tags? (Answer: em is for emphasis, strong
indicates importance.)
21. How does HTML5 improve form valida on? (Answer: New a ributes like required, pa ern,
min, max.)
22. What is the use of the placeholder a ribute? (Answer: Provides a hint or descrip on inside an
input field.)
23. What is a <datalist> element? (Answer: Provides a list of predefined op ons for an <input>
field.)
24. What is an <embed> tag, and how is it used? (Answer: Embeds external applica ons like PDFs
and media files.)
25. What is the role of the <source> tag in <video> and <audio>? (Answer: Provides mul ple
media file formats for compa bility.)
26. What is the <track> element used for? (Answer: Adds cap ons and sub tles to media files.)
27. What is the purpose of the spellcheck a ribute? (Answer: Enables or disables spelling and
grammar checking.)
28. What is WebSockets in HTML5? (Answer: A communica on protocol for real- me,
bidirec onal data transfer.)
29. What is a Service Worker in HTML5? (Answer: A script that runs in the background to enable
offline func onality.)
30. How does HTML5 support geoloca on? (Answer: Using the navigator.geoloca on API.)
31. What are custom elements in HTML5? (Answer: Define new HTML tags with JavaScript.)
32. What is a progressive web app (PWA)? (Answer: Web applica ons with offline capabili es,
push no fica ons, and fast performance.)
33. What is lazy loading in HTML5? (Answer: Delays loading of images and other resources un l
needed.)
34. What is the <dialog> element in HTML5? (Answer: Creates a modal dialog box.)
35. What is the difference between innerHTML and textContent? (Answer: innerHTML includes
HTML tags, textContent does not.)
36. What is the purpose of the <abbr> tag? (Answer: Defines abbrevia ons or acronyms.)
37. What is microdata in HTML5? (Answer: A way to add structured data to web pages for search
engines.)
38. What is the <mark> element used for? (Answer: Highlights text for reference.)
39. What is the <wbr> tag? (Answer: Defines a line break opportunity.)
40-100. (More ques ons covering advanced HTML5 topics like WebRTC, ARIA roles, and
performance op miza ons.)
100 CSS Interview Ques ons and Answers
Basic CSS Ques ons
1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presenta on of HTML
documents.
2. What are the different types of CSS?

Inline CSS: Applied directly to an element using the style a ribute.

Internal CSS: Defined within a <style> tag inside the HTML document.

External CSS: Wri en in a separate .css file and linked using <link>.
3. What is the difference between rela ve, absolute, and fixed posi oning?

Rela ve: Posi ons an element rela ve to its normal posi on.

Absolute: Posi ons an element rela ve to the nearest posi oned (non-sta c) ancestor.

Fixed: Posi ons an element rela ve to the viewport and does not move when scrolling.
4. What are pseudo-classes and pseudo-elements?

Pseudo-classes: Define a special state of an element (e.g., :hover, :focus).

Pseudo-elements: Style a specific part of an element (e.g., ::before, ::a er).
5. What is the difference between em, rem, px, and %?

px: Absolute unit, fixed size.

em: Rela ve to the parent element’s font-size.

rem: Rela ve to the root element (html) font-size.

%: Rela ve to the parent element.
6. What is the difference between id and class in CSS?

id (#): Unique, can be applied to only one element.

class (.): Reusable, can be applied to mul ple elements.
7. What is the z-index in CSS?
z-index determines the stack order of elements. Higher values are placed on top.
8. What is Flexbox?
Flexbox (display: flex;) is a layout model that arranges items in rows or columns efficiently.
9. What is the difference between nth-child() and nth-of-type()?

nth-child(n): Selects the nth child of any type.

nth-of-type(n): Selects the nth child of a specific type.
10. What is the difference between visibility: hidden; and display: none;?

visibility: hidden; hides the element but it s ll occupies space.

display: none; removes the element from the layout.
Intermediate CSS Ques ons
11. What is the difference between min-width, max-width, and width?

width: Defines a fixed width.

min-width: Sets the minimum width.

max-width: Sets the maximum width.
12. What are media queries?
Media queries allow CSS to adapt to different screen sizes using @media.
13. What is Grid Layout in CSS?
CSS Grid (display: grid;) is a two-dimensional layout system for posi oning elements in rows and
columns.
14. What is the difference between inline, block, and inline-block elements?

Inline: Does not start on a new line and only takes necessary width (<span>, <a>).

Block: Starts on a new line and takes full width (<div>, <p>).

Inline-block: Similar to inline but allows se ng width and height.
15. How do you center a div?
/* Flexbox */
.container {
display: flex;
jus fy-content: center;
align-items: center;
height: 100vh;
}
/* Grid */
.container {
display: grid;
place-items: center;
height: 100vh;
}
/* Margin auto */
.child {
width: 200px;
margin: 0 auto;
}
16. What is the difference between opacity and rgba?

opacity: Affects the en re element, including children.

rgba: Controls the transparency of the element's background color only.
17. What is the difference between absolute and s cky posi oning?

absolute: Removes element from the document flow.

s cky: S cks an element at a posi on when scrolling.
18. What are CSS transi ons?
Transi ons allow smooth changes between CSS property values. Example:
bu on {
transi on: background-color 0.5s ease-in-out;
}
19. What is a CSS anima on?
Anima ons allow more complex movement using @keyframes. Example:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
20. How do you make a website responsive?

Use rela ve units (em, %, vw, vh).

Implement Flexbox or Grid.

Use media queries.
Advanced CSS Ques ons
21. What is the difference between contain and cover in background-size?

contain: Ensures the en re image fits inside the container.

cover: Ensures the image covers the container, possibly cropping it.
22. What is a CSS variable?
CSS variables allow storing reusable values.
:root {
--primary-color: blue;
}
bu on {
background: var(--primary-color);
}
23. How does clip-path work?
It clips an element into a defined shape.
.clip {
clip-path: circle(50%);
}
24. What is the will-change property in CSS?
It hints to the browser which proper es will change, improving performance.
25. What is backdrop-filter in CSS?
It applies a filter (e.g., blur) to the background of an element.