Top 100 HTML5 Interview Questions

An essential guide to HTML5 for web developers. Covering semantics, forms, APIs, accessibility, and more.

This guide provides a curated list of common HTML5 interview questions to help you prepare for your next frontend or full-stack developer role. Master these concepts, along with our guides on CSS and JavaScript, to demonstrate your expertise in modern web standards.

Last Updated: Aug 18, 2025

Table of Contents

Core Concepts

1. What is HTML5 and what are its key goals?

HTML5 is the latest version of the HyperText Markup Language. Its main goals were to improve the language with support for the latest multimedia, while keeping it easily readable by humans and consistently understood by computers and web browsers. You can learn more from the MDN Web Docs on HTML5.

Key goals included: introducing new features without breaking old sites, standardizing error handling, and reducing the need for external plugins like Flash.

2. What is the HTML5 DOCTYPE and why is it important?

The HTML5 DOCTYPE declaration is <!DOCTYPE html>. It is much simpler than previous versions.

It's important because it tells the browser to render the page in "standards mode," which ensures the page behaves consistently across different browsers according to the latest web standards. Without it, browsers may enter "quirks mode," leading to unpredictable layout and behavior.

3. What are data-* attributes?

The data-* attributes are used to store custom data private to the page or application. They provide a standard-compliant way to embed custom data attributes on all HTML elements, which can then be easily accessed by JavaScript using the dataset property.

Example: <div data-user-id="123">User Info</div>

4. What is the difference between HTML and HTML5?

  • Doctype: HTML5 has a simpler doctype (<!DOCTYPE html>) compared to previous HTML versions
  • Multimedia: HTML5 has native support for audio and video (<audio>, <video>) without plugins
  • Graphics: HTML5 introduced <canvas> for drawing and <svg> for vector graphics
  • Semantics: HTML5 added semantic elements like <header>, <footer>, <article>, etc.
  • Storage: HTML5 introduced localStorage and sessionStorage for client-side storage
  • Forms: HTML5 added new form elements and attributes for better input control

5. What are the key features of HTML5?

  • Semantic elements for better document structure
  • Native audio and video support
  • Canvas and SVG for graphics
  • Geolocation API
  • Local storage and session storage
  • Web Workers for background processing
  • New form controls and attributes
  • Drag and Drop API
  • WebSockets for real-time communication
  • Improved accessibility features

Semantics

6. What are semantic elements in HTML5? Give some examples.

Semantic elements are HTML elements that clearly describe their meaning or purpose to both the browser and the developer. Using them improves code readability, accessibility, and SEO.

Examples include:

  • <header>: For introductory content or a set of navigational links.
  • <nav>: For major navigation links.
  • <main>: Specifies the main content of a document.
  • <article>: For self-contained content like a blog post or news story.
  • <section>: For a thematic grouping of content.
  • <aside>: For content tangentially related to the content around it (e.g., a sidebar).
  • <footer>: For the footer of a document or section.
  • <figure> and <figcaption>: To encapsulate media (like an image or diagram) and its caption.

7. What is the difference between <section> and <article>?

  • An <article> is for self-contained content that could be distributed independently from the rest of the site (e.g., a blog post, a forum post, a news story).
  • A <section> is for grouping together thematically-related content. It's a more generic container than <article>. An article can have sections, and a section can have articles.

8. When would you use <figure> vs. just an <img> tag?

You should use the <figure> element when the image (or other media) is essential to understanding the content and requires a caption (using <figcaption>). If the image is purely decorative or doesn't need a caption, a simple <img> tag is sufficient.

9. What is the purpose of the <details> and <summary> elements?

These elements are used to create a native disclosure widget (an "accordion" or "twisty") in which information is hidden or revealed. The <summary> element provides the visible heading for the widget, and the content inside the <details> element is what gets shown or hidden.

10. What is the purpose of the <mark> element?

The <mark> element represents text that is marked or highlighted for reference purposes, due to its relevance in another context. It's typically used to highlight text that matches a search term or is otherwise specially relevant.

11. What is the purpose of the <time> element?

The <time> element represents a specific period in time. It can include a datetime attribute to make the date/time machine-readable while displaying a human-readable format in the content. This helps with search engines and other automated systems that need to understand dates.

Example: <time datetime="2023-05-15">May 15, 2023</time>

12. What is the difference between <div> and <span>?

  • <div> is a block-level element used to group larger sections of content or create layout divisions
  • <span> is an inline element used to group smaller portions of text or inline elements for styling
  • <div> creates a line break before and after itself by default
  • <span> doesn't create any line breaks and flows with the text

Forms

13. What are some new form input types in HTML5?

