Advanced HTML Interview Questions

The <canvas> element is used to draw graphics, animations, games, charts, and images using JavaScript.

• Bitmap-based graphics
• Controlled through JavaScript
• Used for animations and games
• Supports 2D and 3D rendering
  

SVG (Scalable Vector Graphics) is used to create vector-based graphics in HTML.

• XML-based graphics
• Scalable without quality loss
• Supports animations and interactivity
• Easy to style with CSS
  
  

The <picture> element provides multiple image sources for responsive images.

• Helps load different images for different screen sizes
• Improves responsiveness
• Saves bandwidth
  

Responsive images allow websites to display different image sizes based on the screen size, resolution, and device type. This helps improve website performance, loading speed, and user experience on mobiles, tablets, and desktops.

• Loads suitable images for different screen sizes
• Reduces bandwidth usage
• Improves page loading speed
• Enhances mobile responsiveness
• Supports high-resolution displays
• Improves SEO and performance
  

• srcset attribute
• sizes attribute
• <picture> element
  

Lazy loading is a technique in HTML that delays loading images, videos, or other resources until they are needed on the screen. Instead of loading everything when the webpage opens, the browser loads content only when the user scrolls near it. This improves website performance, reduces bandwidth usage, and makes pages load faster.

• Faster page loading
• Saves internet data
• Reduces initial page size
• Improves website performance
• Better user experience
  

Images can be lazy-loaded using the loading="lazy" attribute or JavaScript techniques like the Intersection Observer API. Native lazy loading is the easiest method and is supported in modern browsers.

• Native lazy loading
• JavaScript lazy loading
• Intersection Observer API
  

Web Components are reusable and customizable HTML components used to create modular web applications. They allow developers to build their own HTML tags with separate functionality and styling. Web Components help improve code reusability, maintainability, and encapsulation.
Main Parts of Web component

• Custom Elements
• Shadow DOM
• HTML Templates
  
  Benefits

• Reusable UI components
• Encapsulated styles
• Cleaner code structure
• Better maintainability
  
  

Shadow DOM is a feature that creates a hidden and isolated DOM tree inside an HTML element. It prevents external CSS and JavaScript from affecting the internal structure of a component. Shadow DOM is mainly used in Web Components to achieve style and behavior encapsulation

• Encapsulated styling
• Prevents CSS conflicts
• Improves component isolation
• Better maintainability
  

Custom elements are user-defined HTML elements created using JavaScript. They allow developers to create reusable HTML tags with custom behavior and functionality.

• Reusable HTML components
• Custom functionality
• Better code organization
• Works with Web Components
  

The <template> tag is used to store reusable HTML code that is hidden until it is activated using JavaScript. Content inside the template is not rendered immediately on the webpage

• Stores reusable HTML
• Hidden by default
• Improves performance
• Useful for dynamic content
  

Microdata is a way of adding structured metadata to HTML elements so search engines can better understand webpage content. It uses special attributes such as itemscope, itemtype, and itemprop.

• Adds structured information
• Helps search engines understand content
• Improves SEO
• Used for rich snippets
  

Microdata helps SEO by providing structured information to search engines. It allows search engines to display rich results such as ratings, reviews, product prices, and event details directly in search results.
      Benefits

• Better search visibility
• Rich search results
• Improved indexing
• Higher click-through rates

Structured data is standardized information added to webpages to help search engines understand the page content. Schema.org is the most commonly used vocabulary for structured data.

• Improves SEO
• Supports rich snippets
• Better content understanding
• Used by Google and other search engines
  

HTML helps SEO by providing proper webpage structure and semantic meaning. Search engines use HTML tags to understand page content, headings, images, and links.

• Semantic tags
• Proper headings
• Meta tags
• Alt text for images
• Structured data
  

Meta tags provide information about a webpage to search engines and browsers. They are placed inside the <head> section of an HTML document.

• Description
• Keywords
• Viewport
• Robots
  

A canonical URL is the preferred version of a webpage specified to search engines when multiple URLs contain the same or very similar content. It helps prevent duplicate content problems in SEO by telling search engines which page should be indexed and ranked. Without canonical URLs, search engines may get confused between duplicate pages, which can reduce search rankings.

• Prevents duplicate content issues
• Improves SEO ranking
• Helps search engines identify the main page
• Consolidates ranking signal
  

Open Graph metadata is a set of meta tags used to control how webpages appear when shared on social media platforms like Facebook, LinkedIn, and WhatsApp. It allows developers to define titles, descriptions, images, and URLs for shared links.

• Custom social media previews
• Better appearance on social platforms
• Improves user engagement
• Controls title and image display
  

