HTML <iframe> tags are powerful tools used to embed external content like websites, documents, or videos within a web page. In this guide, we’ll walk you through the syntax, customization options, and useful tricks to help you make the most of iframes in modern web development.
1. What is an HTML Iframe?
An HTML iframe (inline frame) is used to embed another HTML document inside the current one. It's commonly used to display maps, YouTube videos, or other websites without redirecting the user.
Basic Example:
2. HTML Iframe Syntax
The basic syntax of an iframe is straightforward. You use the <iframe> tag along with attributes like src, width, height, etc.
Attributes commonly used:
-
src: URL of the page to display -
width: Width of the iframe -
height: Height of the iframe -
title: For accessibility and SEO -
allowfullscreen: Allows video iframes to go full screen
3. Iframe – Set Height and Width
You can control the size of the iframe using width and height attributes or CSS styles.
Using HTML Attributes:
Using CSS:
4. Iframe – Remove the Border
By default, some browsers display a border around iframes. You can remove it using the style attribute or CSS.
Example:
Or CSS:
5. Iframe – Target for a Link
You can use an iframe as the target for a link so that when the link is clicked, the content loads within the iframe instead of opening a new page.
Step 1: Give your iframe a name
Step 2: Add a link that targets the iframe
This approach is useful for dashboards, web apps, and internal site previews.
HTML iframes are a simple yet powerful way to embed external content. Whether you're displaying videos, third-party tools, or creating interactive dashboards, understanding iframe syntax, sizing, border removal, and targeting can help you build cleaner and more dynamic web pages.
