Scribd
Upload
1 views20 pages

HTML CSS

The document contains a comprehensive list of HTML and CSS interview questions along with their answers. It covers fundamental concepts of HTML, such as tags, elements, forms, and semantic HTML, as well as advanced topics like Web Components and APIs. Additionally, it includes CSS topics like the Box Model, Flexbox, Grid, and responsive design techniques.

Uploaded by

aryan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views20 pages

HTML CSS

The document contains a comprehensive list of HTML and CSS interview questions along with their answers. It covers fundamental concepts of HTML, such as tags, elements, forms, and semantic HTML, as well as advanced topics like Web Components and APIs. Additionally, it includes CSS topics like the Box Model, Flexbox, Grid, and responsive design techniques.

Uploaded by

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

HTML Interview Questions

1. What is HTML?
Answer:
HTML (HyperText Markup Language) is the standard markup language for
creating web pages. It defines the structure of a webpage using elements (tags)
that browsers render into visible or functional content.
2. What are HTML tags and elements?
Answer:
• HTML Tags: Keywords enclosed in angle brackets (< >), e.g., <p>, <div>.
• HTML Elements: Tags + content + closing tag (if required), e.g., <p>Hello
World</p>.
3. What is the basic structure of an HTML document?
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
4. What is the <!DOCTYPE html> declaration?
Answer:
It tells the browser that the document is an HTML5 document. It must be the
first line in an HTML file.
5. What are void elements in HTML?
Answer:
Void elements (self-closing tags) do not require a closing tag,
e.g., <br>, <img>, <hr>, <input>.
6. What is the difference between <div> and <span>?
Answer:
• <div> is a block-level element (takes full width, starts on a new line).
• <span> is an inline element (takes only necessary width, stays in line
with text).
7. What are semantic HTML elements?
Answer:
Semantic elements clearly describe their meaning to browsers and developers,
e.g.:
• <header>, <footer>, <article>, <section>, <nav>, <aside>.
8. What is the difference between <strong> and <b>?
Answer:
• <strong> indicates strong importance (semantic, used for screen
readers).
• <b> simply makes text bold (visual styling only).
9. What is the difference between <em> and <i>?
Answer:
• <em> indicates emphasis (semantic, screen readers stress it).
• <i> is for italic styling (visual only, e.g., icons, foreign words).
10. What is the purpose of the <meta> tag?
Answer:
It provides metadata about the HTML document, such as:
• Character encoding (<meta charset="UTF-8">)
• Viewport settings (<meta name="viewport" content="width=device-
width, initial-scale=1.0">)
• SEO descriptions (<meta name="description" content="...">)
11. What is the difference between id and class attributes?
Answer:
• id is unique (only one per page, used for JavaScript targeting).
• class can be reused (multiple elements can have the same class).
12. What is the purpose of the <iframe> tag?
Answer:
It embeds another HTML page within the current page, e.g., for videos, maps,
or ads.
<iframe src="https://example.com" width="500" height="300"></iframe>
Run HTML
13. What are HTML forms and their common elements?
Answer:
Forms collect user input. Common elements:
<form action="/submit" method="POST">
<input type="text" placeholder="Name">
<input type="email" required>
<input type="password">
<input type="checkbox">
<input type="radio">
<select><option>Option 1</option></select>
<textarea></textarea>
<button type="submit">Submit</button>
</form>
14. What is the difference between GET and POST methods in forms?
Answer:

GET POST

Data sent in URL Data sent in request body

Limited length (~2048 chars) No length limit

Cached & bookmarked Not cached

Used for searches Used for sensitive data (login, payments)

15. What are HTML5 new input types?


Answer:
• email, url, tel, number, date, time, color, range, search.
16. What is the purpose of the required attribute?
Answer:
It makes a form field mandatory before submission.
<input type="text" required>
Run HTML
17. What is the difference between <ol>, <ul>, and <dl>?
Answer:
• <ol> = Ordered list (1, 2, 3)
• <ul> = Unordered list (bullets)
• <dl> = Description list (<dt> term + <dd> definition)
18. What is the difference between <tr>, <th>, and <td>?
Answer:
• <tr> = Table row
• <th> = Table header (bold & centered by default)
• <td> = Table data cell
19. How do you create a hyperlink in HTML?
Answer:
<a href="https://example.com" target="_blank">Visit Example</a>
Run HTML
• target="_blank" opens the link in a new tab.
20. What is the purpose of the alt attribute in <img>?
Answer:
It provides alternative text if the image fails to load (also helps with SEO and
screen readers).

<img src="logo.png" alt="Company Logo">


Run HTML

Advanced HTML Questions


21. What is the difference between defer and async in <script>?
Answer:
• defer: Script executes after HTML parsing (order maintained).
• async: Script loads & executes asynchronously (order not guaranteed).
22. What are data attributes (data-*)?
Answer:
They store custom data private to the page.
<div data-user-id="123" data-role="admin"></div>
Accessed in JavaScript via element.dataset.userId.
23. What is the purpose of the <canvas> element?
Answer:
It allows dynamic, scriptable rendering of 2D graphics (charts, animations,
games).
<canvas id="myCanvas" width="200" height="100"></canvas>
24. What is the <svg> tag used for?
Answer:
It defines vector-based graphics in XML format (scalable without quality loss).
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>

25. What is the difference between localStorage and sessionStorage?


Answer:

localStorage sessionStorage

Persists after browser close Cleared when tab closes

5-10MB storage limit Same limit

Same across tabs Tab-specific

26. What is the purpose of the <template> tag?


Answer:
It holds HTML content that can be cloned and inserted via JavaScript (not
rendered by default).
<template id="user-card">
<div class="card"></div>
</template>

27. What are Web Components in HTML5?


Answer:
They allow creating reusable custom elements with encapsulated functionality.
• Custom Elements: Define new HTML tags.
• Shadow DOM: Encapsulated styling & markup.
• HTML Templates: Reusable markup (<template>).
28. What is the difference between contenteditable and designMode?
Answer:
• contenteditable makes a single element editable.
• document.designMode = "on" makes the entire document editable.
29. How does HTML5 support offline applications?
Answer:
Using:
• Application Cache (deprecated)
• Service Workers (modern approach)
30. What is the purpose of the <picture> element?
Answer:
It provides responsive images with fallbacks for different screen sizes.
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Fallback">
</picture>

31. What are the new semantic elements in HTML5?


Answer:
HTML5 introduced semantic tags for better document structure:
• <header>, <footer>
• <nav> (navigation links)
• <article> (independent content)
• <section> (thematic grouping)
• <aside> (sidebar/content)
• <main> (main content)
• <figure> + <figcaption> (images with captions)
• <time> (machine-readable date/time)
32. What is the purpose of the <datalist> element?
Answer:
It provides an autocomplete feature for <input> fields:

<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>

33. How does HTML5 support multimedia?


Answer:
Native support without plugins:
• <audio> for sound
• <video> for videos
• <track> for subtitles

<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
</video>
34. What is the difference between <canvas> and <svg>?
Answer:
Canvas SVG

Pixel-based (raster) Vector-based

Modified via JavaScript XML-based

No DOM nodes Each element is in DOM

Better for games/charts Better for icons/scalable graphics

35. What are Web Workers in HTML5?


Answer:
They run JavaScript in background threads to prevent UI freezing:
// Main script
const worker = new Worker('worker.js');
worker.postMessage('Start');
worker.onmessage = (e) => console.log(e.data);

// worker.js
onmessage = (e) => postMessage('Worker received: ' + e.data);
36. What is Geolocation API in HTML5?
Answer:
Gets user's geographical location:

navigator.geolocation.getCurrentPosition(
(position) => console.log(position.coords),
(error) => console.error(error)
);
37. What is the Drag and Drop API?
Answer:
Native HTML5 feature for drag-and-drop interactions:

<div draggable="true" id="dragme">Drag me!</div>


<div id="dropzone">Drop here</div>

<script>
document.getElementById('dragme').addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text', e.target.id);
});
</script>

