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
How to specify the URL of the resource to be used by the object in HTML?
The data attribute in HTML is used to specify the URL of the resource to be used by the <object> element. This attribute defines the location of external content such as images, videos, audio files, Flash files, PDFs, or other multimedia resources that should be embedded in the web page.
Syntax
Following is the syntax for the data attribute −
<object data="URL"> Alternative content </object>
The data attribute accepts a valid URL pointing to the resource file. The URL can be relative (pointing to a file in the same domain) or absolute (pointing to a file on another domain).
Parameters
The data attribute accepts the following parameter −
-
URL − A valid URL that specifies the location of the resource. This can be a relative path like
"images/video.mp4"or an absolute URL like"https://example.com/file.pdf".
Example − Embedding a PDF File
Following example demonstrates how to embed a PDF document using the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>PDF Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Embedded PDF Document</h2>
<object width="600" height="400" data="sample.pdf" type="application/pdf">
<p>Your browser does not support PDF viewing.
<a href="sample.pdf">Download the PDF</a> instead.</p>
</object>
</body>
</html>
This creates a 600×400 pixel container that displays the PDF file. If the browser cannot display PDFs, it shows the alternative content with a download link.
Example − Embedding an Image
The object element can also embed images using the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>Image Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Embedded Image</h2>
<object width="300" height="200" data="landscape.jpg" type="image/jpeg">
<img src="landscape.jpg" alt="Beautiful landscape" width="300" height="200">
</object>
</body>
</html>
The object displays the image, and if it fails to load, the fallback <img> tag ensures the image is still shown.
Example − Embedding a Video File
Following example shows how to embed a video file using the object element with the data attribute −
<!DOCTYPE html>
<html>
<head>
<title>Video Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Embedded Video</h2>
<object width="640" height="360" data="demo-video.mp4" type="video/mp4">
<p>Your browser does not support this video format.
<a href="demo-video.mp4">Download the video</a></p>
</object>
</body>
</html>
The video is embedded with specified dimensions. If the browser cannot play the video format, users see a download link instead.
Common Use Cases
The data attribute with the <object> element is commonly used for −
- PDF Documents − Embedding PDF files directly in web pages
- Flash Content − Loading SWF files (though Flash is now deprecated)
- SVG Graphics − Embedding scalable vector graphics
-
Video/Audio Files − Alternative to
<video>and<audio>elements - Interactive Content − Games, simulations, or other plugins
Key Points
Important considerations when using the data attribute −
- Always include the
typeattribute to specify the MIME type of the resource - Provide fallback content inside the
<object>tags for browsers that cannot display the resource - Use appropriate
widthandheightattributes to define the display area - Ensure the resource file exists and is accessible at the specified URL
- Consider cross-browser compatibility when choosing resource types
Conclusion
The data attribute in the <object> element specifies the URL of external resources to be embedded in HTML pages. It works with various file types including PDFs, images, videos, and multimedia content, making it a versatile tool for embedding external content with proper fallback support.
210 Views
