HTML Introduction | Dividing HTML Space | HTML iframe

iframe element

iframe is short for inline frame. By using the iframe element, you can insert another web page inside the current web page without special restrictions.

The syntax is as follows.

<iframe src="URL"></iframe>

Unlike the frame element, the iframe element has an end tag. Also, the iframe element fixes the size of the inserted window to the specified size.

<iframe src="//www.devkuma.com" style="width:100%; height:300px"></iframe>

Run code

Changing the border of an iframe element

The iframe element has a black border by default. You can change this border style by using the border property in the style attribute.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>

If you do not want to display a border, set the border property value to none in the style attribute.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border:none"></iframe>

Run code

Changing the page of an iframe element

You can change the page of an iframe element by using the <a> tag. If you connect the target attribute of the <a> tag with the name attribute of the iframe element, you can change the iframe element page through the <a> tag.

<iframe src="//www.devkuma.com" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
  <a href="//www.google.com" target="frame_target">구글로 이동</a>
</p>

Run code

Others

There are also <frameset>, <frame>, and <noframes> elements, but they are no longer supported in the HTML5 recommendation. Therefore, to display multiple pages in a single page, you should use the <iframe> element.