Home 〉 HTML Tutorials 〉 HTML iframe Tag - Embed External Content in Webpage | Guide with Examples

HTML iframe Tag - Embed External Content in Webpage | Guide with Examples !

HTML iframe Tag - Embed External Content in Webpage | Guide with Examples !

What is the HTML iframe tag and how is it used to embed external content in a webpage?

The HTML '<iframe>' tag allows you to insert another webpage or content within your current page. It uses the 'src' attribute to define the content URL and can be styled using CSS. This tag supports attributes like 'loading', 'sandbox', 'title', and more to make content secure and accessible. It's an inline-level element and behaves like a replaced element. The details blog post on html iframe tag is as follows.

Introduction

The '<iframe>' tag in HTML is used to embed another HTML page or external content (like videos, maps, or websites) into your current webpage. This feature is especially useful for showing dynamic or third-party content without redirecting users.

With the help of an iframe, you can display YouTube videos, Google Maps, forms, external blog posts, or even interactive tools within your site.

HTML iframe Syntax

Syntax ✍

<iframe src="https://tut.shinecap.co.in" width="600" height="400" title="Embedded Content"></iframe>

  • '<iframe>': The tag used to embed another webpage.
  • 'src': Specifies the URL of the external content to display.
  • 'width' and 'height': Define the size of the iframe.
  • 'title': Provides a short description for accessibility tools.

Is it Block-level, Inline-level, or Empty?

The '<iframe>' tag is considered an inline-level element, but it behaves like a replaced element (like images or videos), meaning it has its own dimensions.

Attributes of '<iframe>' Tag (With Examples)

1. 'src'

Specifies the URL of the document to embed.

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://tut.shinecap.co.in"></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Loads and displays 'tut.shinecap.co.in' in the iframe.

2. 'width' and 'height'

Set the dimensions of the iframe.

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://tut.shinecap.co.in" width="500" height="300"></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Displays the iframe with 500px width and 300px height.

3. 'title'

Gives the iframe a title for screen readers.

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://tut.shinecap.co.in" title="Example Page"></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Helps with accessibility tools to identify the content.

4. 'name'

Assigns a name to the iframe for targeting from links or scripts.

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<iframe name="iframe1" src="https://tut.shinecap.co.in"></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The iframe is identified as "iframe1", useful for links like '<a target="iframe1">'.

5. 'allowfullscreen'

Allows full-screen mode for supported content like videos.

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.youtube.com/embed/videoid" allowfullscreen></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Enables full-screen button for the video.

6. 'loading'

Defines how the iframe should be loaded.

Code : 6 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://tut.shinecap.co.in" loading="lazy"></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The iframe loads only when it comes into the viewport (improves page speed).

7. 'sandbox'

Restricts iframe functionality for security.

Code : 7 📝

<!DOCTYPE html>
<html>
<body>

<iframe src="https://tut.shinecap.co.in" sandbox></iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Applies strict rules to the iframe content (like blocking scripts, forms, etc.).

Inline CSS Styling Example

Code : 8 📝

<!DOCTYPE html>
<html>
<body>

<iframe
src="https://tut.shinecap.co.in"
width="600"
height="400"
style="border: 2px solid #ccc; border-radius: 10px; padding: 5px; background-color: #f9f9f9;">
</iframe>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • 'border': Adds a visible border.
  • 'border-radius': Rounds the corners.
  • 'padding': Adds inner spacing.
  • 'background-color': Light background for contrast.

Conclusion

The '<iframe>' tag is a powerful tool in HTML for embedding external content directly into your webpage. Whether it's a map, video, or another website, the iframe helps you deliver dynamic and interactive user experiences. It's important to use attributes like 'title', 'loading', and 'sandbox' responsibly to ensure accessibility, performance, and security.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

Can I embed a YouTube video using iframe?

Yes, YouTube provides an iframe embed code you can directly paste into your HTML.

Is iframe responsive by default?

No, you'll need to use CSS (like 'width: 100%') to make it responsive.

What is the difference between iframe and embed tag?

'<iframe>' can embed web pages, while '<embed>' is mostly used for media content like PDFs or Flash.

Are iframes bad for SEO?

Using iframes can affect SEO slightly because search engines might not crawl iframe content. Use them wisely and keep critical content outside iframes.

Previous Post Next Post