| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
The ‘<object>‘, ‘<embed>‘, and ‘<iframe>‘ elements in HTML are used to embed external resources like images, videos, web pages, and other types of content into an HTML document. Here’s a detailed description of each, with examples:
1. 'object' Element
The ‘<object>‘ element is a versatile tag used to embed different types of external resources, including images, audio, video, PDFs, and even other web pages. It can also be used as a fallback mechanism, allowing you to specify alternative content if the embedded resource isn’t supported or can’t be displayed.
Attributes:
- ‘
data‘: Specifies the URL of the resource to be embedded. - ‘
type‘: Specifies the MIME type of the resource. - ‘
width‘: Specifies the width of the embedded resource. - ‘
height‘: Specifies the height of the embedded resource.
Example 1: Embedding an Image
<object data="image.jpg" type="image/jpeg" width="300" height="200">
<p>Your browser does not support the object element to display the image.</p>
</object>
Example 2: Embedding a PDF
<object data="document.pdf" type="application/pdf" width="600" height="400">
<p>Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a>.</p>
</object>
2. 'embed' Element
The ‘<embed>‘ element is used to embed external resources like videos, audio, or interactive content (e.g., Flash, PDFs) into an HTML document. It is similar to ‘<object>‘, but it is simpler and does not support fallback content.
Attributes:
- ‘
src‘: Specifies the URL of the resource to be embedded. - ‘
type‘: Specifies the MIME type of the resource. - ‘
width‘: Specifies the width of the embedded resource. - ‘
height‘: Specifies the height of the embedded resource.
Example: Embedding a Video
<embed src="movie.mp4" type="video/mp4" width="640" height="480">
3. 'iframe' Element
The ‘<iframe>‘ element is used to embed another HTML document within the current document. It essentially creates a “window” within the page where the external content is displayed.
Attributes:
- ‘
src‘: Specifies the URL of the page to embed. - ‘
width‘: Specifies the width of the iframe. - ‘
height‘: Specifies the height of the iframe. - ‘
name‘: Assigns a name to the iframe, which can be targeted by links or scripts. - ‘
sandbox‘: Provides security restrictions on the content (e.g., disallowing scripts). - ‘
allow‘: Specifies permissions (e.g., allowing fullscreen or microphone access).
Example: Embedding a Web Page
<iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen>
Your browser does not support iframes.
</iframe>
Differences Between 'object', 'embed', and 'iframe':
- Versatility: ‘
<object>‘ is more versatile and can be used to embed a variety of content types, with a fallback option. ‘<embed>‘ is more straightforward and typically used for specific media types like videos. ‘<iframe>‘ is specifically for embedding entire web pages or documents. - Fallback Content: ‘
<object>‘ supports fallback content; ‘<embed>‘ does not. - Usage: ‘
<iframe>‘ is specifically for HTML documents, while ‘<object>‘ and ‘<embed>‘ can be used for various types of media.