HTML5 introduced several new input types to make forms more powerful and user-friendly, especially on mobile devices where custom keyboards can be shown.

  • email: For email addresses.
  • url: For URLs.
  • tel: For telephone numbers.
  • number: For numerical values, with stepper controls.
  • range: For a slider control.
  • date, time, datetime-local: For picking dates and times.
  • color: For a color picker.
  • search: For search fields.
  • week, month: For selecting weeks or months.

14. What are some new form attributes in HTML5?

HTML5 added several attributes to enhance form validation and behavior:

  • required: Specifies that an input field must be filled out before submitting.
  • placeholder: Provides a hint to the user of what can be entered in the field.
  • pattern: Specifies a regular expression that the input's value is checked against.
  • autofocus: Automatically focuses the element when the page loads.
  • multiple: Allows multiple values to be selected for <input type="file"> and <input type="email">.
  • autocomplete: Specifies whether a field should have autocomplete enabled.
  • min, max, step: For numerical inputs to set constraints.

15. What is the purpose of the <datalist> element?

The <datalist> element provides an "autocomplete" feature for <input> elements. It contains a set of <option> elements that represent the predefined options available to the user.

Example:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

16. What is the purpose of the <output> element?

The <output> element represents the result of a calculation or user action. It's typically used in forms to display the result of a calculation performed by JavaScript.

Example:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

17. How does HTML5 form validation work?

HTML5 introduced built-in form validation using attributes like required, pattern, min, max, etc. When a form is submitted, the browser automatically checks these constraints and prevents submission if they're not met, showing appropriate error messages.

You can also use the Constraint Validation API in JavaScript to customize validation behavior with methods like checkValidity(), setCustomValidity(), and properties like validity.

18. What is the difference between the placeholder and value attributes?

  • placeholder: Provides a hint about the expected value of an input field. It disappears when the user starts typing and should not be used as a replacement for a label.
  • value: Specifies the actual default value of the input field. It remains in the field unless the user changes it and is submitted with the form.

Graphics & APIs

19. What is the difference between <canvas> and <svg>?

  • <canvas>: Renders 2D shapes and bitmap images using JavaScript. It is resolution-dependent (pixel-based) and has a "fire-and-forget" drawing model. It's better for dynamic graphics, animations, and games where performance is critical.
  • <svg> (Scalable Vector Graphics): Defines vector-based graphics in an XML format. It is resolution-independent, meaning it scales perfectly to any size without losing quality. Each shape is an object in the DOM, so it can be easily manipulated with CSS and JavaScript. It's better for logos, icons, and interactive maps.
A diagram comparing the pixel-based Canvas with the vector-based SVG.