38. What is the Web Storage API?


Answer:
Stores data locally in browser:
• localStorage (persistent)
• sessionStorage (tab-specific)

localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');
39. What is the difference between cookies and Web Storage?
Answer:

Cookies Web Storage

Sent with HTTP requests Not sent automatically

4KB limit 5-10MB


Cookies Web Storage

Manual expiration Persistent/session-based

Accessible server-side Client-side only

40. What is the purpose of the <progress> element?


Answer:
Displays task completion progress:
html
Copy
<progress value="70" max="100"></progress>

41. What are the new form attributes in HTML5?


Answer:
• placeholder (hint text)
• required (mandatory field)
• autofocus (auto-highlight)
• pattern (regex validation)
• autocomplete (suggestions)
<input type="text" placeholder="Name" required autofocus>
42. How do you implement form validation in HTML5?
Answer:
Using built-in validation:
<input type="email" required pattern="[a-z0-9]+@[a-z]+\.[a-z]{2,3}">
<input type="number" min="1" max="100">
43. What is the purpose of the <output> element?
Answer:
Displays calculation results:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a"> +
<input type="number" id="b"> =
<output name="result"></output>
</form>

44. How do you create a color picker in HTML5?


Answer:

<input type="color" value="#ff0000">

45. What is the <meter> element used for?


Answer:
Represents a scalar measurement within a known range:
<meter value="6" min="0" max="10">6/10</meter>
46. How do you lazy-load images in HTML?
Answer:
Using loading="lazy":
<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">
47. What is the purpose of the preload attribute?
Answer:
Specifies resources to load early:

<link rel="preload" href="font.woff2" as="font">

48. How do you implement responsive images?


