html
  1. html-iframe-tag
PreviousNext

HTML <iframe> Tag

  • The <iframe> tag in HTML is used to embed another HTML document within the current HTML document.
  • It is commonly used to add videos, maps, and other webpages within an HTML document.

Syntax

The syntax for the <iframe> tag is as follows:

<iframe src="URL of the webpage or media" width="width in pixels" height="height in pixels"></iframe>

Attributes:

  • src: This attribute is used to specify the URL of the webpage or media file to be displayed within the iframe.
  • width: This attribute specifies the width of the iframe in pixels.
  • height: This attribute specifies the height of the iframe in pixels.

Example

Here is an example of how to use the <iframe> tag to embed a Google Map within an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Additionalsheet</title>
  </head>
  <body>
    <h1>Welcome to Additionalsheet</h1>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3337.1421386790666!2d-118.38833654874476!3d34.0130587806094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c6b6b48fb609%3A0x4ff9db2aee921a08!2sSanta%20Monica%20Pier!5e0!3m2!1sen!2sus!4v1594294960160!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  </body>
</html>
Try Playground

Explanation

In the example above, we have embedded a Google Map within an HTML document using the <iframe> tag:

  • The src attribute is used to specify the URL of the Google Map.
  • The width and height attributes are used to set the size of the iframe.
  • The frameborder, style, allowfullscreen, aria-hidden and tabindex attributes are used for styles and accessibility.

Use

The <iframe> tag is commonly used when you want to embed a webpage or media within your HTML document. It is also used for things like advertisements, chat boxes, social media buttons, and more.

Important Points

  • The src attribute should point to a valid URL.
  • The height and width should be specified to properly show the iframe.
  • It is recommended to set the frameborder attribute to 0 to remove the border around the iframe.
  • Accessibility is important when using <iframe>. Please use aria-hidden and tabindex attributes to make it more accessible.
  • Note that if you are embedding a page from another domain, some browsers may block the content due to security concerns.

Summary

In summary, the <iframe> tag is used to embed another HTML document within the current HTML document. It is a versatile tag that can be used for a variety of purposes including embedding videos, maps, and other webpages. Proper use of this tag can improve the user experience of your website.

<i> Tag<img> Tag
Published on: