Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML data Attribute
The data attribute of the <object> element specifies the URL of the resource to be embedded in the web page. This resource can be various file types including audio, video, PDF documents, Flash files, images, or other multimedia content.
Syntax
Following is the syntax for the data attribute −
<object data="url"></object>
Here, url is the absolute or relative URL of the resource to be embedded by the object element.
Parameters
The data attribute accepts a single parameter −
url − A string that specifies the URL of the resource. This can be an absolute URL (with http/https protocol) or a relative path to a local file.
Example − Embedding Flash Content
Following example demonstrates how to embed a Flash (.swf) file using the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>Object Data Attribute - Flash</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>CSS Demonstrating Application</h2>
<object data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600">
<p>Your browser does not support Flash content.</p>
</object>
</body>
</html>
The Flash application will be displayed in a 600x400 pixel area. If the browser doesn't support Flash, the fallback text will be shown instead.
Example − Embedding PDF Document
Following example shows how to embed a PDF document using the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>Object Data Attribute - PDF</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Embedded PDF Document</h2>
<object data="/documents/sample.pdf" type="application/pdf" width="100%" height="500">
<p>Unable to display PDF file. <a href="/documents/sample.pdf">Download</a> instead.</p>
</object>
</body>
</html>
This example embeds a PDF document with a fallback download link if the browser cannot display the PDF inline.
Example − Embedding Images
The object element can also embed images using the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>Object Data Attribute - Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Embedded Image using Object</h2>
<object data="/images/logo.png" type="image/png" width="300" height="200">
<img src="/images/logo.png" alt="Company Logo" width="300" height="200">
</object>
</body>
</html>
If the object fails to load, the fallback <img> element will be displayed instead.
Common Use Cases
The data attribute is commonly used for −
PDF Documents − Embedding PDF files directly in web pages for document viewing.
Flash Content − Legacy multimedia applications and animations (though Flash is deprecated).
Media Files − Audio and video content when more control is needed than standard
<audio>or<video>elements provide.Interactive Content − Java applets, plugins, and other embedded applications.
Browser Compatibility
The data attribute is well-supported across all modern browsers. However, the actual display of content depends on browser plugins and support for the specific file type being embedded. Always provide fallback content within the object element for better user experience.
Conclusion
The data attribute of the <object> element provides a versatile way to embed various types of external resources in HTML documents. By specifying the URL of the resource, browsers can load and display multimedia content, documents, and interactive applications. Always include fallback content to ensure accessibility when the primary resource cannot be loaded.
161 Views
