Basics of HTML Frames and How to Implement Them Properly


Developing web pages can sound easy – it’s a challenge to create your website or even a site for your small business. Once you have a grasp of the concept and techniques, you may even start building websites for clients. You need to understand the basics of HTML frames and how to implement them properly to ensure your browser will structure the page as you intended.

One of the critical aspects of building attractive, high-performing websites is building your web pages.

What Is an HTML Frame?

Your HTML frame definition tells the browser how to split up the screen when it loads the web page. This is very important when you want to include objects other than a single frame of information, such as:

  • Navigation bar
  • PDFs – either viewable on the webpage or available for download
  • Sidebar content

Good use of HTML frames would be constructing a web page with a navigation bar on the side, with most of the page available for page content. The coding would amount to three frames:

  • Your navigation bar frame
  • Content frame
  • Your web page “container” frame, which holds both the navigation and content frame attributes

The only actual content of the container frame is the element information for the frames it contains.

Through the use of HTML frame and frameset elements, you can split up your page layout with some content remaining constant, while other frames are scrollable.

Frames define your page layout for the browser, with each frame having its content and attributes, independent of other frames on the page.

New developers sometimes confuse frames with iframes, which are quite different. Iframes are a method of including content into a frame.

The Basics of HTML Frames

The basic concepts of HTML frames are quite simple. For new developers and those charged with maintaining websites built with HTML, frame technology can take advantage of the many valuable examples of these techniques on technical websites.

Defining frames and framesets

Define your HTML frameset with values that indicate how many columns or rows will be contained in the frameset.

Follow that entry with the frame specifications that tell the browser where to place the frames within the frameset.

Want to get more creative in your web page appearance? You can do that by defining a “nested” frameset to provide a mix of rows and columns on a single web page.

Need more flexibility? Create additional nested frames to build the web page appearance and content that suits your needs.

Creating a gridded web page is as simple as defining your frameset into both rows and columns to build a grid representation. Frames are then described to the frameset to populate the grid.

Setting the Style of Frames

The styling of web pages you build with frame methodology can be accomplished at either the frame or frameset level.

Styling and presentation of the frameset are defined by the parent document that contains the frameset. Where frames are concerned, the presentation is defined by the source document for the frame.

CSS (Cascading Style Sheets) is the method by which you can control the styling of each frame. CSS styling gets applied to each source document for a frame individually. If you apply CSS styles to the entire frameset of your web page, those styles will not be applied to the individual source documents in frames.

There are other ways to affect the styling and presentation of framesets besides addressing the individual documents:

  • Specify and lock the size of each frame.
  • Format the borders around frames.
  • Specify margins between frames.

Sizing can be specified either by pixel values or by specifying the percentage of the page the frame is to consume. You can also allow the frame to automatically adjust to fill the available space.

Website visitors often move borders on websites to expand areas for readability. If you specify “noresize” on your frame, this border movement is not permitted.

Borders and Margins

Often you will want to improve the appearance of your web pages by creating margins between frames or providing borders around them.

Setting margin and border attributes is as simple as including “marginwidth,” “marginheight,” and “frameborder” parameters on your frame specifications.

Implementing HTML Frames Properly

A common use of frames has been to build navigation frames on a web page that remain in a constant location, while other frames can be dynamic.

Using frame attributes properly will ensure that your web page frames provide the content and functionality that you intend for your visitors.

Navigation bars are always useful for users of your website to gain additional information about particular subjects.

By adding a “name” parameter to the desired frame that will present the content provided by the navigation link, you can present the information from the link in the named frame, specified by the “target” value in your HTML “href” description.

Another useful option available on your frame specifications is the “scrolling” parameter. By specifying “yes,” “no,” or “auto,” you can provide the capability of scrolling on an individual frame, or eliminate the scrollbar entirely for that frame.

By utilizing those techniques, you can retain the initial information unaltered in other frames, while your target frame presents the content referenced by your navigation frame.

Problems with HTML Frames

Now that you have a good feel for the basics of HTML frames and how to implement them properly, you should know the pitfalls to their use.

With the explosive growth of mobile devices, it’s imperative that your website and pages be compatible with the variety of smartphones, tablets, and laptops, with varying screen sizes.

This is referred to as responsiveness, meaning that the display of the web page will detect the screen size and respond to provide optimum formatting automatically.

Screen resolution of different devices can also create readability of your frame sizes. Back buttons for some browsers on these devices may not function as you (or your visitor) expect. Some browsers do not support frame technology, rendering your web page unusable.

Until businesses and individuals can migrate away from the use of frames, there are some options that will make pages designed with frames more usable for visitors:

  • If your web pages can accommodate the formatting into rows instead of columns, try to modify your frames to utilize rows. When web pages are displayed on very small screens, it’s much less effort for users of your site to scroll up and down, rather than constantly shifting left-to-right.
  • Avoid size specification in pixels, utilizing percentages instead. This will cause automatic resizing by the device in use. It’s true that this may cause issues with frames being so small they are difficult to view comfortably, but this is still a better result for your visitors over pixel definition.

Is There a Better Way?

Most web developers have moved away from the premise of HTML frames, preferring the technology of HTML combined with CSS or languages such as JavaScript.

HTML can define the format of the web pages, while CSS handles the placement of data for presentation.

The World Wide Web Consortium (W3C) has stated that frames are “not to be used by web developers.” This mandate makes it clear that browsers will eventually drop support of frame handling, although the functionality will certainly remain for some time.

Before undertaking the migration away from frame specifications, review what website functionality may change due to this effort. If the purpose for using frames was to create specific page layouts and content or to facilitate a static navigation menu in its frame, CSS could handle such formatting easily.

If your frames were utilized to source data from external websites, you might be comforted to know that the iframe element is still included in the specification for HTML5.

To be sure, frame and frameset website construction has served its purpose for years, but now is the time to think about modernizing and updating your website through migrating to HTML/CSS functionality, or perhaps even upgrading to a complete content management system such as WordPress or Drupal (these are just examples – there are others worth your consideration).

On the plus side, migrating to a new methodology and technique of building web pages provides you with an opportunity to review your entire website content and make improvements.


Leave a Comment