Interview_Preparation

HTML, CSS, JS, React

🔹 1. HTML Structure & Syntax
1. What is HTML?
A: HTML (HyperText Markup Language) is used for creating structure and content of a web pages and applications like headings, paragraphs, links, images, and more.
2. What is the purpose of <!DOCTYPE html>?
A: The <!DOCTYPE html> declaration specifies the version of HTML used in a document and helps browsers render the page according to the correct standards. It should be the first element in an HTML file to ensure proper parsing and compatibility. It doesn't have the closing tag.
3. What’s the difference between block-level and inline elements?
A: Block-Level Elements:
Start on a new line.
Span the full width available.
Can contain other block-level and inline elements.
Example: <div>, <p>, <h1>, <ul>, <form>.
Inline Elements:

Do not start on a new line.
Only take up as much width as necessary.
Cannot contain block-level elements directly.
Example: <span>, <a>, <strong>, <img>.
4. What is the difference between <head> and <body>?
A: <head> contains metadata, links, and scripts. <body> contains visible content.
5. What are void (self-closing) elements?
A: Elements like <img>, <input>, <br> that do not have a closing tag.
________________________________________
🔹 2. HTML Elements & Tags
6. What is the difference between <section>, <article>, and <div>?
A: <section> and <article> are semantic; <div> is non-semantic and used as a generic container.
7. When should you use <main>?
A: To represent the dominant content of the document, excluding headers, nav, and sidebars.
8. Can you nest a <div> inside a <p>?
A: No. Block-level elements cannot be inside a paragraph tag.
9. What’s the purpose of the <meta> tag?
A: Defines metadata such as character encoding, viewport settings, and page description.
10. What does meta charset="UTF-8" mean?
A: It specifies the character encoding as UTF-8, supporting most languages and characters.
________________________________________
🔹 3. Forms & Inputs
11. List some new input types introduced in HTML5.
A: email, url, tel, date, range, color, search, number.
12. How does the required attribute work in forms?
A: It forces users to fill out a field before submission.
13. What is the pattern attribute used for?
A: Specifies a regex pattern for input validation.
14. How does the placeholder attribute differ from value?
A: placeholder is a hint shown when the field is empty; value sets a default value.
15. What is the difference between name and id in form inputs?
A: name is used in form submission data; id is used for linking with labels or scripting.
________________________________________
🔹 4. Semantics & SEO
16. What are semantic HTML elements?
A: Tags like <article>, <nav>, <aside>, which describe their content meaningfully.
17. How does semantic HTML benefit SEO?
A: It helps search engines better understand content structure and hierarchy.
18. What’s the purpose of the <strong> and <em> tags?
A: They indicate importance and emphasis, respectively, with semantic meaning (not just style).
19. How do you define document structure with headings?
A: Use heading tags <h1> to <h6> in a hierarchical, logical order.
20. What is the difference between <b> vs <strong>, and <i> vs <em>?
A: <strong> and <em> are semantic; <b> and <i> are purely visual.
________________________________________
🔹 5. Accessibility (a11y)
21. What does ARIA stand for?
A: Accessible Rich Internet Applications — used to improve screen reader accessibility.
22. How do you label a form input for accessibility?
A: Use <label for="id"> or aria-label.
23. What is tabindex?
A: Controls the tab navigation order of focusable elements.
24. What are landmark elements in HTML?
A: Elements like <main>, <nav>, <header>, <footer> help screen readers navigate the page.
25. What does role="button" do?
A: Gives an element (e.g., a <div>) the semantic role of a button for assistive tech.
________________________________________
🔹 6. Media & Embedding
26. How do you embed a video in HTML5?
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
27. What’s the difference between <iframe> and <embed>?
A: <iframe> embeds HTML documents; <embed> is used for multimedia or plugins.
28. How do you embed responsive images?
A: Use <picture> or srcset to serve different images for various screen sizes.
29. What is the alt attribute for images used for?
A: Provides alternative text for screen readers and when the image fails to load.
30. What does the <canvas> element do?
A: Provides a space for drawing graphics via JavaScript (charts, games, etc.).
________________________________________
🔹 7. HTML5 APIs & Storage
31. What is the difference between localStorage and sessionStorage?
A: localStorage persists even after browser close; sessionStorage lasts only during the tab session.
32. What is the <template> element in HTML?
A: Holds HTML fragments that are not rendered until accessed via JavaScript.
33. What is the data-* attribute used for?
A: Used to store custom data attributes on elements, accessible via dataset in JavaScript.
34. What is Web Storage in HTML5?
A: Allows storage of key-value data in the browser through localStorage and sessionStorage.
35. What is the Drag and Drop API?
A: An HTML5 API that lets users drag and drop elements using native browser events.
________________________________________
🔹 8. Performance & Optimization
36. How can you improve HTML page load time?
A: Use async/defer for scripts, minify HTML, use CDNs, compress images, and reduce DOM size.
37. What’s the use of defer and async in scripts?
A: defer loads script after HTML parsing; async runs it as soon as it's ready.
38. How do you lazy load images in HTML?
A: Use loading="lazy" on <img> to defer loading until they’re in the viewport.
39. What is the use of the <link rel="preload"> tag?
A: It instructs the browser to preload assets (fonts, images, scripts) for faster rendering.
40. How does DOM size affect performance?
A: Larger DOM trees slow rendering and reflows; reducing depth and count improves performance.
________________________________________
🔹 9. Security & Best Practices
41. What is cross-site scripting (XSS) and how does HTML relate to it?
A: XSS occurs when unescaped user input is rendered in HTML. Prevent it by sanitizing input.
42. Why should you avoid inline JavaScript in HTML?
A: It reduces maintainability, makes debugging harder, and increases XSS risks.
43. What is rel="noopener noreferrer" used for on links?
A: Prevents security vulnerabilities when opening links in new tabs by not passing window.opener.
44. Why should HTML be validated?
A: Ensures proper structure, accessibility, and prevents browser rendering issues.
45. How do you handle legacy browser support in HTML5?
A: Use polyfills, fallbacks, and graceful degradation techniques.
________________________________________
🔹 10. Advanced & Miscellaneous
46. Can a single page have multiple <h1> tags?
A: Yes, if used within distinct sections or articles.
47. What’s the difference between innerHTML and textContent?
A: innerHTML parses and returns HTML; textContent only deals with plain text.
48. What is progressive enhancement in HTML?
A: Building with baseline functionality first, then enhancing for modern browsers.
49. Can HTML be used without CSS or JS?
A: Yes, but it will be unstyled and static. CSS adds styling; JS adds interactivity.
50. What is the difference between noscript and script?
A: <noscript> provides fallback content when JavaScript is disabled or unsupported.