HTML data Attribute

Introduction

In HTML, the data attribute is used with the <object> element to specify the URL of an external resource to embed — such as a PDF, image, or other file. It tells the browser where to fetch the content displayed inside the object.

What You’ll Learn

Purpose of data

The main purpose of the data attribute is to specify the address of the resource used by the <object> element. That resource can be a PDF document, SVG file, image, or other embeddable content. The attribute lets you integrate external files into your page through a single tag.

📝 Syntax

Set data to a valid URL on an <object> element:

<object data="document.pdf" type="application/pdf" width="480" height="320">

  <p>Cannot display PDF. <a href="document.pdf">Download</a></p>

</object>

Syntax Rules

• Value is a URL (relative or absolute) pointing to the resource file.
• Use with type to declare the MIME type (for example application/pdf).
• Include fallback HTML inside <object> for browsers that cannot render the resource.
• JavaScript property: objectElement.data returns or sets the URL string.

💎 Values

The data attribute takes a URL string as its value:

• Relative URL — data="files/report.pdf" resolves from the current page path.
• Absolute URL — data="https://cdn.example.com/chart.svg" loads from another host.
• Same-origin path — data="/images/diagram.svg" starts from the site root.

<!-- PDF document -->

<object data="report.pdf" type="application/pdf"></object>



<!-- PNG image -->

<object data="/images/logo.png" type="image/png" width="128" height="128"></object>



<!-- Remote SVG -->

<object data="https://example.com/icon.svg" type="image/svg+xml"></object>

Applicable Elements

data vs data-* attributes

Examples Gallery

PDF embed, image with fallback, and dynamic JavaScript update.

Implementation Example

The data attribute generally takes a URL pointing to the external resource:

data.html

Copy

<object width="400" height="300" data="document.pdf" type="application/pdf">

  <p>Your browser does not support this object.</p>

</object>

View Output Try It Yourself

📤 Output:

PDF embed area
(data="document.pdf")

How It Works

In this example, data specifies the URL of the PDF file that the <object> element embeds. The type attribute tells the browser what kind of file to expect.

Example with Fallback

Let’s explore a more comprehensive example using an image with fallback content:

data-image.html

Copy

<object data="photo.png" type="image/png" width="300" height="200">

  <!-- Fallback if object cannot render the data URL -->

  <img src="fallback-image.jpg" alt="Fallback Image">

</object>

View Output Try It Yourself

📤 Output:

How It Works

The data attribute points to the primary image. Fallback content inside <object> ensures something visible appears when the browser cannot render the embedded resource. Match type to the actual file format (PNG, not JPEG, for .png files).

Dynamic Values with JavaScript

You can dynamically set the data attribute using JavaScript to change embedded content based on user interactions:

dynamic-data.html

Copy

<object id="dynamicObject" data="chart-a.svg" type="image/svg+xml" width="200" height="150"></object>



<script>

  var objectElement = document.getElementById("dynamicObject");

  objectElement.data = "chart-b.svg";

</script>

View Output Try It Yourself

📤 Output:

Switch image

How It Works

In this script, the data property of an object element with id dynamicObject is updated to point to a new resource URL. This dynamic flexibility helps build interactive pages that swap embedded files without reloading.

♿ Accessibility

• Meaningful fallback — Provide descriptive text or download links inside <object>, not just “unsupported.”
• Alt on fallback images — If fallback uses <img>, include proper alt text.
• Prefer native elements — For images, video, and audio, native tags offer better accessibility than object embeds.
• Title attribute — Consider title on object for a brief description of embedded content.
• Keyboard access — Ensure fallback links and controls are keyboard reachable.

💡 Best Practices

• Ensure the resource in data is compatible with the <object> element and the user’s browser.
• Provide fallback content within <object> to maintain visibility when embed fails.
• Regularly test embedded content across different browsers for a consistent experience.