Progressive enhancement is a web development approach where basic functionality is provided first for all users and devices, and advanced features are added later for modern browsers. This ensures that websites remain accessible even if certain technologies are unsupported.

• Basic functionality works everywhere
• Better accessibility
• Supports older browsers
• Improves user experience gradually

Basic HTML content works even if JavaScript fails.

Graceful degradation is a development approach where a fully advanced website is built first, and fallback support is provided for older browsers or devices. The website may lose some advanced features on unsupported browsers but still remains usable.

• Advanced design first
• Fallback support for old browsers
• Maintains usability
• Reduces complete website failure
  

  Feature	Progressive Enhancement	Graceful Degradation
  Approach	Basic first	Advanced first
  Browser Support	Older browsers supported naturally	Older browsers get reduced experience
  Main Focus	Accessibility	Feature-rich experience
  Strategy	Add enhancements later	Remove unsupported features gracefully

The critical rendering path is the sequence of steps browsers follow to convert HTML, CSS, and JavaScript into visible pixels on the screen. Optimizing this process improves page loading speed and rendering performance.
   Steps in Critical Rendering

1. HTML parsing
2. DOM creation
3. CSS parsing
4. Render tree creation
5. Layout calculation
6. Painting pixels
   
   Benefits

• Faster page rendering
• Better performance
• Improved user experience

HTML parsing is the process where browsers read HTML code and convert it into a structured Document Object Model (DOM) tree. The browser interprets tags, attributes, and content during parsing.

• Converts HTML into DOM nodes
• Creates webpage structure
• First step in rendering
  

DOM rendering is the process of visually displaying the DOM structure on the webpage. After HTML and CSS are processed, the browser creates the render tree and paints the elements on the screen.

• Displays webpage content
• Uses DOM and CSSOM
• Responsible for visual output
  
  

Preload and prefetch are resource hint techniques used in HTML to improve website performance and loading speed. They help browsers decide which resources should be loaded early and which resources can be loaded later in the background. These techniques reduce loading delays and improve user experience.

preload is used for important resources required for the current webpage, while prefetch is used for resources that may be needed for future pages or navigation.

he <dialog> element is an HTML5 element used to create popup windows, modal dialogs, confirmation boxes, forms, and interactive popups directly in HTML. It provides built-in support for modal behavior without requiring external libraries.

A dialog can appear either:

• As a normal popup
• As a modal popup that blocks background interaction
  
  Features

• Creates popup windows
• Supports modal dialogs
• Built-in open and close methods
• Easy form integration
• Improves user interaction 
  

The showModal() and close() methods are JavaScript methods used to control the visibility of <dialog> elements

showModal() opens the dialog as a modal popup. While the dialog is open, users cannot interact with the background page.

• Creates modal popup
• Blocks background interaction
• Focus moves into dialog automatically
  
  

close() closes the currently opened dialog box.

• Hides dialog
• Restores background interaction
• Ends modal state

The tabindex attribute controls keyboard navigation order between HTML elements. It helps users move through a webpage using the Tab key and improves accessibility.

• 0 → Normal tab order
• -1 → Focus only through JavaScript
• Positive value → Custom tab order
  

ARIA (Accessible Rich Internet Applications) roles provide additional accessibility information to screen readers and assistive technologies. They help users with disabilities understand the purpose of webpage elements when semantic HTML is not enough. ARIA improves navigation and interaction for accessible web applications. Common roles include button, dialog, navigation, and alert.

• Improves accessibility
• Helps screen readers
• Used in custom UI components
• Enhances navigation
  

Accessibility best practices ensure websites are usable by everyone, including people with disabilities. Developers should use semantic HTML, proper labels, keyboard navigation, and alt text for images. Websites should also maintain good color contrast and support screen readers. Accessibility improves usability, inclusiveness, and SEO.

• Use semantic HTML
• Add alt text
• Ensure keyboard navigation
• Maintain proper contrast
  

WCAG (Web Content Accessibility Guidelines) are international standards created to make websites accessible to people with disabilities. These guidelines are developed by W3C and are followed worldwide for accessible web design. WCAG focuses on four main principles: perceivable, operable, understandable, and robust. Following WCAG improves usability and helps websites meet accessibility laws.

• International accessibility standards
• Improves usability
• Supports disabled users
• Encourages inclusive design

Server-Sent Events (SSE) allow servers to continuously send real-time updates to browsers over a single HTTP connection. SSE supports one-way communication where the server sends updates to the client automatically. It is commonly used for live notifications, stock updates, and news feeds. SSE is simpler than WebSocket for applications that only require server-to-client communication.

