1. What is HTML5?
Answer: HTML5 is the fifth and latest major version of the HyperText Markup Language (HTML). It introduces new semantic elements, form controls, multimedia elements, and APIs for modern web development.
2. What are semantic elements in HTML5?
Answer: Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include <header>, <footer>, <article>, <section>, and <nav>. They improve code readability and accessibility.
3. What is the purpose of the <canvas> element?
Answer: The <canvas> element is used to draw graphics via JavaScript, such as charts, games, or animations. It provides a space on a web page where developers can render visual content programmatically.
4. What is the difference between <div> and semantic tags like <section> or <article>?
Answer: <div> is a generic container with no meaning. Semantic tags like <section> or <article> indicate the purpose of the content, making it more accessible and easier to maintain.
5. What are the new input types in HTML5?
Answer: HTML5 introduced input types such as email, url, tel, number, range, date, time, search, and color. These improve form usability and built-in validation.
6. What is Web Storage in HTML5?
Answer: Web Storage provides two mechanisms for storing key-value pairs in a user’s browser: localStorage (persistent storage) and sessionStorage (temporary, session-based storage).
7. What is the difference between localStorage and sessionStorage?
Answer: localStorage persists data even after the browser is closed, while sessionStorage only stores data for the duration of a page session.
8. What is the <video> tag used for?
Answer: The <video> tag allows embedding video files directly in HTML pages with support for controls like play, pause, and volume. It eliminates the need for third-party plugins like Flash.
9. What is the purpose of the required attribute in HTML5 forms?
Answer: The required attribute ensures that an input field must be filled out before submitting the form, enabling basic client-side validation without JavaScript.
10. What is the <datalist> element?
Answer: <datalist> provides a list of predefined options to an <input> element, offering autocomplete suggestions as the user types.
11. What is the placeholder attribute used for?
Answer: The placeholder attribute provides a short hint describing the expected value of an input field. It appears inside the input box until the user types something.
12. What is the autofocus attribute in HTML5 forms?
Answer: The autofocus attribute automatically sets focus to the specified input field when the page loads, improving user experience by guiding them to start typing.
13. What does the novalidate attribute do in a <form>?
Answer: The novalidate attribute disables the browser’s default form validation, allowing developers to handle validation with JavaScript instead.
14. What is the difference between <formnovalidate> and novalidate?
Answer: novalidate disables validation for the entire form, while formnovalidate is used on individual submit buttons to skip validation only when that button is clicked.
15. What are the min, max, and step attributes used for in input fields?
Answer: These attributes define the minimum value, maximum value, and step interval for numeric inputs (e.g., <input type="number">), allowing better control over data input.
16. What is the purpose of the <section> element in HTML5?
Answer: <section> defines a thematic grouping of content, typically with a heading, that represents a standalone part of the document or application.
17. What is the <article> element used for?
Answer: <article> represents self-contained content like blog posts, news articles, or forum posts. It is meant to be distributable or reusable independently.
18. What is the <aside> tag for?
Answer: <aside> is used for content tangentially related to the main content, such as sidebars, callouts, or advertisements.
19. What is the <nav> element used for?
Answer: <nav> is used to define navigation links, typically for menus, tables of contents, or other areas where the user can navigate to different pages or sections.
20. What is the <main> tag in HTML5?
Answer: <main> represents the central content of a document. It should be unique and not include content repeated across pages like headers, footers, or sidebars.
21. What is the Geolocation API in HTML5?
Answer: The Geolocation API allows websites to request the user’s physical location (latitude and longitude). It can be accessed via JavaScript using navigator.geolocation, often used for maps, location-based services, etc.
22. What is the <track> element used for in HTML5?
Answer: The <track> element is used with <video> or <audio> to specify text tracks (like subtitles or captions). It helps improve accessibility for users who need visual aids.
23. What is the use of the progress element in HTML5?
Answer: <progress> displays the progress of a task (e.g., file upload or form completion) as a visual bar. You can set its value and max attributes to indicate progress.
24. What is the <meter> element used for?
Answer: <meter> represents a scalar measurement within a known range, such as disk usage or battery level. It differs from <progress> by indicating a value in a range, not a task’s progress.
25. What is a Web Worker in HTML5?
Answer: A Web Worker runs JavaScript in a background thread, allowing heavy computations without blocking the main UI thread. It improves performance and responsiveness in web applications.
26. What is the difference between localStorage and cookies?
Answer: localStorage stores data on the client side without sending it to the server, and it has a larger storage limit (~5MB) compared to cookies (about 4KB), which are sent with each request.
27. What is the Drag and Drop API in HTML5?
Answer: HTML5 provides built-in support for drag-and-drop operations using events like dragstart, dragover, and drop. It enables users to drag elements and drop them into other parts of the page.
28. What are data- attributes in HTML5?*
Answer: Custom data-* attributes allow you to store extra information on HTML elements, which can be accessed in JavaScript. For example: <div data-user-id="123">.
29. What is the <figure> and <figcaption> used for?
Answer: <figure> represents self-contained content, such as an image or diagram, and <figcaption> provides a caption or explanation for it.
30. What is the <details> and <summary> element used for?
Answer: These elements are used to create an expandable/collapsible content block. <summary> is always visible and acts like a toggle; <details> contains the hidden content that expands on click.
31. What is the difference between <em> and <i> in HTML5?
Answer: <em> is a semantic tag that emphasizes text and conveys meaning (typically renders as italic), whereas <i> is purely for styling (italic) without semantic meaning.
32. What is the <mark> element used for?
Answer: The <mark> element highlights text that is relevant or important in a given context, usually by applying a background color (like yellow).
33. What does the <time> element represent?
Answer: <time> is used to encode dates and times in a machine-readable format, improving SEO and enabling scripts to interpret temporal data (e.g., <time datetime="2025-06-29">June 29, 2025</time>).
34. How does HTML5 support offline web applications?
Answer: HTML5 introduced the Application Cache (now deprecated) and supports offline capabilities using Service Workers, which allow caching of assets and responses to enable offline functionality.
35. How is <main> different from <body>?
Answer: <main> contains the primary content unique to a page, whereas <body> includes everything rendered on the page (headers, nav, footer, etc.). Only one <main> element is allowed per page.
36. What is the <output> element used for in HTML5?
Answer: <output> displays the result of a calculation or script. It is often used in forms to show dynamic results based on input values.
37. What are the advantages of semantic HTML5 elements?
Answer: Semantic elements improve accessibility, SEO, and code readability by clearly defining the structure and purpose of different parts of a web page.
38. What are the limitations of HTML5?
Answer: HTML5 doesn’t support backward compatibility in older browsers, lacks some advanced functionalities (needs JavaScript for logic), and relies on CSS/JS for full styling and interactivity.
39. What is the difference between article and section in HTML5?
Answer: <article> is for self-contained, reusable content (e.g., a blog post), while <section> is used to group related content under a heading, usually as part of a larger document.
40. What is responsive web design, and how does HTML5 support it?
Answer: Responsive design ensures that web content adapts to different screen sizes. HTML5 helps through semantic elements, media-friendly tags, and compatibility with responsive frameworks and CSS media queries.
41. What is the WebSocket API in HTML5?
Answer: The WebSocket API enables full-duplex communication between a client and server over a single, long-lived connection. It’s ideal for real-time applications like chat, gaming, or live updates.
42. What is the difference between <b> and <strong> tags?
Answer: <b> is used for stylistic bold text without implying importance, while <strong> semantically emphasizes text as important (usually rendered bold, but with meaning for assistive tech).
43. What is the purpose of the autocomplete attribute in forms?
Answer: The autocomplete attribute allows the browser to automatically fill in form fields based on previously entered values. It can be turned on/off or set for specific input types.
44. What are media queries, and how do they relate to HTML5?
Answer: Media queries are a CSS feature (often used alongside HTML5) that apply different styles depending on the device’s characteristics, such as screen size or resolution — essential for responsive design.
45. What is the hidden attribute in HTML5?
Answer: The hidden attribute makes an element not visible on the page. It’s a global boolean attribute, and hidden elements are not rendered in the layout but still exist in the DOM.
46. How can you make a custom data attribute in HTML5?
Answer: Use the data-* format, such as data-user-id="123". These attributes store custom data private to the page or application and can be accessed via JavaScript using dataset.
47. What is the difference between <embed>, <object>, and <iframe>?
Answer:
<embed>is used to embed external content like multimedia.<object>is more flexible and can be used for any type of external resource.<iframe>embeds another HTML page inside the current page.
48. How do you ensure backward compatibility for HTML5 features?
Answer: Use feature detection libraries (like Modernizr), fallbacks (alternative content), and polyfills (scripts that mimic new features in older browsers).
49. What is the role of ARIA in HTML5?
Answer: ARIA (Accessible Rich Internet Applications) attributes enhance accessibility by providing extra information about elements for screen readers and assistive technologies, especially when native HTML5 semantics are not enough.
50. What are the best practices when using HTML5?
Answer:
- Use semantic elements for better structure and accessibility.
- Validate your code with tools like the W3C validator.
- Keep content and styling separate (HTML for structure, CSS for design).
- Use modern form elements and attributes.
- Always include the
<!DOCTYPE html>declaration.
