Difference between revisions of "Frames and framesets"

From Seobility Wiki
Jump to: navigation, search
(→‎Importance of frames for SEO)
(→‎Related links)
 
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<seo title="Frames and framesets" metadescription="In this article you will learn everything about frames / framesets and why you should not use these elements on your website." />
+
<seo title="Frames and Framesets (HTML Tags)" metadescription="Frame and frameset are HTML tags that are used to divide a website into different sections. Since HTML 5, they are considered unwanted elements." />
  
−
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.
+
Attention: Since the latest HTML version, HTML5, 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.
  
 
== Introduction and History ==
 
== Introduction and History ==
 +
[[File:Frames-and-Framesets.png|thumb|450px|right|alt=Frames and Framesets|'''Figure:''' Frames and Framesets - Author: Seobility - License: [[Creative Commons License BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/en/wiki/images/a/ab/Frames-and-Framesets.png]]
  
−
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 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 [[Website Navigation|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 ==
 
== 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.
+
A frameset is the layout 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 frame. The number and size of the rows are defined analogously to the columns. The resulting fields are then filled using HTML.
  
 
== Frames ==
 
== Frames ==
Line 15: Line 16:
 
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.
 
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.
+
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.
 +
 
 +
[[File:Frames-frameset-basic-code-example.png|link=|750px|border|alt=Basic code example showing how frames and framesets are used|Screenshot of a code snippet showing the basic syntax used for frames and framesets]]
 +
 
 +
Basic example of the syntax used for frames and framesets.
  
 
== Disadvantages of frames ==
 
== Disadvantages of frames ==
  
−
The disadvantages of frames are manifold. In this section, we will present some of them.
+
There are certain important disadvantages of frames, some of which include:
−
 
 
−
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.
+
* 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.
 +
* Since the browser always displays the entire construct and the URL does not change when navigating the page, separating it into several documents means that users cannot bookmark subpages.
 +
* Frames make the saving/printing of complete pages more cumbersome.
 +
* Page content found via search engines is displayed without the corresponding navigation. In the worst case, users see only the content of the frame without neighboring elements.
 +
* In the age of smartphones, tablets, and the like, the fact that frames cannot be positioned with CSS is also considered a major disadvantage that makes it almost impossible to use frame pages on mobile devices.
  
 
== Importance of frames for SEO ==
 
== 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.
+
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|JavaScript]] snippet can be used. However, in general, the use of frames is discouraged. If a website designed with this technology is to be optimized, it’s generally recommended to [[Redesign|redesign]] the site in a mobile-friendly manner, without the use of frames.
  
 
<html>
 
<html>
Line 43: Line 52:
 
== Modern replacements for frames ==
 
== 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.
+
HTML5 does not support frames and they should therefore not be used. 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 HTML5 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.
 +
 
 +
===HTML Iframe ===
 +
HTML iframes have been a significant part of web design, allowing for the embedding of a webpage within another webpage. The <iframe> tag, which stands for inline frame, is used to insert content from another source, such as a video, map, or a secondary webpage, into the current document. This is generally considered the modern replacement of frames and framesets. The syntax for an iframe is straightforward, with the src attribute specifying the URL of the page to be embedded, and optional attributes like height, width, and title to control its appearance and accessibility. For instance:,
 +
<iframe src="example.html" title="Inline Frame Example"></iframe>
 +
This would embed the content of "example.html" into the page. Iframes are particularly useful for inserting content that is updated frequently, as they can be refreshed independently of the main page.
 +
 
 +
==Browser Support==
 +
While frames and framesets have fallen out of favor due to their limitations and lack of support in HTML5, iframes continue to be widely supported across all modern browsers. This makes them a reliable tool for embedding content and a better alternative to frames and framesets. However, it's important to note that the use of iframes can still pose some challenges, particularly when it comes to search engine optimization (SEO)<ref>[https://www.searchenginejournal.com/google-iframes-debunking-myths-understanding-seo-impact/484037/ Google & iFrames: Debunking Myths, Understanding SEO Impact] Search Engine Journal. Retrieved 13 November 2020.</ref> and accessibility. Therefore, they should be used sparingly and with consideration of their impact on the user experience.
 +
 
 +
== In summary: Frames and framesets FAQs ==
 +
 
 +
'''What are frames and framesets used for in HTML?'''
 +
 
 +
Frames and framesets are a technique that allows you to divide a page into static and dynamic elements. If a user refreshes the page, the browser reloads only the dynamic parts.
 +
 
 +
'''What is the difference between a frame and a frameset?'''
 +
 
 +
Frame describes the single element a page consists of. The frameset contains the individual frames.
 +
 
 +
'''What are the disadvantages of frames?'''
 +
 
 +
Dividing a page into multiple documents keeps users from bookmarking individual subpages. Another disadvantage is the fact that you cannot position frames using CSS.
 +
 
 +
'''Should you still use frames and framesets?'''
 +
 
 +
No. HTML5 does not support frames and framesets and no longer recommends using them.
 +
 
 +
'''What are alternatives to frames?'''
 +
 
 +
A more modern approach is the iframe element. You can also use CSS or AJAX to reach similar results.
 +
 
 +
<html><script type="application/ld+json">
 +
{
 +
  "@context": "https://schema.org",
 +
  "@type": "FAQPage",
 +
  "mainEntity": [{
 +
    "@type": "Question",
 +
    "name": "What are frames and framesets used for in HTML?",
 +
    "acceptedAnswer": {
 +
      "@type": "Answer",
 +
      "text": "Frames and framesets are a technique that allows you to divide a page into static and dynamic elements. If a user refreshes the page, the browser reloads only the dynamic parts."
 +
    }
 +
  },{
 +
    "@type": "Question",
 +
    "name": "What is the difference between a frame and a frameset?",
 +
    "acceptedAnswer": {
 +
      "@type": "Answer",
 +
      "text": "Frame describes the single element a page consists of. The frameset contains the individual frames."
 +
    }
 +
  },{
 +
    "@type": "Question",
 +
    "name": "What are the disadvantages of frames?",
 +
    "acceptedAnswer": {
 +
      "@type": "Answer",
 +
      "text": "Dividing a page into multiple documents keeps users from bookmarking individual subpages. Another disadvantage is the fact that you cannot position frames using CSS."
 +
    }
 +
  },{
 +
    "@type": "Question",
 +
    "name": "Should you still use frames and framesets?",
 +
    "acceptedAnswer": {
 +
      "@type": "Answer",
 +
      "text": "No. HTML5 does not support frames and framesets and no longer recommends using them."
 +
    }
 +
  },{
 +
    "@type": "Question",
 +
    "name": "What are alternatives to frames?",
 +
    "acceptedAnswer": {
 +
      "@type": "Answer",
 +
      "text": "A more modern approach is the iframe element. You can also use CSS or AJAX to reach similar results."
 +
    }
 +
  }]
 +
}
 +
</script></html>
 +
 
 +
== References ==
 +
<references />
  
 
== Related links ==
 
== Related links ==
Line 52: Line 137:
 
[[Category:Search Engine Optimization]]
 
[[Category:Search Engine Optimization]]
 
[[Category:Web Development]]
 
[[Category:Web Development]]
 +
 +
<html><script type="application/ld+json">
 +
  {
 +
    "@context": "https://schema.org/",
 +
    "@type": "ImageObject",
 +
    "contentUrl": "https://www.seobility.net/en/wiki/images/a/ab/Frames-and-Framesets.png",
 +
    "license": "https://creativecommons.org/licenses/by-sa/4.0/",
 +
    "acquireLicensePage": "https://www.seobility.net/en/wiki/Creative_Commons_License_BY-SA_4.0"
 +
  }
 +
  </script></html>
 +
 +
{| class="wikitable" style="text-align:left"
 +
|-
 +
|'''About the author'''
 +
|-
 +
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about <html><a href="https://www.seobility.net/en/wiki/Seobility_Wiki_Team" target="_blank">the people behind the Seobility Wiki</a></html>.
 +
|}
 +
 +
<html><script type="application/ld+json">
 +
{
 +
  "@context": "https://schema.org",
 +
  "@type": "Article",
 +
  "author": {
 +
    "@type": "Organization",
 +
    "name": "Seobility",
 +
    "url": "https://www.seobility.net/"
 +
  }
 +
}
 +
</script></html>

Latest revision as of 19:17, 6 December 2023

Attention: Since the latest HTML version, HTML5, 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.

Introduction and History

Frames and Framesets
Figure: Frames and Framesets - Author: Seobility - License: CC BY-SA 4.0

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 the layout 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 frame. The number and size of the rows are defined analogously to the columns. The resulting fields are then filled using HTML.

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.

Basic code example showing how frames and framesets are used

Basic example of the syntax used for frames and framesets.

Disadvantages of frames

There are certain important disadvantages of frames, some of which include:

  • 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.
  • Since the browser always displays the entire construct and the URL does not change when navigating the page, separating it into several documents means that users cannot bookmark subpages.
  • Frames make the saving/printing of complete pages more cumbersome.
  • Page content found via search engines is displayed without the corresponding navigation. In the worst case, users see only the content of the frame without neighboring elements.
  • In the age of smartphones, tablets, and the like, the fact that frames cannot be positioned with CSS is also considered a major 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. However, in general, the use of frames is discouraged. If a website designed with this technology is to be optimized, it’s generally recommended to redesign the site in a mobile-friendly manner, without the use of frames.

Frameset Checker

Check if there are frames on your web page

Modern replacements for frames

HTML5 does not support frames and they should therefore not be used. 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 HTML5 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.

HTML Iframe

HTML iframes have been a significant part of web design, allowing for the embedding of a webpage within another webpage. The <iframe> tag, which stands for inline frame, is used to insert content from another source, such as a video, map, or a secondary webpage, into the current document. This is generally considered the modern replacement of frames and framesets. The syntax for an iframe is straightforward, with the src attribute specifying the URL of the page to be embedded, and optional attributes like height, width, and title to control its appearance and accessibility. For instance:, 

<iframe src="example.html" title="Inline Frame Example"></iframe>

This would embed the content of "example.html" into the page. Iframes are particularly useful for inserting content that is updated frequently, as they can be refreshed independently of the main page.

Browser Support

While frames and framesets have fallen out of favor due to their limitations and lack of support in HTML5, iframes continue to be widely supported across all modern browsers. This makes them a reliable tool for embedding content and a better alternative to frames and framesets. However, it's important to note that the use of iframes can still pose some challenges, particularly when it comes to search engine optimization (SEO)[1] and accessibility. Therefore, they should be used sparingly and with consideration of their impact on the user experience.

In summary: Frames and framesets FAQs

What are frames and framesets used for in HTML?

Frames and framesets are a technique that allows you to divide a page into static and dynamic elements. If a user refreshes the page, the browser reloads only the dynamic parts.

What is the difference between a frame and a frameset?

Frame describes the single element a page consists of. The frameset contains the individual frames.

What are the disadvantages of frames?

Dividing a page into multiple documents keeps users from bookmarking individual subpages. Another disadvantage is the fact that you cannot position frames using CSS.

Should you still use frames and framesets?

No. HTML5 does not support frames and framesets and no longer recommends using them.

What are alternatives to frames?

A more modern approach is the iframe element. You can also use CSS or AJAX to reach similar results.

References

  1. ↑ Google & iFrames: Debunking Myths, Understanding SEO Impact Search Engine Journal. Retrieved 13 November 2020.

Related links

About the author
Seobility S
The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about the people behind the Seobility Wiki.