• Real-time updates
• One-way communication
• Lightweight connection
• Easy implementation
  

Web Workers allow JavaScript code to run in the background without blocking the main webpage interface. They are useful for heavy calculations, data processing, and background tasks. Web Workers improve performance by preventing the UI from freezing during complex operations. They run independently from the main JavaScript thread.

•  Background processing
• Prevents UI freezing
• Improves performance
• Supports multitasking
  

WebSocket is a communication protocol that enables real-time two-way communication between the browser and the server. Unlike normal HTTP requests, WebSocket keeps a continuous connection open for instant data exchange. It is commonly used in chat applications, live games, and notification systems. WebSocket provides faster and low-latency communication.

• Two-way communication
• Persistent connection
• Real-time interaction
• Low latency
  

The sandbox attribute is used with iframes to restrict actions inside embedded webpages for security purposes. It prevents harmful scripts, popups, and form submissions from affecting the main website. Developers can selectively allow certain permissions using sandbox values. This improves website security when embedding external content.

• Restricts iframe actions
• Blocks harmful scripts
• Improves security
• Controls permissions
  

Data attributes allow developers to store custom information directly inside HTML elements using the data-* format. They are commonly used to store IDs, settings, or dynamic values that JavaScript can access later. Data attributes help keep HTML organized without using non-standard attributes. They are useful for interactive and dynamic webpages.

• Stores custom data
• Easy JavaScript access
• Helps dynamic UI
• Keeps HTML organized
  

The Drag and Drop API allows users to drag HTML elements and drop them into specific target areas on a webpage. It is commonly used for file uploads, task managers, games, and interactive user interfaces. HTML5 provides built-in support for drag-and-drop functionality using JavaScript events. This makes web applications more interactive and user-friendly.

• Creates interactive UI
• Supports file uploads
• Uses drag and drop events
• Improves user experience 
  

The Geolocation API allows websites to access the user’s geographic location with permission. It is commonly used in maps, food delivery apps, ride-booking services, and nearby location searches. The browser asks the user for permission before sharing location data. It works using GPS, Wi-Fi, or network information.

• Accesses user location
• Requires user permission
• Used in maps and navigation
• Supports nearby services
  

HTML5 supports multimedia content such as audio and video without requiring plugins like Flash. Different browsers support different multimedia formats, so developers often provide multiple file types. Common video formats include MP4, WebM, and Ogg, while common audio formats include MP3, WAV, and Ogg. HTML5 multimedia improves compatibility and performance.
 Video Format

• MP4
• WebM
• Ogg
  
  Audio format

• MP3
• WAV
• Ogg

The <video> tag is used to embed videos directly into webpages. HTML5 video supports controls such as play, pause, volume, and fullscreen without external plugins. Developers can provide multiple video formats for better browser compatibility. The controls attribute displays built-in video controls.

• Native video support
• No plugins required
• Supports multiple formats
• Built-in controls available
  

• • Native audio support
  • Built-in controls
  • Multiple format support
  • No plugins needed

The <track> tag is used inside the <video> or <audio> element to add subtitles, captions, or descriptions. It improves accessibility for users who are deaf or hard of hearing. The subtitles are usually stored in .vtt files. Multiple tracks can be added for different languages.

• Adds subtitles and captions
• Improves accessibility
• Supports multiple languages
• Used with video/audi
  

The crossorigin attribute controls how resources such as images, videos, scripts, and fonts are loaded from different origins. It is mainly used with Cross-Origin Resource Sharing (CORS) for security and permission handling. The attribute helps browsers decide whether credentials like cookies should be included. It is commonly used with external resources.

• Supports CORS
• Improves security
• Used with external resources
• Controls credentials sharing
  

An HTML manifest file is a JSON file used in Progressive Web Apps (PWAs) to define application details such as app name, icons, colors, and startup behavior. It allows websites to behave more like mobile applications. The manifest file helps users install the web app on their devices. It is an important part of modern web applications.

• Stores app information
• Used in PWAs
• Supports installable apps
• Defines icons and themes
  

A Progressive Web App (PWA) is a web application that behaves like a native mobile application. PWAs can work offline, send push notifications, and be installed on devices directly from the browser. They combine the advantages of websites and mobile apps. PWAs improve speed, reliability, and user engagement.

• Offline support
• Installable
• Push notifications
• Fast performance

Caching stores website files such as images, CSS, and JavaScript locally in the browser so pages load faster during future visits. It reduces network requests and improves performance. HTML5 caching techniques include browser caching and service worker caching. Cached resources help websites work even with slow internet connections.

