How to use HTML frame tag with Images

The HTML <frame> tag defines a frame or a section in a web page, within the <frameset> tag. Every single <frame> can have its own attributes like scrolling, borders etc. You can show different pages separately in different frames. Similarly, you can show multiple images inside multiple <frame> tags within a single <frameset>.

HTML5 does not support <frame> and <frameset> tag.

It is not a very popular element to use these days, you can still use the <frame> tag in your web page to show multiple images of different size separately.

Security Note: HTML frames and iframes can be used to embed content from other webpages. However, improper framing permissions can expose websites to clickjacking attacks. Learn what clickjacking is, how it works, and how to prevent it in our guide: Clickjacking: What It Means and How to Fix It.

Show images in two separate frames

For example, I have two images with different size (width and height) and I want to show the images using the <frame> tag. This is how I’ll do it.

<frameset cols="20%,50%"> 
    <frame src="../../images/theme/javascript.png"> 
    <frame src="../../images/hawa-mahal.jpg" scrolling="yes" noresize>
</frameset>

Try it

First, I have defined the <frameset> tag and used the cols attribute to specify the number and size of columns. Since the first image is smaller, I have set 20% (pixel) and 50% for the second.

Note: Don’t use the <frameset> tag inside the <body> tag.

The second <frame> tag has scrolling attribute, with value "yes". The frame will show the scroll bars, since the image is big.

Below is a list of other attributes that you can use with <frame> tag.

• src: This is required (compulsory). The value is the the Url of the image (or a web page, an object etc.) that you want to show in the frame.

• frameborder: To add or remove borders in the frames. The value for this attribute can be 0 or 1. You can also use yes (for 1) or no (for 0). Set the value as 1 (or yes) if you want to show the border on the frames. For example,

• scrolling: You can use yes, no or auto values to show the scrollbars in a frame.

• name: Specify a name to the frame. For example,

• noresize: Use this attribute if you want to restrict the frames from resizing. By default you can resize the frame. However, you can prevent the frame from resizing like this.

Remember: The <frame> tag is different from the <iframe> tag. HTML5 supports <iframe>, but not the <frame> tag.

← Previous

How to use HTML <frame> tag with Images

Show images in two separate frames