Learn HTML – Part 30 – iframe Tag – Embedding External Content

The HTML iframe tag is used to embed another webpage or external content inside the current webpage.

It is commonly used to display videos, maps, documents, or other websites within a page.

What is the iframe Tag?

The iframe tag stands for Inline Frame.

It allows you to display content from another source inside a rectangular frame on your webpage.

Basic Syntax

<iframe src="https://example.com"></iframe>

The src attribute specifies the URL of the page that will be embedded.

Example – Embedding a Webpage

<iframe src="https://example.com" width="600" height="400"></iframe>

Output:

Example – Embedding a YouTube Video

YouTube provides embed code that uses the iframe tag.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen></iframe>

Example – Embedding Google Maps

<iframe
src="https://www.google.com/maps/embed?pb=!1m18..."
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>

Common iframe Attributes

Common Use Cases

• Embedding YouTube videos
• Displaying Google Maps
• Embedding external web pages
• Displaying documents or dashboards

The iframe tag allows you to embed content from other websites directly into your webpage.

Common Mistakes Beginners Make

• Embedding insecure content (HTTP inside HTTPS)
• Using large iframe sizes that break layout
• Embedding websites that block iframe embedding

Conclusion

The HTML iframe tag is used to embed external content inside a webpage.

It is widely used to display videos, maps, and other web pages directly within a site.

What’s Next?

Now that you understand the iframe tag, the next step is learning about HTML tables, which are used to display structured data in rows and columns.

Next: Learn HTML – Part 31 – table Tag – Creating HTML Tables →

Series: Learn HTML Series