• Faster loading
• Reduces network usage
• Improves performance
• Supports offline access 

A service worker is a background JavaScript file that runs separately from the webpage. It is mainly used for caching, offline support, push notifications, and background synchronization. Service workers are a core part of Progressive Web Apps. They improve reliability and performance even when internet connectivity is poor.

• Enables offline support
• Handles caching
• Supports push notifications
• Runs in background

HTML minification is the process of removing unnecessary spaces, comments, and formatting from HTML code to reduce file size. Smaller files load faster and improve website performance. Minification does not change webpage functionality. It is commonly used in production websites.

• Reduces file size
• Faster page loading
• Improves performance
• Removes unnecessary code

HTML performance can be optimized by reducing unnecessary code, optimizing resources, and improving loading efficiency. Developers should use compressed images, minified files, caching, and lazy loading techniques. Reducing DOM size and avoiding unused code also improves performance. Optimized websites load faster and provide a better user experience.

• Minify HTML
• Lazy-load images
• Use caching
• Optimize media files
• Reduce DOM elements 

SEO-friendly HTML structure uses semantic elements and proper hierarchy so search engines can easily understand webpage content. A well-structured page improves indexing and ranking. Important sections such as headers, navigation, and main content should use semantic tags. Proper heading order also improves SEO.

• Uses semantic tags
• Improves search indexing
• Better readability
• Helps accessibility
  

Semantic best practices involve using meaningful HTML elements according to their purpose. Developers should avoid unnecessary <div> tags and use tags like <article>, <section>, and <nav> properly. Semantic HTML improves readability, SEO, and accessibility. It also makes code easier to maintain.

• Use meaningful tags
• Maintain heading hierarchy
• Avoid unnecessary divs
• Improve accessibility

Accessibility testing checks whether websites are usable by people with disabilities. It ensures proper keyboard navigation, screen reader support, color contrast, and accessible forms. Accessibility testing improves inclusiveness and legal compliance. Tools such as Lighthouse and WAVE are commonly used.

• Tests accessibility features
• Supports disabled users
• Improves usability
• Ensures complianc

Cross-browser compatibility ensures that websites work correctly across different browsers like Chrome, Firefox, Safari, and Edge. Since browsers may interpret code differently, developers test websites on multiple platforms. Compatibility improves user experience for all users. Standard HTML, CSS, and JavaScript practices help maintain compatibility.

• Works across browsers
• Improves consistency
• Requires browser testing
• Uses standard web technologies 

Global attributes are attributes that can be used on almost all HTML elements. They provide additional information or functionality such as styling, identification, and accessibility. Common global attributes include id, class, style, title, and hidden. These attributes make elements easier to manage and customize.

• id
• class
• style
• title
• hidden


Form autofill and autocomplete allow browsers to automatically fill form fields using previously saved user information such as names, emails, passwords, and addresses. This improves user experience by saving time and reducing typing effort. The autocomplete attribute can enable or disable this feature for specific input fields or entire forms. It is commonly used in login pages, registration forms, and checkout forms.

• Saves user time
• Reduces typing effort
• Improves user experience
  

The novalidate attribute disables the browser’s default form validation. Normally, browsers check required fields and input formats before allowing form submission. When novalidate is added to a form, users can submit the form even if validation rules fail. Developers often use it when handling validation manually with JavaScript.

• Disables browser validation
• Allows custom validation
• Used with forms
• Helps JavaScript-based validation
  

The <output> element is used to display calculation results or dynamic values generated from user input. It is commonly used in forms, calculators, and interactive applications. The tag provides a semantic way to show computed results on a webpage. JavaScript is often used to update the output value dynamically.

• Displays calculation results
• Used in interactive forms
• Supports dynamic content
• Improves readability
  

Clean HTML code improves readability, maintainability, accessibility, and performance. Developers should use semantic elements, proper indentation, meaningful names, and avoid unnecessary code. Consistent formatting makes collaboration easier and reduces errors. Writing clean HTML also improves SEO and accessibility.

• Use semantic tags
• Maintain proper indentation
• Use meaningful names
• Avoid unnecessary divs
• Write accessible HTML
• Keep code organize
  

The hidden attribute is used to hide HTML elements from the webpage display. When an element has the hidden attribute, the browser does not show it on the screen until the attribute is removed using JavaScript or CSS. It is useful for temporarily hiding content, forms, messages, or sections that should appear later. Browsers automatically apply behavior similar to display:none for hidden elements.

•  Hides elements from display
• Useful for dynamic content
• Element is not visible to users
• Can be shown later using JavaScript