HTML <iframe> src Property: Embedding Content from External URLs

The <iframe> element in HTML provides a way to embed another HTML document within the current page. The src attribute specifies the URL of the document to be embedded. This article will delve into the details of the src property, covering its syntax, usage, and providing practical examples.

What is the src Property?

The src property of the <iframe> element defines the address (URL) of the external resource (HTML document, image, video, etc.) that will be displayed within the inline frame. It is one of the most fundamental attributes of the <iframe> element, as it determines the content that will be loaded.

Purpose of the src Property

The primary purpose of the src property is to:

  • Embed external web pages or resources within an HTML document.
  • Display content from different domains.
  • Create modular and reusable web layouts.
  • Integrate third-party applications or services into a webpage.

Syntax

The syntax for the src property is straightforward:

<iframe src="URL"></iframe>

Here, "URL" is replaced with the actual URL of the document you wish to embed.

Possible Values for the src Property

The src property accepts the following types of values:

  • Absolute URL: A full URL, including the protocol (e.g., https://www.example.com/page.html).
  • Relative URL: A URL relative to the current page’s location (e.g., page.html or /directory/page.html).
  • Blank URL: Using "about:blank" to create an empty frame.
  • data: URL: Embedding content directly as base64 encoded data (less common, but possible).

src Property Attributes

The src property itself does not have attributes. Its value is simply a string representing the URL of the embedded content. However, the <iframe> element has other attributes that can modify the behavior of the embedded frame.

Attribute Description
`src` Specifies the URL of the document to embed in the `