Answer:
Using srcset and sizes:
<img srcset="small.jpg 500w, medium.jpg 1000w"
sizes="(max-width: 600px) 500px, 1000px"
src="fallback.jpg" alt="Responsive image">
49. What is the purpose of the <picture> element?
Answer:
Art direction for different displays:

<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Fallback">
</picture>
50. How do you optimize a website for SEO using HTML?
Answer:
Key techniques:
• Semantic HTML5 tags
• Proper <title> and <meta> descriptions
• <h1> to <h6> hierarchy
• alt text for images
• Mobile-friendly viewport
• Schema markup
• Clean URL structure
<meta name="description" content="Page description for SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
CSS Interview Questions

1. What is CSS?
Answer:
CSS (Cascading Style Sheets) is a style sheet language used to describe the
presentation of HTML documents — including layout, colors, and fonts.

2. What are the types of CSS?


Answer:
• Inline CSS – Style in the HTML tag
• Internal CSS – Style in <style> tag inside <head>
• External CSS – Style in a separate .css file

3. What is the difference between id and class in CSS?


Answer:
• id: Unique identifier, used once
• class: Reusable style across multiple elements

4. What is the Box Model in CSS?


Answer:
A layout model describing:
• Content
• Padding
• Border
• Margin
5. What are pseudo-classes in CSS?
Answer:
Special keywords to style elements based on their state.
Example: :hover, :first-child, :nth-child(n)

6. What is specificity in CSS?


Answer:
It determines which rule takes precedence when multiple rules target the same
element.

7. What is the difference between em, rem, px, and %?


Answer:
• px: Absolute
• em: Relative to parent font
• rem: Relative to root font
• %: Relative to container

8. What are media queries in CSS?


Answer:
Used for responsive design, adapting styles to device width/height.
css
CopyEdit
@media (max-width: 600px) {
body { background: yellow; }
}

9. Difference between position: absolute, relative, fixed, sticky?


Answer:
• absolute: Relative to nearest positioned ancestor
• relative: Relative to itself
• fixed: Relative to viewport
• sticky: Scrolls with page until fixed

10. What is the difference between visibility: hidden and display: none?
Answer:
• visibility: hidden: Element is invisible but occupies space
• display: none: Element is removed from layout

11. What is Flexbox in CSS?


Answer:
A one-dimensional layout method to arrange elements in rows or columns.

12. What is Grid in CSS?


Answer:
A two-dimensional layout system using rows and columns.

13. What is z-index in CSS?


Answer:
Controls the stacking order of elements (higher z-index appears on top).

14. Difference between inline, block, and inline-block?


Answer:
• inline: No width/height
• block: Full width
• inline-block: Inline + width/height

15. What are combinators in CSS?


Answer:
• Descendant (div p)
• Child (div > p)
• Adjacent sibling (div + p)
• General sibling (div ~ p)

16. What is the calc() function in CSS?


Answer:
Performs calculations in CSS:
css
CopyEdit
width: calc(100% - 60px);

17. What is the default position of HTML elements?


Answer:
Most elements are static by default.

18. How to center a div horizontally and vertically?


Answer:
Using Flexbox:
css
CopyEdit
display: flex;
justify-content: center;
align-items: center;

19. How to make a website responsive using CSS?


Answer:
• Use media queries
• Use percentages/flexbox
• Avoid fixed units

20. What is the difference between auto and 0 in margin?


Answer:
• 0: No margin
• auto: Takes remaining space, useful for centering

21. How do you import one CSS file into another?


Answer:
css
CopyEdit
@import url('style.css');

22. What is the difference between max-width and min-width?


Answer:
• min-width: Sets the minimum width
• max-width: Sets the maximum width

23. What is object-fit in CSS?


Answer:
Defines how images fit in a container. Example: cover, contain, fill

24. How do transitions work in CSS?


Answer:
Smooth changes between properties:
css
CopyEdit
transition: all 0.3s ease-in-out;

25. What is a pseudo-element in CSS?


Answer:
Used to style specific parts of an element.
Example: ::before, ::after

26. What is inherit, initial, and unset in CSS?


Answer:
• inherit: Inherits from parent
• initial: Resets to default
• unset: Acts as either inherit or initial

27. How do you make a website print-friendly using CSS?


Answer:
Use a print media query:
css
CopyEdit
@media print {
body { font-size: 12px; }
}

28. What is the use of clamp() in CSS?


Answer:
Sets a responsive value with a minimum, ideal, and maximum.
css
CopyEdit
font-size: clamp(1rem, 2vw, 2rem);

29. Difference between overflow: hidden, scroll, and auto?


Answer:
• hidden: Hides overflow
• scroll: Always scrollable
• auto: Scrolls only when needed

30. What is the :root selector in CSS?


Answer:
Targets the highest-level element (usually <html>), used for declaring CSS
variables globally.

You might also like