{"id":48616,"date":"2026-04-08T19:45:05","date_gmt":"2026-04-08T14:15:05","guid":{"rendered":"https:\/\/www.foundit.sg\/career-advice\/?p=48616"},"modified":"2026-04-09T11:41:28","modified_gmt":"2026-04-09T06:11:28","slug":"html-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.foundit.sg\/career-advice\/html-interview-questions-answers\/","title":{"rendered":"Top HTML Interview Questions and Answers [2026]"},"content":{"rendered":"\n

HTML remains one of the most frequently tested skills in frontend and UI developer interviews across Singapore. Companies like DBS, Grab, Singtel, and Shopee often begin technical rounds with HTML interview questions to evaluate a candidate\u2019s fundamentals before moving on to CSS, JavaScript, or frameworks.<\/p>\r\n\r\n

This list of Top 50 HTML Interview Questions and Answers [2025]<\/strong> will help you prepare for roles ranging from junior web developer to experienced UI engineer. Each question is explained in simple language with examples so you can demonstrate both theoretical knowledge and practical coding ability during interviews.<\/p>\r\n <\/p>\n\n\n\n

\n
\n \ud83d\udd3d Table of Contents<\/strong><\/summary>\n
    \n
  1. Basic HTML Interview Questions<\/a><\/strong><\/li>\n
  2. Advanced HTML Interview Questions<\/a><\/strong><\/li>\n
  3. Scenario-Based HTML Interview Questions<\/a><\/strong><\/li>\n
  4. HTML5-Specific Interview Questions<\/a><\/strong><\/li>\n
  5. Checklist: Quick Prep for HTML Interviews<\/a><\/strong><\/li>\n
  6. Comparison Table: HTML vs HTML5<\/a><\/strong><\/li>\n
  7. FAQs on HTML Interviews<\/a><\/strong><\/li>\n <\/ol>\n <\/details>\n<\/div>\n\n\n\n
    <\/div>\n
    \nApply for HTML Jobs<\/a>\n<\/div> \n
    <\/div>\n\n\n\n

    Basic HTML Interview Questions<\/h2>\n\n\n\n

    Q1. What is HTML?<\/strong><\/h3>\n
    \n

    HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content using elements and tags such as headings, paragraphs, links, and images. Browsers interpret HTML to render a page visually.<\/p>\n<\/div>\n\n

    Q2. What are HTML tags?<\/strong><\/h3>\n
    \n

    Tags are the basic building blocks of HTML. They define how content should appear on a webpage.<\/p>\n

    Example:<\/strong>
    \n<p>This is a paragraph<\/p><\/code><\/p>\n<\/div>\n\n

    Q3. Difference between HTML and HTML5?<\/strong><\/h3>\n
    \n

    HTML5<\/strong> is the modern version that adds new semantic tags, multimedia support, and APIs for advanced features. It improves performance, SEO, and accessibility compared to older HTML versions.<\/p>\n

    Example:<\/strong>
    \nHTML5 introduced <audio><\/code>, <video><\/code>, <canvas><\/code>, and semantic tags like <section><\/code>, <article><\/code>.<\/p>\n<\/div>\n\n

    Q4. What are semantic elements in HTML?<\/strong><\/h3>\n
    \n

    Semantic elements describe meaning rather than just presentation, making content easier for search engines and assistive technologies to interpret.<\/p>\n

    Example:<\/strong>
    \n<header><\/code>, <footer><\/code>, <nav><\/code>, <article><\/code>, <aside><\/code>.<\/p>\n<\/div>\n\n

    Q5. Explain the difference between inline and block elements.<\/strong><\/h3>\n
    \n

    Block elements<\/strong> start on a new line and take full width. Inline elements<\/strong> stay within a line and only occupy as much width as needed.<\/p>\n

    Example:<\/strong>
    \nBlock: <div><\/code>, <p><\/code>
    \nInline: <span><\/code>, <a><\/code>, <strong><\/code><\/p>\n<\/div>\n\n

    Q6. What are HTML attributes?<\/strong><\/h3>\n
    \n

    Attributes provide extra information about an element, such as source, size, or accessibility labels.<\/p>\n

    Example:<\/strong>
    \n<img src=\"image.jpg\" alt=\"profile picture\"><\/code>
    \nHere src<\/code> specifies the image file, and alt<\/code> provides alternative text.<\/p>\n<\/div>\n\n

    Q7. What is the difference between the id and class attributes in HTML?<\/strong><\/h3>\n
    \n

    id<\/strong> is used to uniquely identify one element on a page. class<\/strong> is used to group multiple elements so they can share the same styling or behaviour. In interviews, a common point to mention is that JavaScript and CSS often target both, but an id<\/code> should not be repeated on the same page.<\/p>\n

    Example:<\/strong>
    \n<div id=\"main-header\"><\/div><\/code>
    \n<div class=\"card\"><\/div><\/code><\/p>\n<\/div>\n\n

    Q8. What is the use of <meta> tags?<\/strong><\/h3>\n
    \n

    Meta tags provide metadata about a webpage such as description, keywords, charset, and viewport settings for responsive design.<\/p>\n

    Example:<\/strong>
    \n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/p>\n<\/div>\n\n

    Q9. Difference between relative and absolute URLs?<\/strong><\/h3>\n
    \n

    Relative URL<\/strong>: Path relative to the current page.
    \nAbsolute URL<\/strong>: Full path including protocol and domain.<\/p>\n

    Example:<\/strong>
    \nRelative: about.html<\/code>
    \nAbsolute: https:\/\/example.com\/about.html<\/code><\/p>\n<\/div>\n\n

    Q10. What is the difference between <ol> and <ul>?<\/strong><\/h3>\n
    \n

    <ol><\/code> creates an ordered list with numbers, while <ul><\/code> creates an unordered list with bullets.<\/p>\n

    Example:<\/strong>
    \n<ol><li>One<\/li><\/ol><\/code>
    \n<ul><li>One<\/li><\/ul><\/code><\/p>\n<\/div>\n\n

    Q11. What is the difference between HTML and XHTML?<\/strong><\/h3>\n
    \n

    XHTML<\/strong> is stricter than HTML. It requires all tags to be closed, attributes quoted, and lowercase element names.<\/p>\n

    Example:<\/strong>
    \nHTML: <br><\/code>
    \nXHTML: <br \/><\/code><\/p>\n<\/div>\n\n

    Q12. What are empty elements in HTML?<\/strong><\/h3>\n
    \n

    Empty elements have no closing tag or content.<\/p>\n

    Example:<\/strong>
    \n<br><\/code>, <hr><\/code>, <img><\/code>, <input><\/code><\/p>\n<\/div>\n\n

    Q13. Difference between HTML tags <strong> and <b>?<\/strong><\/h3>\n
    \n

    <strong><\/code> gives semantic importance (read by screen readers, improves SEO), while <b><\/code> only makes text bold without meaning.<\/p>\n

    Example:<\/strong>
    \n<strong>Warning<\/strong><\/code> vs <b>Warning<\/b><\/code><\/p>\n<\/div>\n\n

    Q14. What is the difference between inline CSS and external CSS in HTML?<\/strong><\/h3>\n
    \n

    Inline CSS<\/strong> is written inside the HTML element\u2019s style<\/code> attribute. External CSS<\/strong> is linked via <link><\/code> and applies across multiple pages. External CSS is preferred for maintainability.<\/p>\n

    Example:<\/strong>
    \nInline: <p style=\"color:red;\">Hello<\/p><\/code>
    \nExternal: <link rel=\"stylesheet\" href=\"style.css\"><\/code><\/p>\n<\/div>\n\n

    Q15. What is the difference between GET and POST methods in HTML forms?<\/strong><\/h3>\n
    \n

    GET<\/strong>: Sends data via URL, less secure, suitable for search queries.
    \nPOST<\/strong>: Sends data in the request body, more secure, used for sensitive data like login or payments.<\/p>\n

    Example:<\/strong>
    \n<form method=\"GET\"><\/code> vs <form method=\"POST\"><\/code><\/p>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n

    Read Also: Web Developer Interview Questions and Answers<\/a><\/strong><\/p>\n\n\n\n

    Advanced HTML Interview Questions<\/h2>\n\n

    Q16. What are HTML5 APIs?<\/strong><\/h3>\n
    \n

    HTML5 introduced several APIs that extend the capabilities of the browser without relying on third-party plugins. These APIs allow developers to create richer, more interactive applications directly in the browser. Common APIs include Geolocation API, Web Storage API, Canvas API, Drag-and-Drop API, and Web Workers.<\/p>\n

    Example:<\/strong>
    \nThe Geolocation API can fetch a user\u2019s location:
    \nnavigator.geolocation.getCurrentPosition(function(pos) );<\/code><\/p>\n<\/div>\n\n

    Q17. What is the difference between localStorage and sessionStorage in HTML5?<\/strong><\/h3>\n
    \n

    Both localStorage and sessionStorage are part of the Web Storage API used for storing data on the client side. The key difference lies in persistence: localStorage<\/strong> persists data even after the browser is closed, while sessionStorage<\/strong> stores data only for the current session and clears when the browser tab is closed.<\/p>\n

    Example:<\/strong>
    \nlocalStorage.setItem(\"user\",\"John\");<\/code>
    \nsessionStorage.setItem(\"token\",\"12345\");<\/code><\/p>\n<\/div>\n\n

    Q18. How does HTML5 improve form handling compared to older HTML?<\/strong><\/h3>\n
    \n

    HTML5 added new input types and attributes that enhance form validation and user experience without JavaScript. Attributes like required<\/code>, placeholder<\/code>, pattern<\/code>, and input types like email<\/code>, url<\/code>, number<\/code>, and date<\/code> help in building robust forms with built-in validation and accessibility.<\/p>\n

    Example:<\/strong>
    \n<input type=\"email\" required placeholder=\"Enter your email\"><\/code>
    \nThis ensures the input is a valid email before form submission.<\/p>\n<\/div>\n\n

    Q19. What is the difference between SVG and Canvas in HTML5?<\/strong><\/h3>\n
    \n

    SVG (Scalable Vector Graphics)<\/strong> uses XML to describe 2D graphics, which remain sharp when scaled. Canvas<\/strong> provides a raster-based drawing surface that requires JavaScript for drawing. SVG is best for static images like charts or icons, while Canvas is suited for dynamic, pixel-based rendering like games or animations.<\/p>\n

    Example:<\/strong>
    \nSVG: <svg><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"\/><\/svg><\/code>
    \nCanvas: ctx.fillRect(20,20,150,100);<\/code><\/p>\n<\/div>\n\n

    Q20. How does HTML5 handle multimedia without plugins?<\/strong><\/h3>\n
    \n

    Previously, Flash or Silverlight were used for embedding audio and video. HTML5 introduced the <audio><\/code> and <video><\/code> tags, making it possible to embed media natively in the browser with attributes for controls, autoplay, loop, and preload.<\/p>\n

    Example:<\/strong>
    \n<video src=\"movie.mp4\" controls width=\"400\"><\/video><\/code><\/p>\n<\/div>\n\n

    Q21. What are ARIA roles in HTML, and why are they important?<\/strong><\/h3>\n
    \n

    ARIA (Accessible Rich Internet Applications) roles make web content more accessible for users relying on screen readers or assistive technologies. They describe the role of elements beyond native semantics, ensuring better accessibility and compliance with standards like WCAG.<\/p>\n

    Example:<\/strong>
    \n<button role=\"switch\" aria-checked=\"true\">Toggle<\/button><\/code><\/p>\n<\/div>\n\n

    Q22. Explain the difference between defer and async attributes in the <script> tag.<\/strong><\/h3>\n
    \n

    Async<\/strong>: Loads the script asynchronously and executes it immediately once loaded, potentially before HTML parsing is complete.
    \nDefer<\/strong>: Loads the script while parsing HTML but executes only after the document is fully parsed.
    \nDefer is usually preferred for predictable execution order.<\/p>\n

    Example:<\/strong>
    \n<script src=\"app.js\" async><\/script><\/code>
    \n<script src=\"app.js\" defer><\/script><\/code><\/p>\n<\/div>\n\n

    Q23. What is the purpose of the <!DOCTYPE html> declaration?<\/strong><\/h3>\n
    \n

    <!DOCTYPE html><\/code> tells the browser that the document uses HTML5. It helps the browser render the page in standards mode instead of quirks mode. This is a common interview question because it checks whether you understand the basic structure of a valid HTML document.<\/p>\n

    Example:<\/strong>
    \n<!DOCTYPE html><\/code>
    \n<html lang=\"en\">...<\/html><\/code><\/p>\n<\/div>\n\n

    Q24. What is the difference between cookies, localStorage, and sessionStorage?<\/strong><\/h3>\n
    \n

    All three store data on the client-side but differ in size, persistence, and purpose. Cookies<\/strong> are small and often used for server communication, limited to ~4KB. localStorage<\/strong> allows ~5\u201310MB of persistent storage. sessionStorage<\/strong> is similar to localStorage but clears when the browser tab closes.<\/p>\n

    Example:<\/strong>
    \ndocument.cookie=\"user=John\";<\/code>
    \nlocalStorage.setItem(\"theme\",\"dark\");<\/code><\/p>\n<\/div>\n\n

    Q25. How do you optimize HTML for SEO?<\/strong><\/h3>\n
    \n

    Optimising HTML for SEO involves proper use of semantic elements, title and meta descriptions, header tags in hierarchy, alt attributes for images, clean URLs, and structured data. This ensures better crawling and ranking by search engines.<\/p>\n

    Example:<\/strong>
    \n<h1>Best HTML Interview Questions<\/h1><\/code>
    \n<img src=\"html.png\" alt=\"HTML tutorial\"><\/code><\/p>\n<\/div>\n\n

    Q26. What are custom data attributes in HTML5?<\/strong><\/h3>\n
    \n

    Custom data attributes allow developers to store extra information directly in HTML elements without cluttering the DOM. They are defined as data-*<\/code> attributes and can be accessed via JavaScript for dynamic functionality.<\/p>\n

    Example:<\/strong>
    \n<div data-user=\"123\" data-role=\"admin\">John<\/div><\/code>
    \nelement.dataset.user<\/code> \u2192 “123”<\/p>\n<\/div>\n\n

    Q27. What are web components in HTML5?<\/strong><\/h3>\n
    \n

    Web Components are reusable custom elements with encapsulated functionality. They use Shadow DOM, Custom Elements, and HTML Templates to build modular, maintainable web apps without external frameworks.<\/p>\n

    Example:<\/strong>
    \nclass MyButton extends HTMLElement } customElements.define(\"my-btn\", MyButton);<\/code><\/p>\n<\/div>\n\n

    Q28. Explain progressive rendering in HTML.<\/strong><\/h3>\n
    \n

    Progressive rendering refers to techniques that improve perceived load speed by displaying content as it becomes available. This includes lazy loading images, using <link rel=\"preload\"><\/code>, and rendering above-the-fold content early.<\/p>\n

    Example:<\/strong>
    \n<img src=\"large.jpg\" loading=\"lazy\"><\/code><\/p>\n<\/div>\n\n

    Q29. What is the difference between inline frames (iframes) and object\/embed tags?<\/strong><\/h3>\n
    \n

    Iframes<\/strong> embed another HTML document within the page. Object\/Embed<\/strong> tags are used for embedding external resources like PDFs, Flash (legacy), or media. Iframes are most commonly used today.<\/p>\n

    Example:<\/strong>
    \n<iframe src=\"page.html\"><\/iframe><\/code><\/p>\n<\/div>\n\n

    Q30. How do you ensure cross-browser compatibility in HTML?<\/strong><\/h3>\n
    \n

    Cross-browser compatibility ensures a website functions consistently across Chrome, Firefox, Safari, and Edge. Developers achieve this by using semantic HTML, testing with modern tools, adding polyfills for unsupported features, and avoiding deprecated tags.<\/p>\n

    Example:<\/strong>
    \nUsing CSS resets and testing HTML5 features with Modernizr<\/code> helps detect and patch missing browser capabilities.<\/p>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n

    Read Also: PHP OOPS Interview Questions and Sample Answers<\/a><\/strong><\/p>\n\n\n\n

    Scenario-Based HTML Interview Questions<\/h2>\n\n

    Q31. What is the purpose of the <noscript> tag in HTML?<\/strong><\/h3>\n
    \n

    The <noscript><\/code> tag provides fallback content for users whose browsers do not support JavaScript or have it disabled. It is useful for accessibility, graceful degradation, and sometimes for ensuring critical information is still visible.<\/p>\n

    Example:<\/strong>
    \n<noscript>Please enable JavaScript to use this feature.<\/noscript><\/code><\/p>\n<\/div>\n\n

    Q32. What is the difference between the <picture> tag and the <img> tag?<\/strong><\/h3>\n
    \n

    <img><\/code> displays a single image resource, while <picture><\/code> lets you define multiple image sources for different screen sizes or formats. This is useful for responsive design and performance optimisation.<\/p>\n

    Example:<\/strong>
    \n<picture>
    <source srcset=\"image.webp\" type=\"image\/webp\">
    <img src=\"image.jpg\" alt=\"Sample\">
    <\/picture><\/code><\/p>\n<\/div>\n\n

    Q33. How would you implement accessibility in an HTML form?<\/strong><\/h3>\n
    \n

    Accessibility in forms is achieved by associating labels with inputs, using ARIA attributes where needed, and ensuring error messages are descriptive. Always use the <label><\/code> tag, proper alt<\/code> text, and keyboard navigation support.<\/p>\n

    Example:<\/strong>
    \n<label for=\"email\">Email Address<\/label> <input id=\"email\" type=\"email\" required aria-required=\"true\"><\/code><\/p>\n<\/div>\n\n

    Q34. You notice duplicate HTML IDs in a large project. How would you handle it?<\/strong><\/h3>\n
    \n

    IDs must be unique per page. Duplicates cause issues with CSS targeting, JavaScript DOM manipulation, and accessibility. To resolve this, replace duplicate IDs with classes if multiple elements share styles, or dynamically assign unique IDs where scripting is required.<\/p>\n

    Example:<\/strong>
    \nInstead of multiple <div id=\"box\"><\/code>, use <div class=\"box\"><\/code>.<\/p>\n<\/div>\n\n

    Q35. How do you handle SEO if a website is built mostly with JavaScript rendering?<\/strong><\/h3>\n
    \n

    For SEO, search engines should access meaningful HTML content. With heavy JavaScript frameworks, always provide server-side rendering (SSR) or static HTML fallbacks. Include semantic HTML tags, meta descriptions, and structured data for crawlers.<\/p>\n

    Example:<\/strong>
    \nImplement <noscript><\/code> fallback or use Next.js\/Nuxt.js for server-rendered HTML output.<\/p>\n<\/div>\n\n

    Q36. How would you improve page load performance for a form-heavy page?<\/strong><\/h3>\n
    \n

    Optimise form-heavy pages by reducing unnecessary fields, using client-side validation, deferring non-critical scripts, and compressing assets. Group related fields using <fieldset><\/code> and ensure proper use of semantic elements for clarity and performance.<\/p>\n

    Example:<\/strong>
    \n<fieldset><legend>Contact Details<\/legend> ... <\/fieldset><\/code><\/p>\n<\/div>\n\n

    Q37. A client asks for embedded YouTube videos without slowing down the page. What would you do?<\/strong><\/h3>\n
    \n

    Embedding multiple YouTube iframes can hurt performance. Instead, use a lazy-load technique where only a thumbnail loads initially, and the actual iframe loads on user interaction.<\/p>\n

    Example:<\/strong>
    \nLoad a preview image (img<\/code>) and replace it with the iframe when clicked using JavaScript.<\/p>\n<\/div>\n\n

    Q38. How would you fix layout shifts caused by ads or images in HTML pages?<\/strong><\/h3>\n
    \n

    Cumulative Layout Shift (CLS) is a Core Web Vital metric. Prevent layout shifts by defining explicit width and height for images and ad slots. This reserves space before assets load.<\/p>\n

    Example:<\/strong>
    \n<img src=\"banner.jpg\" width=\"728\" height=\"90\" alt=\"Ad\"><\/code><\/p>\n<\/div>\n\n

    Q39. How would you handle multilingual websites in HTML?<\/strong><\/h3>\n
    \n

    Use the lang<\/code> attribute to define the document language. For multilingual content, set lang<\/code> on individual elements. Ensure proper encoding (UTF-8) and consider hreflang<\/code> for SEO when serving alternate versions.<\/p>\n

    Example:<\/strong>
    \n<html lang=\"en\"><\/code> vs <span lang=\"fr\">Bonjour<\/span><\/code><\/p>\n<\/div>\n\n

    Q40. You need to design an accessible table. How would you implement it?<\/strong><\/h3>\n
    \n

    Accessible tables require clear headers, captions, and scope attributes for screen readers. Use <caption><\/code> for context, <th><\/code> for headers, and scope<\/code> attributes to define relationships.<\/p>\n

    Example:<\/strong>
    \n<table><caption>Employee List<\/caption><tr><th scope=\"col\">Name<\/th><\/tr><\/table><\/code><\/p>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n

    Read Also: React.js + Next.js Interview Questions and Answers<\/a><\/strong><\/p>\n\n\n\n

    HTML5-Specific Interview Questions<\/h2>\n\n

    Q41. What are the new semantic elements introduced in HTML5?<\/strong><\/h3>\n
    \n

    HTML5 introduced semantic elements that provide meaning to the document structure, making it easier for browsers, developers, and search engines to interpret content. These include <header><\/code>, <footer><\/code>, <article><\/code>, <section><\/code>, <aside><\/code>, and <nav><\/code>. They replace generic <div><\/code> elements and improve SEO and accessibility.<\/p>\n

    Example:<\/strong>
    \n<article><h2>Blog Post<\/h2><p>Content here<\/p><\/article><\/code><\/p>\n<\/div>\n\n

    Q42. How does the <canvas> element work in HTML5?<\/strong><\/h3>\n
    \n

    The <canvas><\/code> element provides a drawing surface that allows developers to render graphics, charts, or animations dynamically using JavaScript. Unlike SVG, Canvas is pixel-based and well-suited for real-time rendering like gaming, image processing, or interactive dashboards.<\/p>\n

    Example:<\/strong>
    \n<canvas id=\"myCanvas\" width=\"200\" height=\"100\"><\/canvas><\/code>
    \nvar ctx=document.getElementById(\"myCanvas\").getContext(\"2d\"); ctx.fillRect(20,20,150,60);<\/code><\/p>\n<\/div>\n\n

    Q43. What are HTML5 form enhancements?<\/strong><\/h3>\n
    \n

    HTML5 improved form handling with new input types (email<\/code>, url<\/code>, number<\/code>, date<\/code>, color<\/code>), attributes (placeholder<\/code>, required<\/code>, pattern<\/code>, min<\/code>\/max<\/code>), and built-in validation. This reduces the need for JavaScript while enhancing UX and accessibility.<\/p>\n

    Example:<\/strong>
    \n<input type=\"number\" min=\"1\" max=\"10\" required><\/code><\/p>\n<\/div>\n\n

    Q44. How does HTML5 support offline storage?<\/strong><\/h3>\n
    \n

    HTML5 supports offline-related capabilities mainly through the Web Storage API<\/strong>, which includes localStorage<\/code> and sessionStorage<\/code>. For modern offline web apps, developers now rely on Service Workers<\/strong> and caching strategies rather than the old Application Cache, which is deprecated.<\/p>\n

    Example:<\/strong>
    \nlocalStorage.setItem(\"theme\",\"dark\");<\/code>
    \nThis lets the browser store small pieces of data locally.<\/p>\n<\/div>\n\n

    Q45. What is the difference between HTML5 audio and video tags?<\/strong><\/h3>\n
    \n

    HTML5 introduced <audio><\/code> and <video><\/code> elements, allowing native embedding of multimedia without plugins. Both support attributes like controls<\/code>, autoplay<\/code>, loop<\/code>, and muted<\/code>. Video can specify multiple sources for browser compatibility.<\/p>\n

    Example:<\/strong>
    \n<video width=\"400\" controls><source src=\"movie.mp4\" type=\"video\/mp4\"><\/video><\/code><\/p>\n<\/div>\n\n

    Q46. What is the difference between Canvas and SVG in HTML5?<\/strong><\/h3>\n
    \n

    Canvas<\/strong> is pixel-based and best for high-performance graphics updated frequently (games, charts). SVG<\/strong> is vector-based and scalable, making it ideal for static images, logos, or charts that need resolution independence. Canvas requires scripting, while SVG is declarative.<\/p>\n

    Example:<\/strong>
    \nCanvas: ctx.arc(75,75,50,0,2*Math.PI); ctx.stroke();<\/code>
    \nSVG: <circle cx=\"75\" cy=\"75\" r=\"50\" stroke=\"black\" fill=\"red\"\/><\/code><\/p>\n<\/div>\n\n

    Q47. How does HTML5 support geolocation?<\/strong><\/h3>\n
    \n

    The Geolocation API in HTML5 allows web apps to request a user\u2019s location (with consent). This enables location-aware services like maps, weather apps, and local search results. Accuracy depends on GPS, Wi-Fi, or IP address.<\/p>\n

    Example:<\/strong>
    \nnavigator.geolocation.getCurrentPosition(function(pos) );<\/code><\/p>\n<\/div>\n\n

    Q48. What are HTML5 web workers?<\/strong><\/h3>\n
    \n

    Web Workers in HTML5 enable background JavaScript execution without blocking the main UI thread. They are useful for heavy computations like image processing, large data parsing, or running algorithms while keeping the interface responsive.<\/p>\n

    Example:<\/strong>
    \nvar worker = new Worker(\"worker.js\"); worker.postMessage(\"start\");<\/code><\/p>\n<\/div>\n\n

    Q49. How does HTML5 improve accessibility?<\/strong><\/h3>\n
    \n

    HTML5\u2019s semantic tags improve accessibility by giving meaning to page sections. Combined with ARIA roles and attributes, developers can create web pages that are screen-reader friendly and compliant with WCAG standards. Proper use of <header><\/code>, <nav><\/code>, and <main><\/code> enhances navigation for assistive technologies.<\/p>\n

    Example:<\/strong>
    \n<main role=\"main\"><h1>Article Title<\/h1><\/main><\/code><\/p>\n<\/div>\n\n

    Q50. How does HTML5 handle responsive design?<\/strong><\/h3>\n
    \n

    Responsive design in HTML5 is facilitated by the <meta name=\"viewport\"><\/code> tag, semantic structure, and media queries in CSS. HTML5\u2019s fluid grid support, responsive images (srcset<\/code> and sizes<\/code>), and modern layout techniques help build mobile-first applications.<\/p>\n

    Example:<\/strong>
    \n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>
    \n<img src=\"small.jpg\" srcset=\"large.jpg 1024w, medium.jpg 640w\" sizes=\"(max-width: 600px) 480px, 1024px\"><\/code><\/p>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n

    Read Also: HTML Interview Question for Experienced Professionals<\/a><\/strong><\/p>\n\n\n\n

    Checklist: Quick Prep Before Your HTML Interview<\/h2>\n\n
    \n

    \u2714\ufe0f HTML Interview Quick Prep Checklist<\/strong><\/p>\n