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>.

Note: 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.

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.

Well, that’s it. Thanks for reading. ☺

← Previous

How to use HTML <frame> tag with Images

Tools you can use

Show images in two separate frames