How to Add Iframe in HTML

The iframe element is commonly used in web pages to insert content from another source, such as an advertisement. So in this tutorial we will learn how to add iframe in html5.

Step # 1 – iframe Basic Code

The syntax for including an iframe in html5 is shown in the image below.

Here, the src provides the source of the document.

The width and height can be defined by the designer in px (pixels) or in percentages for example 75%

Basic Code

Step # 2 – Frame Border

Additionally we can use the frameborder property to display borders around the content.

Aligning Frame Borders

Step # 3 – iframe as Target Frame

An iframe can also be used as a target frame for a link.

We have to specify the name of the iframe in target attribute as a link to which we want to refer the iframe.

The image below shows the implementation of target frame

Target Frame