Here are 50 HTML interview questions and answers suitable for experienced candidates:
1. What are the new features introduced in HTML5 compared to previous versions?
- HTML5 introduced several new features such as semantic elements (`<header>`, `<nav>`, `<footer>`), multimedia elements (`<video>`, `<audio>`), form enhancements (`<input>` types, validation), canvas for graphics, local storage, and more.
2. Explain the purpose of the `<canvas>` element in HTML5.
- The `<canvas>` element provides a space on a web page where JavaScript can be used to draw graphics, animations, or other visualizations dynamically.
3. What is the purpose of the `contenteditable` attribute in HTML?
- The `contenteditable` attribute allows users to edit the content of an element directly within the web page, such as paragraphs, divs, or other HTML elements.
4. Explain the role of the `defer` and `async` attributes in `<script>` tags.
- The `defer` attribute postpones script execution until after the document has been parsed, while the `async` attribute allows the script to be executed asynchronously, without blocking the rendering of the page.
5. How does the HTML5 Geolocation API work?
- The Geolocation API allows browsers to obtain the geographical location of a device. It uses information from GPS, Wi-Fi, IP address, and cellular networks to determine the device's location.
6. What is the purpose of the `<article>` element in HTML5?
- The `<article>` element is used to define independent, self-contained content within a document, such as blog posts, news articles, or forum posts.
7. Explain the purpose of the `picture` element in HTML5.
- The `<picture>` element provides a way to specify multiple sources for an image based on different conditions such as screen size, resolution, or media queries, allowing for responsive images.
8. What is the role of the `srcset` attribute in the `<img>` tag?
- The `srcset` attribute allows developers to specify multiple sources for an image and their respective sizes or pixel densities, enabling the browser to choose the most appropriate image to display based on the user's device.
9. What is the purpose of the `data-*` attributes in HTML5?
- The `data-*` attributes allow developers to store custom data attributes directly within HTML elements. These attributes can be used for various purposes, such as storing extra information for JavaScript to access.
10. How does the HTML5 Drag and Drop API work?
- The Drag and Drop API provides a way to make elements draggable and define drop zones for them. It involves events like `dragstart`, `dragenter`, `dragover`, `dragleave`, and `drop` to handle drag-and-drop interactions.
11. What is the role of the `role` attribute in HTML5 accessibility?
- The `role` attribute specifies the semantic role of an element, helping assistive technologies like screen readers understand the purpose and function of the element for improved accessibility.
12. Explain the purpose of the `<progress>` and `<meter>` elements in HTML5.
- `<progress>` is used to represent the progress of a task, such as file uploads or downloads, while `<meter>` is used to represent measurements within a known range, such as disk usage or temperature.
13. What is the purpose of the `srcdoc` attribute in the `<iframe>` tag?
- The `srcdoc` attribute allows developers to specify inline HTML content directly within the `<iframe>` element, rather than linking to an external document.
14. Explain the purpose of the `manifest` attribute in HTML5.
- The `manifest` attribute is used to specify the URL of the cache manifest file, which enables web applications to work offline by caching resources such as HTML files, CSS, JavaScript, and images.
15. What is the purpose of the `sandbox` attribute in the `<iframe>` tag?
- The `sandbox` attribute restricts the capabilities of the content within the `<iframe>` for security purposes, such as preventing it from executing JavaScript, opening pop-up windows, or accessing cookies.
16. Explain the purpose of the `download` attribute in the `<a>` tag in HTML5.
- The `download` attribute, when added to an anchor (`<a>`) tag, specifies that the target resource should be downloaded when the link is clicked, rather than navigating to it.
17. What is the purpose of the `autofocus` attribute in HTML5?
- The `autofocus` attribute automatically focuses on an input field or button when the page loads, allowing users to start interacting with the form or interface without having to manually select the field.
18. Explain the purpose of the `<details>` and `<summary>` elements in HTML5.
- The `<details>` element is used to create a disclosure widget that can be toggled to show or hide additional content, and the `<summary>` element provides a summary or title for the details.
19. What is the purpose of the `spellcheck` attribute in HTML5?
- The `spellcheck` attribute enables or disables spell checking for text input fields or contenteditable elements, allowing users to check for spelling errors as they type.
20. Explain the purpose of the `autocomplete` attribute in the `<form>` tag in HTML5.
- The `autocomplete` attribute specifies whether a form should have autocomplete enabled or disabled for input fields, helping users fill out forms more quickly and accurately by suggesting previously entered values.
21. What is the purpose of the `<output>` element in HTML5?
- The `<output>` element is used to represent the result of a calculation or the output of a script, providing a way to display dynamic content generated by the browser or client-side scripts.
22. Explain the purpose of the `ping` attribute in HTML5.
- The `ping` attribute, when added to an anchor (`<a>`) tag, specifies a list of URLs to be notified with a `POST` request when the link is clicked, allowing for tracking of link clicks or logging analytics data.
23. What is the purpose of the `<track>` element in HTML5?
- The `<track>` element is used to specify timed text tracks for video or audio elements, such as subtitles, captions, descriptions, chapters, or metadata.
24. Explain the purpose of the `<time>` element in HTML5.
- The `<time>` element represents a specific period in time or a range of dates, allowing developers to mark up dates, times, or durations in a machine-readable format for improved semantics and accessibility.
25. What is the purpose of the `formaction` attribute in HTML5?
- The `formaction` attribute, when added to a button or input field within a form, specifies the URL where the form data should be submitted when that particular button or input field is clicked, overriding the form's `action` attribute.
26. Explain the purpose of the `formmethod` attribute in HTML5.
- The `formmethod` attribute specifies the HTTP method (e.g.,`GET` or `POST`) to be used when submitting a form, overriding the form's default method specified in the `method` attribute.
27. What is the purpose of the `formenctype` attribute in HTML5?
- The `formenctype` attribute specifies the encoding type to be used when submitting form data, overriding the form's default enctype specified in the `enctype` attribute. Common values include `application/x-www-form-urlencoded`, `multipart/form-data`, and `text/plain`.
28. Explain the purpose of the `<dialog>` element in HTML5.
- The `<dialog>` element represents a dialog box or modal window within a web application, providing a way to present content or prompts that require user interaction in a separate, overlaid window.
29. What is the purpose of the `manifest` attribute in HTML5?
- The `manifest` attribute specifies the URL of the cache manifest file, enabling developers to create offline web applications by caching resources like HTML files, CSS, JavaScript, and images for use when the device is not connected to the internet.
30. Explain the purpose of the `<keygen>` element in HTML5.
- The `<keygen>` element is used to generate key pairs for forms, typically used in conjunction with SSL to provide secure communication between the client and server. However, it has been deprecated in favor of more secure methods like Web Crypto API.
31. What is the purpose of the `picture` element in HTML5?
- The `<picture>` element provides a way to specify multiple sources for an image based on different conditions such as screen size, resolution, or media queries, allowing for responsive images that adapt to various devices and screen sizes.
32. Explain the purpose of the `srcset` attribute in the `<img>` tag in HTML5.
- The `srcset` attribute allows developers to specify multiple sources for an image and their respective sizes or pixel densities, enabling the browser to choose the most appropriate image to display based on the user's device and screen resolution for improved performance and image quality.
33. What is the purpose of the `sizes` attribute in the `<img>` tag in HTML5?
- The `sizes` attribute specifies the sizes of the images in the `srcset` attribute, providing hints to the browser about the layout and viewport sizes for selecting the appropriate image source to download and display.
34. Explain the purpose of the `<menu>` and `<menuitem>` elements in HTML5.
- The `<menu>` element represents a list of commands or options for users to interact with, such as a context menu or a list of actions. The `<menuitem>` element represents a single command or option within a menu, typically used within a `<menu>` element.
35.What is the purpose of the `download` attribute in HTML5?
- The `download` attribute, when added to an anchor (`<a>`) tag, specifies that the target resource should be downloaded when the link is clicked, rather than navigating to it, allowing users to download files like images, documents, or media files directly from the web page.
36. Explain the purpose of the `ping` attribute in HTML5.
- The `ping` attribute, when added to an anchor (`<a>`) tag, specifies a list of URLs to be notified with a `POST` request when the link is clicked, allowing for tracking of link clicks or logging analytics data.
37. What is the purpose of the `formaction` attribute in HTML5?
- The `formaction` attribute, when added to a button or input field within a form, specifies the URL where the form data should be submitted when that particular button or input field is clicked, overriding the form's `action` attribute.
38. Explain the purpose of the `formmethod` attribute in HTML5.
- The `formmethod` attribute specifies the HTTP method (e.g., `GET` or `POST`) to be used when submitting a form, overriding the form's default method specified in the `method` attribute.
39. What is the purpose of the `formenctype` attribute in HTML5.
- The `formenctype` attribute specifies the encoding type to be used when submitting form data, overriding the form's default enctype specified in the `enctype` attribute. Common values include `application/x-www-form-urlencoded`, `multipart/form-data`, and `text/plain`.
40. Explain the purpose of the `<dialog>` element in HTML5.
- The `<dialog>` element represents a dialog box or modal window within a web application, providing a way to present content or prompts that require user interaction in a separate, overlaid window.
41. What is the purpose of the `manifest` attribute in HTML5?
- The `manifest` attribute specifies the URL of the cache manifest file, enabling developers to create offline web applications by caching resources like HTML files, CSS, JavaScript, and images for use when the device is not connected to the internet.
42. Explain the purpose of the `<keygen>` element in HTML5.
- The `<keygen>` element is used to generate key pairs for forms, typically used in conjunction with SSL to provide secure communication between the client and server. However, it has been deprecated in favor of more secure methods like Web Crypto API.
43. What is the purpose of the `ping` attribute in HTML5?
- The `ping` attribute, when added to an anchor (`<a>`) tag, specifies a list of URLs to be notified with a `POST` request when the link is clicked, allowing for tracking of link clicks or logging analytics data.
44. Explain the purpose of the `ismap` attribute in HTML5.
- The `ismap` attribute, when added to an `<img>` tag, specifies that the image is a server-side image map, meaning that when the image is clicked, the coordinates of the click are sent to the server for processing.
45. What is the purpose of the `contenteditable` attribute in HTML5?
- The `contenteditable` attribute allows users to edit the content of an element directly within the web page, such as paragraphs, divs, or other HTML elements.
46. Explain the purpose of the `hidden` attribute in HTML5.
- The `hidden` attribute is used to hide an element from the user interface. It can be applied to any HTML element to prevent it from being displayed on the web page.
47. What is the purpose of the `<ruby>` element in HTML5?
- The `<ruby>` element is used to annotate text with pronunciation or semantic annotations, typically used in East Asian typography for displaying phonetic annotations alongside ideographic characters.
48. Explain the purpose of the `<template>` element in HTML5.
- The `<template>` element provides a mechanism for defining client-side templates that can be cloned and inserted into the document dynamically using JavaScript, allowing for efficient rendering of repetitive or complex UI components.
49. What is the purpose of the `scrolling` attribute in HTML5?
- The `scrolling` attribute, when added to an `<iframe>` tag, specifies whether or not the content within the iframe should have scrollbars. It can have values of "yes", "no", or "auto".
50. Explain the purpose of the `translate` attribute in HTML5.
- The `translate` attribute specifies whether the content of an element should be translated by external translation services like Google Translate. It can have values of "yes" or "no".