Frames and framesets
Attention: Since the latest HTML version, HTML 5, framesets and frames are considered unwanted elements that you shouldn’t use anymore. At the end of this article, we present modern alternatives to the use of frames.
Contents
Introduction and History
Framesets and frames originate from the early years of website design. The frame feature, introduced by Netscape in 1996, made it possible to divide a website into different sections. Originally the frameset was used to separate the header and navigation bar of a page from its content. This separation of static parts - navigation and header - from dynamic parts was useful at that time because the internet connection of most users was very limited and the speed was only a fraction of the data transfer rates available today. Therefore, an attempt was made to reload only certain parts of a website, namely those that change while the static parts remain unchanged. This saved data volume and reduced loading time.
Framesets
A frameset is a blueprint of a web page and is stored in its own HTML file. It contains the number of individual sections as well as the number and size of rows and columns. The corresponding HTML element is called "frameset" and can contain the attributes "cols" and "rows". “cols" defines the number of columns and "rows" the number of rows. The individual columns are separated by a comma. It is possible to format one or more columns or rows "dynamically", i.e. one or more rows adapt to the size of the fixed columns or rows. With col="400,*" you create a frameset with two columns, where the first column is 400 pixels wide and the second column takes up the rest of the display. The number and size of the rows are defined analogously to the columns. The resulting fields are then filled with one frame each.
Frames
A frame is the core of a frameset page. The "frame" element may not be closed by a closing element, but only "inline", i.e. by "/>" at the end of the opening element. In addition, the frame element may only be used within a frameset.
The two main attributes of a frame are "src" and "name". src" defines the content page to be loaded into the frame. This works the same as with other tags, such as "img". The "name" attribute serves as a destination for links and is therefore essential for navigation. Apart from these two HTML attributes, the following are allowed in a frame element: id, class, style, title, longdesc, frameborder, marginwidth, marginheight, noresize and scrolling. The HTML attributes frameborder, noresize, and scrolling are specific to the frame element. With "frameborder" you can define a frame for an element, but not all possibilities of CSS are available here. Noresize determines whether users have the option to enlarge or reduce the frame element. With the scrolling attribute, you can define whether a frame contains a scrollbar or not.
Disadvantages of frames
The disadvantages of frames are manifold. In this section, we will present some of them.
First of all, framesets and frames originate from a time when most providers did not yet offer a dynamic creation of websites through the use of server-side programming languages. As this is the case today, the classic use case of frames in HTML no longer exists. However, the disadvantages remain. Because browsers always display the entire construct, separating a page into multiple documents prevents users from placing bookmarks on subpages. In addition, this makes it impossible to print complete pages.
A particularly annoying disadvantage of frames is that page content found via search engines is displayed without the corresponding navigation. In the age of smartphones, tablets and the like, the fact that frames cannot be positioned with CSS is also an unacceptable disadvantage that makes it almost impossible to use frame pages on mobile devices.
Importance of frames for SEO
Most search engines, including Google, only pay attention to the "noframes" area on pages with a frameset, which means that a classic frame page cannot be indexed. To prevent the display of content without an appropriate navigation, a JavaScript snippet can be used, but basically, we strongly advise you against the use of frames. If a website designed with this technology is to be optimized, we recommend an immediate redesign that takes into account the use of mobile devices.
Frameset Checker
Check if there are frames on your web page
Modern replacements for frames
If you cannot avoid embedding some elements or documents, it is better to use the iframe element in the HTML code. This element is a successor of the frame element, which is often used for the integration of videos. If you only want to get a fixed navigation and thus prevent scrolling to it, you can implement an XHTML and HTML 5 compatible solution with CSS and the "position: fixed" attribute. In addition, AJAX, a combination of JavaScript and XML, offers the possibility to dynamically load and adapt individual elements and content on a website.