HTML Iframes: Embedding Web Pages within Your Site
Learn how to use HTML iframes to embed other web pages or content within your website. This tutorial covers iframe syntax, attributes like `src` and `title`, setting dimensions, removing borders, and using iframes as link targets.
Using Iframes in HTML
An iframe (inline frame) embeds another HTML document within your current HTML page. Think of it as a window to another website or a specific part of a website.
Iframe Syntax and Attributes
The basic syntax for an iframe is:
Syntax
<iframe src="URL" title="Title"></iframe>
Where:
src: Specifies the URL of the page to embed.title: Provides a description of the iframe's content (essential for accessibility – screen readers use this).
It is good practice to *always* include the title attribute.
Setting Iframe Height and Width
You can control the size of the iframe using the height and width attributes (in pixels) or with CSS.
Example: Setting Size with Attributes
<iframe src="https://www.example.com" width="300" height="200" title="Example Website"></iframe>
Example: Setting Size with CSS
<iframe src="https://www.example.com" style="width:300px; height:200px;" title="Example Website"></iframe>
Removing the Iframe Border
Iframes have a default border. You can remove it using CSS:
Example: Removing Border
<iframe src="https://www.example.com" style="width:300px; height:200px; border:none;" title="Example Website"></iframe>
You can also customize the border's style, width, and color using CSS.
Using Iframes as Link Targets
You can make an iframe the target for a link using the target attribute in the link and the name attribute in the iframe.
Example: Iframe as Link Target
<iframe name="myFrame" src="about:blank" width="300" height="200" title="Target Frame"></iframe>
<a href="https://www.example.com" target="myFrame">Go to Example</a>
Summary Table
| Attribute | Description |
|---|---|
src |
URL of the embedded page. |
title |
Description for screen readers. |
width, height |
Iframe dimensions (in pixels). |
name |
Used to target the iframe with a link. |
Remember that while iframes are useful, they can sometimes create issues with page layout and SEO. Use them judiciously.