HTML frames allow the browser display window to be sub-divided into separate sections, each of which can be updated, or have new documents loaded into it separately from the remaining frame sections.
Here's an example of one of the most popular framed layout...
This is a single page with three frames appear. The content for these frames actually comes from three different pages and is blended together according to the instructions of a fourth "frameset" page, also called the "master" page.
The frameset page that sets up this layout looks like this...
(the tags are in red, the explanations are in black)
<html>
<head>
<title> HTML Frames Examples </title>
</head>
Standard HTML head.
<frameset rows="50,*">
This HTML frameset tag splits the viewing window into two horizontal sections,
the top section being 50 pixels high, the lower section using the rest of the available
window space.
<frame src="frame1.htm" name="head" scrolling="no" frameborder="0">
This is the first frame element. It specifies the file frame1.htm
(which lays out the headline) inside the top frame. Scroll bars are not allowed.
Specifying frameborder="0" removes borders around the frame. If you don't want
borderless frames, don't include this attribute.
<frameset cols="220,*">
This line specifies an HTML frameset that is inside the space below top frame.
It divides this area into two vertical sections, 220 pixels wide and the rest of the space (*).
<frame src="frame2.htm" name="left" scrolling="auto" frameborder="0">
This line specifies the file frame2.htm inside the left frame.
Scroll bars are allowed if necessary.
<frame src="frame3.htm" name="data" scrolling="auto" frameborder="0">
This line describes the right frame. It has been named data. All the links in the file
frame2.htm (the file used in the left section) use target="data" attributes
to enable them to load certain documents into the right frame.
</frameset>
Closes the second frameset tag.
</frameset>
Closes the first frameset tag.
<noframes>
This tag is an alternative for browsers that don't support HTML frames. Browsers that support
them will not read anything inside this tag. You can place this tag inside or outside
<frameset> and </frameset>.
<body bgcolor="#CCCCCC" text="#000000">
This Web page contains HTML frame codes, but your browser doesn't support them.
</body>
You can put <body> tag inside <noframe> tag, if you want to set
body attributes such as a background, bgcolor, text.
</noframes>
</html>
These lines end <noframes> and <html> tags.
Search engines and frames
Using HTML frames can cause two problems with search engines...
- If you submit the master page to search engines, some of them won't crawl past your master page, and all pages inside the site remain invisible.
- Search engines can send visitors into your site without the proper frame "context" being established.
The solution to the first problem is to use the noframes area. The noframes information can go immediately after the first HTML frameset tag, if you want the text to be as high as possible on the page.
Including body tags within the noframes tags works with either browser. It helps ensure that the body tag exists for any browser or search engine that might require them.
Add some descriptive text that any search engine can read. And create a way for them to get inside the site via the links to internal pages. Don't forget to add proper title, description, and keywords to all your pages. These are the most important elements that search engines index.
Now that search engines can index the individual pages within the site, visitors will come to them without the proper "context" (the second problem with HTML frames). In other words, the pages will stand alone.
Fortunately, an easy answer is to use JavaScript. Here's one such JavaScript solution. Add this to your frame pages (anywhere between either the head or the body tags)...
<!--
if (top == self) self.location.href = "index.html";
// -->
</script>
HTML frames tutorials
Framing the Web
An excellent introduction and HTML frames tutorial.
W3C Frames in HTML documents
The official HTML 4.0 specs on frames.
What's New
Inexpensive Web Hosting
How to choose a fast and reliable service from the bulk of cheap hosting solutions.
Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.
Advanced and free spam blockers
New generation of email spam blockers.
Dedicated IP hosting
Benefits of using a static over shared IP address.