20. What is the Web Storage API (localStorage and sessionStorage)?

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive way than using cookies.

  • localStorage: Stores data with no expiration date. The data persists even after the browser is closed and reopened.
  • sessionStorage: Stores data for only one session. The data is cleared when the page session ends (i.e., when the browser tab is closed).
  • (See also: Question #49 for a detailed comparison with Cookies)

21. What are Web Workers?

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. A worker can send and receive messages from the main thread that created it. This is useful for long-running or computationally intensive tasks.

22. What is the Geolocation API?

The Geolocation API is used to get the geographical position of a user's device. For privacy reasons, the user is asked for permission to report location information. It's commonly used in mapping applications and location-aware services.

23. What is the purpose of the <video> and <audio> tags?

These tags are used to embed video and audio content in a document without needing external plugins like Flash. They provide a standard way to include media with controls for play, pause, volume, etc., which can be styled and manipulated with CSS and JavaScript.

24. What is Application Cache (AppCache) and why is it deprecated?

Application Cache was a feature designed to allow web applications to be available offline. It used a manifest file to specify which resources the browser should cache.

It was deprecated because it was difficult to work with, inflexible, and had many design flaws that led to unexpected behavior. It has been replaced by the much more powerful and flexible Service Workers API, which provides finer-grained control over caching and network requests.

25. What is the Drag and Drop API in HTML5?

The Drag and Drop API allows users to click and drag elements to different locations, either within the same page or between different applications. Key parts of the API include:

  • draggable attribute to make elements draggable
  • Drag events: dragstart, drag, dragend
  • Drop events: dragenter, dragover, dragleave, drop
  • DataTransfer object to transfer data during drag operations

26. What is the WebSocket API?

The WebSocket API enables two-way interactive communication between a user's browser and a server. Unlike HTTP, which is request-response based, WebSockets provide a persistent connection that allows real-time data transfer in both directions.

Key features:

  • Low latency communication
  • Full-duplex communication (both directions simultaneously)
  • Works over a single TCP connection
  • Ideal for chat applications, real-time games, live sports updates, etc.

27. What is the History API in HTML5?

The History API allows web applications to interact with the browser's session history. It provides methods to:

  • Navigate back and forward through the user's history
  • Manipulate the contents of the history stack
  • Update the URL without reloading the page (using pushState() and replaceState())
  • Listen for navigation events with the popstate event

This API is fundamental for single-page applications (SPAs) to maintain proper navigation and URLs.

Accessibility

28. What is the purpose of the alt attribute on an <img> tag?

The alt (alternative text) attribute provides a textual description of an image. It is crucial for accessibility for several reasons:

  • Screen Readers: Screen readers announce the alt text to visually impaired users, allowing them to understand the image's content and purpose.
  • Broken Images: If an image fails to load, the browser will display the alt text in its place.
  • SEO: Search engines use alt text to understand the content of an image, which can help with image search rankings.

If an image is purely decorative, the alt attribute should be present but empty (alt="") so that screen readers can ignore it.

29. What is WAI-ARIA and what is its purpose?

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a specification that provides a set of attributes to make web content and web applications more accessible to people with disabilities.

(See also: Question #30 on the `role` attribute)

Its main purpose is to bridge the gap where standard HTML semantics are insufficient, especially for dynamic content and advanced UI controls (like tabs, sliders, and menus) created with JavaScript. ARIA attributes don't change the element's appearance or behavior, but they provide extra information to assistive technologies like screen readers.

30. Explain the use of the role attribute.

The role attribute is a core part of ARIA. It defines what an element is or does. While native HTML elements like <button> or <nav> have built-in roles, you can use the role attribute to add semantics to generic elements like <div>s that are being used to create custom components.

For example, if you create a custom tab interface with <div>s, you would use role="tablist", role="tab", and role="tabpanel" to inform assistive technologies about the structure and function of your widget.

31. What are ARIA landmarks and why are they important?

ARIA landmarks are roles that identify regions of a page (like role="navigation", role="main", role="complementary") that help screen reader users navigate more efficiently. While HTML5 semantic elements (<nav>, <main>, <aside>) have implicit landmark roles, you can use ARIA landmarks with non-semantic elements when needed.

Common landmark roles include:

  • banner: Typically the site header
  • navigation: Navigation menus
  • main: The main content area
  • complementary: Content that complements the main content (like a sidebar)
  • contentinfo: Typically the footer

32. What is the purpose of the tabindex attribute?

The tabindex attribute controls whether an element is focusable and its position in the tab order:

  • tabindex="0": The element is focusable in the natural tab order (based on DOM position)
  • tabindex="-1": The element is programmatically focusable (via JavaScript) but not in the tab order
  • tabindex="1" or higher: The element is focusable and jumps to the front of the tab order (avoid using positive values as they create accessibility issues)

This attribute is particularly important for making custom interactive elements accessible via keyboard navigation.

33. What is the purpose of the aria-label and aria-labelledby attributes?

These ARIA attributes provide accessible names for elements:

  • aria-label: Provides a text label for an element when there is no visible text that serves as the label.
  • aria-labelledby: References the ID of another element that serves as the label for the current element.

Example of aria-label:

<button aria-label="Close">X</button>

Example of aria-labelledby:

<div id="dialog-title">Warning</div>
<div role="dialog" aria-labelledby="dialog-title">...</div>

Performance & Optimization

34. What is the difference between the async and defer attributes on a <script> tag?

Both attributes allow the browser to download the script file without blocking the HTML parsing, which improves page load performance.

  • async: The script is downloaded asynchronously and then executed as soon as it's finished downloading. This can happen before or after the HTML document is fully parsed. It does not guarantee execution order for multiple async scripts. It's best for independent scripts, like analytics.
  • defer: The script is downloaded asynchronously but is guaranteed to execute only after the entire HTML document has been parsed, and in the order in which they appear in the document. It's best for scripts that need to interact with the DOM.

35. What is the purpose of rel="preload" and rel="prefetch" on a <link> tag?

These are resource hints that help the browser optimize loading by telling it about critical resources ahead of time.

  • preload: Tells the browser to fetch a resource for the current navigation as a high priority, because you are certain it will be needed soon (e.g., a critical font file or script).
  • prefetch: Tells the browser to fetch a resource for a future navigation as a low priority. It's a hint that the user might navigate to a page that will need this resource.

36. How can you optimize image loading in HTML5?

HTML5 provides several features to improve image loading performance:

  • loading="lazy": This attribute on an <img> tag tells the browser to defer loading of off-screen images until the user scrolls near them.
  • srcset attribute: Provides multiple image sources for different screen resolutions or viewport sizes, allowing the browser to choose the most appropriate (and often smaller) file.
  • <picture> element: Offers more "art direction" control, allowing you to serve completely different image files based on media queries (e.g., a cropped version for mobile).
  • Using modern image formats like WebP, which offer better compression and smaller file sizes than older formats like JPEG or PNG.
  • Responsive images with sizes attribute to help the browser choose the right image source.

37. What is the purpose of the <picture> element?

The <picture> element provides more flexibility in specifying image resources than the <img> element alone. It contains zero or more <source> elements and one <img> element.

Key uses:

  • Art direction: Serve different cropped images for different viewport sizes
  • Image format selection: Serve modern formats (like WebP) to browsers that support them, with fallback to older formats
  • Resolution switching: Serve higher resolution images to high-DPI screens

Example:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

38. What is the purpose of the srcset and sizes attributes?

These attributes work together to implement responsive images:

  • srcset: Defines a set of images the browser can choose from, along with their width descriptors (e.g., image-480w.jpg 480w) or pixel density descriptors (e.g., image-2x.jpg 2x).
  • sizes: Defines a set of media conditions (e.g., screen widths) and indicates what image size would be best to choose when those conditions are true.

Example:

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1000px"
     alt="Description">

This tells the browser to use different images based on the viewport width and the image's display size.

Web Components

39. What are Web Components?

Web Components are a set of web platform APIs that allow you to create new custom, reusable, and encapsulated HTML tags to use in web pages and web apps. They are based on web standards and work across modern browsers, allowing for better code organization and reusability.

40. Explain the three main technologies behind Web Components.

  • Custom Elements: A set of JavaScript APIs that allow you to define your own custom HTML elements with their own behavior (e.g., <my-button>).
  • Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element. This keeps an element's features private, so they can be scripted and styled without fear of clashing with other parts of the document.
  • HTML Templates: The <template> and <slot> elements enable you to write markup templates that are not rendered in the page but can be reused and instantiated later on.

41. What is the Shadow DOM?

The Shadow DOM is a key part of Web Components that provides encapsulation for JavaScript, CSS, and templating. It allows hidden DOM trees to be attached to elements in the regular DOM tree. This shadow DOM tree:

  • Has its own scope for CSS (styles don't leak out or in)
  • Has its own DOM tree (separate from the main document)
  • Can be rendered separately from the main document DOM

This encapsulation is what enables the creation of self-contained components that won't interfere with the rest of the page.

42. What is the purpose of the <template> element?

The <template> element is used to declare fragments of HTML that can be cloned and inserted in the document by JavaScript. The content of a template is inert when loaded - scripts don't run, images don't load, etc. - until it's activated by being cloned and added to the DOM.

Key features:

  • Content is not rendered by default
  • Can be accessed via JavaScript and cloned when needed
  • Helps avoid repeatedly creating the same markup in JavaScript
  • Works well with Web Components

43. What is the purpose of the <slot> element in Web Components?

The <slot> element is part of the Shadow DOM specification and is used in Web Components to create "placeholder" spots in your component where users can insert their own markup. This is how you make customizable components.

Example:

<!-- Component definition -->
<template id="user-card">
  <div class="card">
    <slot name="username">Default Name</slot>
    <slot name="avatar"></slot>
  </div>
</template>

<!-- Component usage -->
<user-card>
  <span slot="username">John Doe</span>
  <img slot="avatar" src="john.jpg" alt="John">
</user-card>

Security

44. What is the purpose of rel="noopener noreferrer" on an <a> tag?

These attributes are crucial for security when linking to external sites that open in a new tab (target="_blank").

  • noopener: Prevents the new page from being able to access the window.opener property of the original page. This stops the new page from potentially navigating your page to a malicious URL.
  • noreferrer: Prevents the browser from sending the Referer HTTP header to the new page, which hides the URL of the originating page.

45. What is the sandbox attribute on an <iframe> and why is it used?

The sandbox attribute enables a set of extra restrictions for the content in the <iframe>. It's a critical security feature for safely embedding untrusted content by limiting its capabilities.

When the attribute is present without any values, it blocks form submission, scripts, popups, and prevents the content from accessing the parent's origin, among other things. You can selectively re-enable features by adding space-separated values (e.g., sandbox="allow-scripts allow-forms").

46. What is Content Security Policy (CSP) and how is it implemented in HTML5?

Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It's implemented via an HTTP header or a <meta> tag that specifies which resources the browser is allowed to load.

Example using HTTP header:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

Example using meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

This policy would only allow resources to be loaded from the same origin ('self'), with an exception for scripts that can also come from https://trusted.cdn.com.

47. What is the purpose of the crossorigin attribute on <script> and <link> tags?

The crossorigin attribute is used when requesting resources from a different origin (CORS) to control how the browser handles credentials and error reporting:

  • crossorigin="anonymous": Request will be sent without credentials (cookies, HTTP authentication)
  • crossorigin="use-credentials": Request will be sent with credentials

This is important for proper error reporting in scripts and for secure handling of cross-origin resources.

48. What is the purpose of the referrerpolicy attribute?

The referrerpolicy attribute specifies how much referrer information should be included with requests made from an element (like <a>, <img>, <script>, etc.).

Common values:

  • no-referrer: No referrer information is sent
  • origin: Only send the origin (scheme, host, port)
  • strict-origin: Send the origin as referrer, but only when protocol security stays the same (HTTPS→HTTPS)
  • origin-when-cross-origin: Send full URL for same-origin requests, but only origin for cross-origin

This helps control privacy by limiting how much information is shared with third-party sites.

Storage

49. What are the differences between cookies, localStorage, and sessionStorage?

Feature Cookies localStorage sessionStorage
Capacity ~4KB ~5-10MB ~5-10MB
Lifetime Set expiration or session Persistent until cleared Tab/window session
Server Access Sent with every request Client-side only Client-side only
Scope Per domain Per origin (protocol+domain+port) Per origin per tab

50. What is IndexedDB and when would you use it?

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. It's more powerful than localStorage/sessionStorage when you need:

  • To store large amounts of structured data
  • To perform high-performance searches using indexes
  • To work with transactional databases
  • To store multiple values per key
  • To store complex hierarchical objects

It's useful for offline web applications that need to store complex data locally.

51. What is the Cache API and how does it relate to Service Workers?

The Cache API provides a storage mechanism for HTTP request and response pairs, allowing you to cache resources for offline use. It's a key part of Service Workers for implementing offline functionality and progressive web apps (PWAs).

Key features:

  • Can cache network requests and responses
  • Works with Service Workers to intercept network requests
  • Provides fine-grained control over what gets cached and when
  • Allows for strategies like "cache first" or "network first"

Multimedia

52. What are the main attributes of the <video> element?

The <video> element supports several attributes to control playback and appearance:

  • src: Specifies the video source URL
  • controls: Shows default video controls (play, pause, volume, etc.)
  • autoplay: Starts playing the video automatically (may be blocked by browsers)
  • loop: Makes the video loop when finished
  • muted: Mutes the audio by default
  • poster: Specifies an image to show before the video plays
  • preload: Hints how much of the video to preload (none, metadata, auto)
  • width/height: Sets the display dimensions

53. How can you provide multiple video formats for different browsers?

You can use the <source> element within <video> to specify multiple formats. The browser will use the first one it supports:

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Common formats to include:

  • WebM (VP8/VP9 codecs) - supported by most browsers except Safari
  • MP4 (H.264 codec) - widely supported including Safari
  • Ogg Theora - older format with less support

54. What is the <track> element used for?

The <track> element specifies timed text tracks for <video> or <audio> elements. These tracks can be used for subtitles, captions, descriptions, chapters, or metadata.

Key attributes:

  • src: URL of the track file (typically .vtt format)
  • kind: Type of track (subtitles, captions, descriptions, chapters, metadata)
  • srclang: Language of the track text
  • label: User-readable title for the track
  • default: Specifies this track should be enabled by default

55. What is the difference between autoplay and preload attributes in multimedia elements?

  • autoplay: Attempts to start playing the media automatically as soon as enough has loaded. Many browsers block autoplay with sound unless the user has interacted with the site.
  • preload: Hints to the browser how much of the media file should be preloaded:
    • none: Don't preload any data
    • metadata: Only preload metadata (duration, dimensions, etc.)
    • auto: Browser may decide to preload the entire file

Miscellaneous

56. What is the purpose of the <meta> tag in HTML5?

The <meta> tag provides metadata about the HTML document. Common uses include:

  • Character set declaration: <meta charset="UTF-8">
  • Viewport settings for responsive design: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Page description for SEO: <meta name="description" content="Free web tutorials">
  • Keywords (less important now): <meta name="keywords" content="HTML, CSS, JavaScript">
  • Author information: <meta name="author" content="John Doe">
  • HTTP-equiv directives (like refresh): <meta http-equiv="refresh" content="30">

57. What is the purpose of the <base> element?

The <base> element specifies the base URL/target for all relative URLs in a document. It must appear in the <head> section before any elements that use relative URLs.

Example:

<head>
  <base href="https://example.com/images/" target="_blank">
</head>
<body>
  <img src="photo.jpg"> <!-- Will load from https://example.com/images/photo.jpg -->
  <a href="page.html">Link</a> <!-- Will open in new tab due to target="_blank" -->
</body>

58. What is the purpose of the <progress> and <meter> elements?

  • <progress>: Represents the completion progress of a task. Has value and max attributes. 
    <progress value="70" max="100">70%</progress>
  • <meter>: Represents a scalar measurement within a known range, like disk usage. Has value, min, max, low, high, and optimum attributes. 
    <meter value="6" min="0" max="10">6 out of 10</meter>

59. What is the purpose of the <dialog> element?

The <dialog> element represents a dialog box or other interactive component like a dismissible alert, inspector, or subwindow. It can be either modal (using the showModal() method) or non-modal (using the show() method).

Example:

<dialog id="favDialog">
  <form method="dialog">
    <p>Do you agree to the terms?</p>
    <button value="yes">Yes</button>
    <button value="no">No</button>
  </form>
</dialog>

<button id="showDialog">Show dialog</button>

<script>
  const dialog = document.getElementById('favDialog');
  document.getElementById('showDialog').addEventListener('click', () => {
    dialog.showModal();
  });
</script>

60. What is the purpose of the contenteditable attribute?

The contenteditable attribute makes an element's content editable by the user. When set to true, the element becomes editable, allowing in-place text editing similar to a text input.

Example:

<div contenteditable="true">You can edit this text.</div>

This is often used to create rich text editors or other editable content areas.

61. What is the purpose of the hidden attribute?

The hidden attribute is a boolean attribute that indicates the element is not yet, or is no longer, relevant and should not be rendered by the browser. It's similar to setting display: none in CSS.

Example:

<p hidden>This content is hidden.</p>

Note that this shouldn't be used to hide content that you want to show later with CSS - use CSS for that purpose. The hidden attribute is meant for content that is irrelevant to the current state of the application.

62. What is the purpose of the translate attribute?

The translate attribute specifies whether an element's content should be translated when the page is localized. It accepts "yes" or "no" as values.

Example:

<p translate="no">BrandName</p>

This tells translation tools not to translate the content of this element, which is useful for proper nouns, brand names, or code that shouldn't be translated.

63. What is the purpose of the spellcheck attribute?

The spellcheck attribute specifies whether the browser should spell check the content of an element. It can be used on editable elements like <input>, <textarea>, or any element with contenteditable set to true.

Example:

<textarea spellcheck="true">This text will be spell checked.</textarea>

64. What is the purpose of the download attribute on <a> tags?

The download attribute specifies that the target will be downloaded when a user clicks on the link, instead of navigating to it. It can also specify a default filename for the downloaded file.

Example:

<a href="/images/photo.jpg" download="vacation-photo.jpg">Download Photo</a>

This will download the image with the filename "vacation-photo.jpg" instead of opening it in the browser.

65. What is the purpose of the ping attribute on <a> tags?

The ping attribute specifies a space-separated list of URLs that should be notified (via a POST request) when the user follows the hyperlink. This is often used for tracking link clicks.

Example:

<a href="https://example.com" ping="/track/link-click">Example</a>

When clicked, this will navigate to example.com and also send a POST request to /track/link-click.

66. What is the purpose of the cite attribute on <blockquote> and <q>?

The cite attribute specifies the source URL of a quotation. It's used with <blockquote> and <q> elements to indicate where the quote came from.

Example:

<blockquote cite="https://example.com/source">
  This is a quoted text from another source.
</blockquote>

67. What is the purpose of the datetime attribute on <time>?

The datetime attribute specifies a machine-readable date/time for the <time> element, while the element's content can display a human-readable version.

Example:

<time datetime="2023-05-15T14:30:00Z">May 15, 2023 at 2:30 PM</time>

This helps search engines and other automated systems understand the exact date/time while displaying a user-friendly format.

68. What is the purpose of the reversed attribute on <ol>?

The reversed attribute specifies that the list order should be descending (9, 8, 7...) instead of ascending (1, 2, 3...). It's a boolean attribute.

Example:

<ol reversed>
  <li>Third item</li>
  <li>Second item</li>
  <li>First item</li>
</ol>

This will display a numbered list counting down from 3 to 1.

69. What is the purpose of the start attribute on <ol>?

The start attribute specifies the starting number for an ordered list. By default, lists start at 1, but you can change this with the start attribute.

Example:

<ol start="10">
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
</ol>

70. What is the purpose of the cols and rows attributes on <textarea>?

These attributes specify the visible width and height of a textarea in characters:

  • cols: Specifies the visible width (number of characters per line)
  • rows: Specifies the visible height (number of lines)

Example:

<textarea cols="40" rows="5">Default text</textarea>

Note that these can also be controlled with CSS using width and height properties.

71. What is the purpose of the wrap attribute on <textarea>?

The wrap attribute specifies how the text in a textarea is to be wrapped when submitted in a form:

  • soft: Default. Text is not wrapped when submitted (but may appear wrapped visually)
  • hard: Text is wrapped both visually and when submitted (requires cols attribute)
  • off: Text is not wrapped at all (user must scroll horizontally)

72. What is the purpose of the form attribute on form-associated elements?

The form attribute allows form-associated elements (like <input>, <select>, <textarea>, etc.) to be associated with a form even if they're not nested within it. The attribute value must match the ID of a form in the same document.

Example:

<form id="myForm">...</form>
<input type="text" name="username" form="myForm">

This is useful when you need to associate form controls with a form that's in a different part of the DOM.

73. What is the purpose of the formaction, formenctype, formmethod, formnovalidate, and formtarget attributes?

These attributes override the corresponding form attributes for specific submit buttons or inputs:

  • formaction: Overrides the form's action attribute
  • formenctype: Overrides the form's enctype attribute
  • formmethod: Overrides the form's method attribute
  • formnovalidate: Overrides the form's validation (like novalidate)
  • formtarget: Overrides the form's target attribute

Example:

<form action="/submit" method="post">
  <input type="submit" value="Normal Submit">
  <input type="submit" formaction="/save-draft" formmethod="get" value="Save Draft">
</form>

74. What is the purpose of the autocomplete attribute on forms and inputs?

The autocomplete attribute specifies whether a form or input field should have autocomplete enabled. It can be set to "on" or "off". When set on a form, it applies to all inputs in the form unless overridden.

Example:

<form autocomplete="on">
  <input type="text" name="username" autocomplete="username">
  <input type="password" name="password" autocomplete="current-password">
</form>

Modern browsers also support specific autocomplete values like "username", "current-password", "new-password", etc. to help with password management.

75. What is the purpose of the novalidate attribute on forms?

The novalidate attribute specifies that the form should not be validated when submitted. This allows the form to be submitted even if some fields don't meet their validation constraints.

Example:

<form novalidate>
  <input type="email" required>
  <input type="submit">
</form>

This is useful when you want to handle validation with custom JavaScript instead of the browser's built-in validation.

76. What is the purpose of the ismap attribute on images?

The ismap attribute specifies that an image is part of a server-side image map. When clicked, the coordinates of the click are sent to the server as part of the URL query string.

Example:

<a href="/imagemap">
  <img src="map.jpg" ismap alt="World Map">
</a>

If the image is clicked at coordinates (x=50, y=100), the browser will navigate to "/imagemap?50,100".

77. What is the purpose of the usemap attribute on images?

The usemap attribute specifies an image as a client-side image map and associates it with a <map> element. The usemap value must start with a '#' followed by the name of the map element.

Example:

<img src="planets.jpg" usemap="#planetmap" alt="Planets">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury">
</map>

78. What is the purpose of the loading attribute on images and iframes?

The loading attribute specifies whether the browser should immediately load the resource or defer loading until certain conditions are met:

  • eager: Default. Load the resource immediately
  • lazy: Defer loading until the resource is near the viewport

Example:

<img src="image.jpg" loading="lazy" alt="Example">

This is useful for improving page load performance by lazy-loading off-screen images.

79. What is the purpose of the decoding attribute on images?

The decoding attribute provides a hint to the browser about how it should decode the image:

  • sync: Decode the image synchronously for atomic presentation
  • async: Decode the image asynchronously to reduce delay
  • auto: Default. Let the browser decide

Example:

<img src="image.jpg" decoding="async" alt="Example">

80. What is the purpose of the fetchpriority attribute?

The fetchpriority attribute provides a hint to the browser about the relative priority of a resource:

  • high: The resource is important and should be fetched early
  • low: The resource is less important and can be fetched later
  • auto: Default. Let the browser decide

Example:

<img src="hero.jpg" fetchpriority="high" alt="Hero image">

81. What is the purpose of the allow attribute on iframes?

The allow attribute specifies a feature policy for the iframe, controlling which browser features the embedded content can access. It's a space-separated list of policy-controlled features.

Example:

<iframe src="https://example.com" allow="geolocation; microphone"></iframe>

This allows the iframe to access geolocation and microphone APIs (with user permission).

82. What is the purpose of the allowfullscreen attribute on iframes?

The allowfullscreen attribute specifies whether the iframe can be put into fullscreen mode (using the Fullscreen API). It's a boolean attribute.

Example:

<iframe src="video.html" allowfullscreen></iframe>

83. What is the purpose of the allowpaymentrequest attribute on iframes?

The allowpaymentrequest attribute specifies whether the iframe can use the Payment Request API. It's a boolean attribute.

Example:

<iframe src="payment.html" allowpaymentrequest></iframe>

84. What is the purpose of the referrerpolicy attribute on iframes?

The referrerpolicy attribute specifies which referrer information to send when fetching the iframe resource. Values include:

  • no-referrer
  • no-referrer-when-downgrade (default)
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url

85. What is the purpose of the loading attribute on iframes?

Similar to images, the loading attribute on iframes specifies whether the browser should immediately load the iframe or defer loading until it's near the viewport:

  • eager: Load immediately (default)
  • lazy: Defer loading until near the viewport

86. What is the purpose of the importance attribute?

The importance attribute (now largely replaced by fetchpriority) was used to indicate the relative priority of a resource:

  • high: The resource is important
  • low: The resource is less important
  • auto: Default. Let the browser decide

It could be used on <img>, <script>, <link>, and <iframe> elements.

87. What is the purpose of the integrity attribute on <script> and <link>?

The integrity attribute allows a browser to check the fetched resource to ensure that the content hasn't been manipulated. It contains a cryptographic hash of the resource that the browser can verify.

Example:

<script src="https://example.com/script.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC">
</script>

This is part of Subresource Integrity (SRI), a security feature that helps prevent attacks where CDN resources are compromised.

88. What is the purpose of the nomodule attribute on <script>?

The nomodule attribute is a boolean attribute that prevents a script from executing in browsers that support ES modules. It's used to provide fallback scripts for older browsers.

Example:

<script type="module" src="app.js"></script>
<script nomodule src="fallback.js"></script>

Modern browsers will load app.js and ignore fallback.js, while older browsers will load fallback.js.

89. What is the purpose of the nonce attribute on <script> and <style>?

The nonce attribute is used in Content Security Policy (CSP) to allow specific inline scripts or styles to execute. It contains a cryptographic nonce (number used once) that must match the policy to allow execution.

Example:

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
  // This script will only execute if the nonce matches the CSP header
</script>

90. What is the purpose of the blocking attribute?

The blocking attribute specifies that certain operations on the element should block the parser. Currently, the only supported value is render, which indicates that rendering should be blocked until the element is ready.

Example:

<link rel="stylesheet" href="critical.css" blocking="render">

This tells the browser to block rendering until the stylesheet is loaded, which can help avoid flash of unstyled content (FOUC).

91. What is the purpose of the imagesizes and imagesrcset attributes on <link rel="preload">?

These attributes are used with <link rel="preload" as="image"> to provide responsive image hints similar to srcset and sizes:

  • imagesrcset: Specifies multiple image sources for different resolutions/viewports
  • imagesizes: Specifies the layout sizes for the image

Example:

<link rel="preload" as="image" href="image.jpg"
      imagesrcset="image-small.jpg 480w, image-large.jpg 1024w"
      imagesizes="(max-width: 600px) 480px, 1024px">

92. What is the purpose of the disabled attribute on <link>?

The disabled attribute on <link> elements (specifically stylesheets) specifies that the stylesheet should not be applied to the document. It can be toggled with JavaScript to enable/disable stylesheets dynamically.

Example:

<link rel="stylesheet" href="theme.css" disabled>

93. What is the purpose of the as attribute on <link rel="preload">?

The as attribute specifies the type of content being preloaded, which helps the browser set appropriate priorities and apply correct content security policy:

  • script
  • style
  • image
  • font
  • audio
  • video
  • document
  • fetch (for XHR/fetch requests)

Example:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

94. What is the purpose of the title attribute on <link rel="stylesheet">?

The title attribute on stylesheet links specifies an alternative style sheet set. When multiple alternative style sheets are provided, the browser will only use one at a time, and users can switch between them (if the browser supports this feature).

Example:

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="large-text.css" title="Large Text">
<link rel="stylesheet" href="high-contrast.css" title="High Contrast">

95. What is the purpose of the media attribute on <link rel="stylesheet">?

The media attribute specifies which media/device the linked resource is optimized for. It accepts media queries, allowing you to load different stylesheets for different screen sizes or device capabilities.

Example:

<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 601px)">

96. What is the purpose of the hreflang attribute on <link> and <a>?

The hreflang attribute specifies the language of the linked document. It's used to indicate to search engines and other tools that a version of the page exists in another language.

Example:

<link rel="alternate" hreflang="es" href="https://es.example.com/">

97. What is the purpose of the type attribute on <link>?

The type attribute specifies the MIME type of the linked resource. For stylesheets, this is typically text/css. For preloaded resources, it helps the browser prioritize correctly.

Example:

<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

98. What is the purpose of the sizes attribute on <link rel="icon">?

The sizes attribute specifies the sizes of icons for visual media. It's used with favicons to provide different sizes for different contexts.

Example:

<link rel="icon" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" href="favicon-128x128.png" sizes="128x128">

99. What is the purpose of the color attribute on <link rel="mask-icon">?

The color attribute specifies the color to use when displaying a SVG mask icon (used primarily for Safari pinned tabs).

Example:

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">

100. What is the purpose of the disabled attribute on form elements?

The disabled attribute specifies that an element should be disabled. Disabled elements:

  • Cannot receive focus
  • Are skipped in tab navigation
  • Cannot be modified
  • Are not submitted with the form

Example:

<input type="text" name="username" disabled>

This is different from readonly, which prevents modification but allows focus and submission.

DevUtilityTool Logo

About the Author

This guide is curated by the team at DevUtilityTool, who are passionate about creating high-quality, accessible resources that help developers excel in their careers.