HTML Frames Code

You can use the following HTML code to create a web page split into separate frames. You can also check out these frames templates for HTML5 compliant frames templates.

HTML5 Compliant Frames

Since HTML5 became an official recommendation, frames (in the traditional sense) are not supported in HTML. Frames used to be created using the <frameset> and <frame> elements, but those elements are no longer supported in HTML.

To create HTML5 compliant frames, you need to use either iframes (i.e. using the <iframe> tag), or use CSS to provde the "frame" functionality.

The CSS method is probably the better choice in most scenarios. It involves using a <div> element (or any other suitable element) for each frame. Then using the CSS overflow property to hide any "overflowing" content on an element, and enable scrollbars for the user to scroll with. You can do this by specifying overflow:scroll or overflow:auto. You can also specify overflow:hidden to prevent scroll bars from appearing.

This method of creating frames requires that the contents of each "frame" is actually included in the same file. So rather than creating a separate HTML file for each frame as well as another file for the frameset (as one would do using the old method of creating frames), you only need to create one file.

Here's a mini-example to demonstrate the concept:

The main difference when doing this on a whole page (as opposed to the small example above), is that you will need to use CSS to position each <div> element on the page.

Check out these frames templates for a bunch of ready-made templates that are HTML5 compliant using the above method.

Traditional HTML Frames Code

As mentioned, this method is no longer supported in HTML. However, if you still need to do it, here's how.

To make frames the traditional way, you need 3 or more pages. One page is the frameset page, the other pages are for each individual frame. The following code is for a frameset page. Note the code pointing to 2 other pages - one for the left frame, the other for the right frame.

The frameset page:

The left frame (frame_example_left.html):

The right frame (frame_example_right.html):

Don't forget to check out these HTML frames templates.