Using HTML Frames for Page Layout
An Introduction to HTML Frames with Examples
In the age before responsive design and fixed-position CSS, frames were a great way to divide up your web page. They enabled you to have a fixed ‘header’ with your logo and contact details, or a fixed top, left or right navigation system.
When these were popular, most screen resolutions were 800px × 600px or 1024px × 768px. So knowing you could divide up the screen and keep a consistent layout was relatively easy. Nowadays, you should use responsive design because, being honest HTML Frames are old.
That being said, our site is found for people searching how to do this, so let’s cover it – we aim to be useful after all!
An Additional Warning: This is HTML4
The frame tag has been discontinued in HTML5. If you want to try out frames, then you must define your
<!DOCTYPE> as HTML4 which is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
The <FRAMESET> and <FRAME> Tags
Before we jump into code you have to decide how to lay out your screen. You could use a graphics package, a wireframing web app, or just a pencil or paper. Doesn’t matter how – just create a visualisation of your layout. Keep it simple – i.e. two or three boxes at most.
Let’s say you want to create a site with a side navigation which is 25% of the screen width, and the content is the remaining 75%, like this:
|Navigation Link 1|
Navigation Link 2
Navigation Link 3
|Welcome to My Test Website|
I am trying out HTML Frames for the first time! Please let me know what you think
You must first create an individual file for each of your boxes – or as I will refer to them now – frames. Once you’ve done that we can continue!
You need to now create a third file which will govern your layout. For simplicity store it in the same folder as the files you just created. This will be your frameset document. To get frames to work you need a combination of
<frameset> </frameset> tags and
<frame> tags. Here’s the code snippet:
<frameset cols="20%,80%"> <frame src="left.html" noresize scrolling="no"> <frame src="right.html"> </frameset>
The FRAMESET Tag
<frameset> tag pair define how your frames will be laid out. As in the tutorial about HTML Tables, cols is short for columns. This means we are dividing the page into vertical strips.
cols attribute you are working left-to-right. So the first percentage is the first ‘strip’ and the second belongs to the second ‘strip’. You can use absolute numbers – so
cols="200,600" would divide up a screen which is 800pixels wide into one frame of 200 pixels and one frame of 800 pixels.
In today’s technological environment where screen sizes vary massively, if you’re going to use HTML Frames, please use percentages.
The FRAME Tag
Each frame is then defined in the same left-to-right approach. So the first
<frame> tag relates to the first percentage defined, for example. The
<frame> tag (which has no closing tag) can take various attributes:
- src (required): the URL to load in the frame, or the file name. If you stored your individual files in the same folder as your frameset HTML document, then you’re fine just to use the file name
- noresize: If you don’t specify this then users will be able to resize your frames at will. This can cause layout issues so it is usually a good idea to prevent that behaviour. Notice with this attribute there is no
="". That’s because there’s only one setting. So just having
noresizeis the same as defining
noresize="noresize". Both are fine.
- scrolling: Do you want users to be able to scroll this frame? In the case of your navigation, maybe not. On a frame-by-frame basis you can turn off the user’s ability to scroll that frame, which can be very useful.
- name (highly recommended): give each frame a unique name. This is vital for frames based websites in order for your links to work correctly. See below for more information.
- frameborder (highly recommended): set a thickness of the border. Apart from some messy CSS, you can’t style your frame’s border, so you’re left with whatever the browser in question gives you. That makes the most common use of
frameborder="0"which makes them invisible.
Dividing Your Page Horizontally
If you want to divide up your site horizontally, say, like this:
|An Alternative Frame Layout|
|This is an alternative layout method, allowing you to divide up your page into rows, instead of columns.|
<frameset> document needs to be be changed to look something like this:
<frameset rows="15%,85%"> <frame src="top.html" noresize scrolling="no" frameborder="0"> <frame sec="bottom.html"> </frameset>
In this case you are using rows instead of cols. And instead of left-to-right, your
<frame> tags work top-to-bottom.
Combining the Two layouts
Using this knowledge, you can go one step further and use a combination of vertical and horizontal layouts, to create a page, which lays out a little like this:
|Combination Frame Layout|
|In this layout we have multiple framesets and multiple frames. Code snippet is below!|
|Site Footer Could Go Here|
Complicated? Maybe, but here’s the code snippet and then I’ll walk you through it:
<frameset rows="60,*,50" frameborder="0"> <frame src="top-frame.html" name="topFrame" scrolling="no"> <frameset cols="200,*" frameborder="0"> <frame src="left-frame.html" name="leftFrame" scrolling="no"> <frame src="content-frame.html" name="contentFrame"> </frameset> <frame src="bottom_frame3.html" name="linksFrame" scrolling="no"> </frameset>
Are you ready for this?!
- The first
framesettag divides the screen into 3 sections: the first section is 60px high. The last section is 50px high. The middle section (denoted by
*) means all the remaining available space
- The first
frametag populates our first horizontal section. It loads top-frame.html and gives it the name
topFrame. We disable scrolling on this one.
- We then embed an additional set of
<frameset> </frameset>tags to handle the left and right sections. This is in place of a
frametag to populate the middle section. Following so far? This frameset divides this middle section into two columns: the first is 200px wide. The second (denoted by
*) takes up all the remaining available space
- We then define the left and content frames, giving them names and preventing scrolling in the left frame. (Always wise to allow scrolling on content frames)
- And lastly, once you’ve closed the second frameset, you can pop in the last
<frame>to populate the footer.
And remember, you have to have four separate HTML files plus your frameset file to achieve this!
HTML Links and Frames
The last thing I want to cover here is that of links. The reason you should set a
name attribute on your frames is so that links work correctly.
The target Attribute
When creating a link, as per our HTML Links and Anchors Tutorial, you set it up like this:
<a href="/new-contact-page.html" title="Visit My New Contact Page!" target="_self">Contact Me</a>
If you do not define the
target attributes, links will open in the same frame the link is in, which could overwrite your header, footer or navigation! Not ideal.
However, if you set
target="contentFrame" then the link with that attribute set will open up in the frame with that name. You must remember to do this on all your links to ensure your layout is maintained.
HTML Frames are now an old way of laying out websites. I re-wrote this tutorial because I know people find us when they are looking for them in search engines, but in reality you should stop trying to lay out your websites in this way.
Here are some of the reasons.
- HTML Frames are not supported by HTML5 (i.e. modern coding standards)
- Each individual frame will get indexed separately by search engines. This means people could land on one ‘bit’ of your page and not get the full layout.
- Frames are not mobile friendly. Even if you use ‘rows’ instead of ‘columns’, frames make scrolling through your content much harder on touch-screens.
- Each frame file must refer separately to your CSS Files via the Link Tag. This makes updating your pages more labour-intensive.
- Making a nice smooth design is really hard work if using images as part of your design. This is because matching up frame edges becomes harder, especially on large screens.
- To update one ‘page’ may involve updating 3 or more files – again more work for you.
What Should You Do In Place of Using Frames?
Since writing this tutorial, I have added a couple of alternatives. One is to use HTML Tables for Page Layout, which avoids a lot of the pitfalls of frames. However tables make responsive design (mobile-friendliness) really difficult.
The other approach is much more fluid and more up-to-date and that is to use HTML5 and CSS3 to create a layout without frames or tables.
I hope this tutorial helped you but if you have any questions, just hit the button!