50 Most Asked HTML Interview Questions with Detailed Answers:
1. What is HTML?
Answer: HTML (HyperText Markup Language) is the standard language for creating
web pages. It structures web content using elements like headings, paragraphs,
links, images, and more.
2. What are HTML tags?
Answer: Tags are code snippets that define elements in an HTML document,
enclosed between < >. Example: <p> This is a paragraph. </p>.
3. What is the difference between HTML and HTML5?
Answer: HTML5 is the latest version of HTML. It introduced new elements
(<article>, <section>), multimedia support (<audio>, <video>), and improved APIs
for web apps.
4. What are void elements in HTML?
Answer: Void elements are self-closing tags that don’t require a closing tag.
Examples: <img>, <br>, <input>.
5. What is the purpose of the <head> tag?
Answer: The <head> section contains metadata, links to stylesheets, and scripts.
It doesn’t display content on the web page.
6. What is the difference between <div> and <span>?
Answer: <div> is a block-level element used for grouping, while <span> is an
inline element used to style parts of text.
7. What are semantic elements?
Answer: Semantic elements clearly describe their meaning to both browsers and
developers. Examples: <header>, <footer>, <article>.
8. What is the use of the <meta> tag?
Answer: It provides metadata like character set, viewport settings, and page
description to improve SEO and responsiveness.
9. What is the difference between id and class attributes?
Answer: id is unique and used once per page, while class can be applied to
multiple elements for grouping and styling.
10. What is the use of the <form> tag?
Answer: It creates an HTML form for user input, containing fields like
textboxes, checkboxes, and submit buttons.
11. What is the difference between <strong> and <b>?
Answer: <strong> indicates strong importance and aids accessibility, while <b>
only makes text bold.
12. What is the difference between <em> and <i>?
Answer: <em> adds emphasis and improves accessibility, while <i> italicizes
text without semantic meaning.
13. What are data attributes?
Answer: Custom attributes prefixed with data- that store extra information
about an element. Example: <div data-id="123">.
14. How do you make a hyperlink in HTML?
Answer: Use the <a> tag: <a href="https://example.com">Visit Example</a>.
15. What is the difference between absolute, relative, and root-relative URLs?
Answer:
- Absolute: Full URL (https://example.com/page).
- Relative: Path from the current page (/about).
- Root-Relative: Path from the website root (/images/pic.jpg).
16. What is the difference between <ul> and <ol>?
Answer: <ul> creates an unordered list (bullets), while <ol> creates an ordered
list (numbers).
17. How do you embed a video in HTML?
Answer:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
18. How do you create a table in HTML?
Answer:
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
19. What is the purpose of the <iframe> tag?
Answer: It embeds another webpage within the current page.
20. What is the alt attribute in images?
Answer: Provides alternative text for images, improving accessibility and SEO.
21. What is localStorage and sessionStorage?
22. What is the purpose of the defer and async attributes in script tags?
23. How do you make a webpage mobile-friendly?
24. What is the difference between name and id attributes?
25. How do you implement accessibility in HTML?
26. What is the use of the <template> tag?
27. How do you prevent caching in HTML?
28. What are custom elements in HTML5?
29. What is the Shadow DOM?
30. How does the contenteditable attribute work?
31. Create a simple login form in HTML.
32. How do you create a dropdown menu?
33. What is the purpose of the readonly and disabled attributes?
34. How do you add tooltips in HTML?
35. What is the use of the download attribute in the <a> tag?
36. How do you create a progress bar?
37. What is the required attribute in forms?
38. How do you add a favicon to a website?
39. How do you handle form validation in HTML5?
40. What is the autocomplete attribute?
41. What is a doctype declaration?
42. Explain the difference between <section>, <article>, and <div>.
43. What are web workers in HTML5?
44. What is the viewport meta tag?
45. Explain the difference between cookies, sessionStorage, and localStorage.
46. What are pseudo-elements and pseudo-classes?
47. What is cross-origin resource sharing (CORS)?
48. What is the difference between <script> at the head and body?
49. How do you handle images for responsiveness?
50. What is a CDN, and how do you use it in HTML?
21. What is localStorage and sessionStorage?
Answer: Both are web storage options in HTML5 used to store key-value pairs in
the browser.
- localStorage: Data persists even after the browser is closed.
- sessionStorage: Data is cleared when the browser/tab is closed.
22. What is the purpose of the defer and async attributes in script tags?
Answer: Both are used to load JavaScript without blocking HTML parsing.
- defer: Executes the script after the entire document is parsed.
- async: Executes the script as soon as it downloads, without waiting for the
rest of the page.
23. How do you make a webpage mobile-friendly?
Answer: Use the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
24. What is the difference between name and id attributes?
Answer:
- name: Used to identify form elements when submitting data.
- id: Provides a unique identifier for elements and is used for styling or
scripting.
25. How do you implement accessibility in HTML?
Answer: Use semantic elements, alt attributes for images, ARIA (Accessible Rich
Internet Applications) roles, and proper heading structures.
26. What is the use of the <template> tag?
Answer: It holds HTML content that isn’t rendered immediately when the page
loads, commonly used for dynamic content generation.
27. How do you prevent caching in HTML?
Answer: Add cache-control headers or use unique query strings in URLs:
<script src="script.js?v=1.0"></script>
28. What are custom elements in HTML5?
Answer: Custom elements allow you to create your own HTML tags, enhancing
reusability and modularity.
29. What is the Shadow DOM?
Answer: Shadow DOM lets you encapsulate a section of the DOM, preventing style
leakage and ensuring component isolation.
30. How does the contenteditable attribute work?
Answer: Makes an element editable by the user:
<div contenteditable="true">Edit me!</div>
31. Create a simple login form in HTML.
Answer:
<form action="/login" method="POST">
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
32. How do you create a dropdown menu?
Answer:
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
33. What is the purpose of the readonly and disabled attributes?
Answer:
- readonly: Allows the user to read the input but prevents editing.
- disabled: Disables the input, preventing both interaction and submission.
34. How do you add tooltips in HTML?
Answer: Use the title attribute:
<button title="Click me!">Hover over me</button>
35. What is the use of the download attribute in the <a> tag?
Answer: Allows the download of files when the link is clicked:
<a href="file.pdf" download>Download PDF</a>
36. How do you create a progress bar?
Answer:
<progress value="70" max="100"></progress>
37. What is the required attribute in forms?
Answer: Makes an input field mandatory:
<input type="text" required>
38. How do you add a favicon to a website?
Answer:
<link rel="icon" href="favicon.ico" type="image/x-icon">
39. How do you handle form validation in HTML5?
Answer: Use built-in attributes like required, pattern, and minlength.
40. What is the autocomplete attribute?
Answer: Controls whether the browser should autocomplete input fields:
<input type="text" autocomplete="on">
41. What is a doctype declaration?
Answer: Specifies the HTML version:
<!DOCTYPE html>
42. Explain the difference between <section>, <article>, and <div>.
Answer:
- <section>: Groups related content.
- <article>: Represents self-contained content.
- <div>: Generic container without semantic meaning.
43. What are web workers in HTML5?
Answer: Run scripts in background threads to improve performance.
44. What is the viewport meta tag?
Answer: Ensures proper scaling on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
45. Explain the difference between cookies, sessionStorage, and localStorage.
Answer:
- Cookies: Store small data on the client side, sent with each request.
- sessionStorage: Stores data for the duration of the page session.
- localStorage: Persists data even after the browser is closed.
46. What are pseudo-elements and pseudo-classes?
Answer:
- Pseudo-elements: Style specific parts of elements (::before, ::after).
- Pseudo-classes: Apply styles based on element state (:hover, :focus).
47. What is cross-origin resource sharing (CORS)?
Answer: A mechanism that allows restricted resources on a web page to be
requested from another domain.
48. What is the difference between <script> at the head and body?
Answer: Placing scripts at the end of the body improves page load speed by
allowing content to load first.
49. How do you handle images for responsiveness?
Answer: Use the srcset attribute or CSS media queries:
<img src="image.jpg" srcset="image-small.jpg 600w, image-large.jpg 1200w">
50. What is a CDN, and how do you use it in HTML?
Answer: A Content Delivery Network (CDN) hosts resources like CSS and JS files
on servers worldwide, reducing latency:
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
