HTML Iframes

Iframe stands for Inline Frame.

HTML Iframe element <iframe> defines an inline frame, which can be used to embed a web page into another web page.

The iframe element need height, width, and src attributes to determine what needs to be embedded and where and how should it display on a web page.

  • Attribute src defines the iframe source web page location
  • Attribute height defines the iframe height in pixels
  • Attribute width defines the iframe width in pixels

Always, make sure to provide height and width attributes, else the iframe will include the source web page but it will not be visible.

<iframe src="url" height="300" width="400"></iframe>

Iframe Source Attribute

Iframe attribute src defines the location of the web page to be embedded, which can be a direct or reference path as shown below.

Direct path

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400"></iframe>

Reference path

<iframe src="/html-tutorial" height="300" width="400"></iframe>

Iframe Height and Width Attributes

Iframes attributes height and width define the iframe container, where the web page is embedded.

The values provided for these attributes are considered to be in pixels by default.

Both height and width values are a must to display an iframe on a web page.

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400"></iframe>

List of all Iframe Attributes

Here is the list of all the available attributes of an iframe element.

  • Attribute src defines the iframe source web page location
  • Attribute height defines the iframe height in pixels
  • Attribute width defines the iframe width in pixels
  • Attribute title defines the title of an iframe, which is used by screen readers to read out what the iframe contains.
  • Attribute id defines the unique ID on a web page, which can be used to apply CSS styles or Javascript logic.
  • Attribute class defines the CSS class for styles, which can be used to apply CSS styles
  • Attribute style defines the inline styles

Iframe with title attribute

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400" title="HTML Tutorial from Random Codez"></iframe>

Iframe with id and class attributes

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400" id="iframeId" class="iframeClass"></iframe>

Iframe with style attribute

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400" style="border: 5px solid red;"></iframe>

Iframe Styles using CSS

Here is a list of some of the styles that can be applied to an iframe element.

By default, an iframe contains a border, which can be removed or improved by applying the below CSS styles.

<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400" style="border: none;"></iframe>
<iframe src="https://randomcodez.com/html-tutorial" height="300" width="400" style="border: 5px solid red;"></iframe>

In a similar fashion, we can apply any kind of style to an iframe by adding styles using CSS.

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Iframes</h1>
    <iframe src="https://randomcodez.com/html-tutorial" width="800" height="600" title="HTML Tutorial"></iframe>
</body>
</html>

Overall

It's quite easy to embed a web page into another web page using the HTML Iframe element <iframe>, which can even be styled as needed using its attributes.

Related Links