I was asked us to create a post in which we explain our position on the value of HTML5 frames. As far as my position on this topic, the question is not formulated correctly. Any discussion about HTML5 frames, should be dismissed, as the frames in their original HTML 4.01 form are no longer supported in HTML5. And in addition to above statement, possibly also, because no similar concepts were introduced in HTML5 to replace the original 4.01 functionality.
What is an HTML Frame?
The frame element in HTML defines a nested browsing context similar to the iframe element, but rendered within a frameset element.
Current HTML5 Support for Frames
The reason for the deprecation of frames in HTML5 is mainly due to issues the frames presented to search engines and the content processing by search bots, which is a topic I’ll touch upon a later in this article.
So to conclude before we even begin, both the <frame> as well as <frameset> HTML elements were deprecated and completely removed from HTML5, as well as the rest of the frame related optional tags, which are also no longer supported in HTML5.
The World Wide Web Consortium (W3C) lists frame and frameset elements as obsolete features, in the statement published to their website on 28 October 2014.
Let’s illustrate the current IDE support for frames with an example, to explore if the frame tags can be used in the design of an HTML5 page. To do so, I’ve created an index.html file and announced to browser renderer, that we’re going to be using the HTML5 code on the rest of the web page. That was achieved by using the <!doctype html> tag on the first line of the code.
As expected, entering frame code into the page, produced a warning in my IDE (integrated development environment), explicitly specifying that both, the frameset as well as frame tags are deprecated in HTML5 now. Example of which is illustrated in the following screenshot:
Just to add, in addition to frame and frameset tags, following optional frame related attributes were also deprecated in HTML5, and thus should not be used when coding the page. The IDE produces similar errors for the following frame related attributes:
Image © w3schools.com
Value of Frames in HTML
In HTML 4.01, forms provided a valuable way of separating website’s content. Unfortunately, frames came with some significant issues, that later discouraged web designers and webmasters from using the frameset and frame tag on their sites. The issue was related mainly to the inability of search engines to properly index the frames.
In Google’s own statement, “Frames can cause problems for search engines because they don’t correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames or iframes display several URLs (one for each frame) within a single page. Google tries to associate framed content with the page containing the frames, but we don’t guarantee that we will.” (Google & Frames, 2016)
In above announcement, Google merely hints at the fact that search engine spiders are unable to index more than the master page, and that results in the inability to effectively index the site’s content. “We could have hundreds of information-packed pages inside the site, but they will essentially be invisible to search engines.” (Staff, S., 2016)
There are ways to help search engines to index the pages that use frames, such as by using methods that implement noframes, but those were all just a workaround approaches. Thus soon enough, most web professionals realized that frames need to be replaced by other HTML tags and techniques.
Benefits of Frames
The most useful feature of frames was its ability to have multiple HTML pages displayed in the same browser windows (while keeping them static and logically segregated).
Another advantage was in the positive effect on overall reduction of server bandwidth. “Frames can also help reduce bandwidth and server load, because the same content does not need to load every time a new page is rendered.” (The pros and cons of frames, 2016). It is because only the dynamic part of the page needed to be reloaded with frames. A good example of such structured approach is a page that includes a header, footer, navigation and content frame, where only the content frame is refreshed with every visit, thus the rest of the page is preloaded and unchanging. This trend is nowadays used predominantly in SPA type of applications, although there is a huge difference in the approach, single page applications are not using the frame method to achieve the goal.
Disadvantages of Frames
The world of web soon realized that using frames is a flawed approach. Even though there were some benefits to frames, such as the previously mentioned level of separation, there were other issues that came into light. Mainly the following:
- limited support in browsers
- difficulties to print framed sites
- problems tied to bookmarking framed websites
- and most importantly issues with remote indexing of the frame website by search bots
An iframe (short for “inline frame”) is HTML syntax that allows you to embed a web page within another web page. “It’s like Inception for websites – a page within a page.” (Physioc, 2013). You can customize the height, width, border, and whether the frame has a scroll bar.
The iframes are still used extensively, and they are also supported in HTML5, albeit we should note, that many iFrame attributes were already deprecated, while some new ones were added. The full list of all supported and deprecated attributes is available from here: http://www.w3schools.com/TAgs/tag_iframe.asp
Anyhow, to recap, as far as functionality, iframe gives us the ability to embed content from another website inside your site (sort of similar to a frame, with its page within page concept).
This ability can sometimes be very beneficial because using this practice you may avoid sending a user to a different URL to see a particular content. Using iframe, you can directly provide the substance of a remote website in your content.
Now to your question. While that is easy enough, it does raise some interesting questions about the SEO implications.
Search engine robots “recognize that the source is clearly referenced by the iframe tag” (Furr, 2015), so there shouldn’t be any worry on the side of being penalized for duplicate content, as well as no need to worry that iFrame embedded site would be considered as cloaking (black hat form of SEO).
That said, overall, iframe should not have any adverse impact on SEO. Anyhow, from what I gathered, it’s not a good idea to use iFrames on main pages of the website, because if the majority of the content comes from the iframe, it’ll be very hard for the main page to rank well.
Let’s turn the question around, could there be any positive impact? Can Content in iframe Help My SEO?
The short answer is no, not really. Once again, the content and links within iframes are not typically crawled and indexed, and credit is not attributed to the page where iframes are embedded.
All the disadvantages of frames proved to be the major hassle for web professionals, who soon stopped using frames on their websites.
As a result of the innovative developments in Web Sciences and due to a better understanding of issues related to using frames, the frames became replaced by a more widespread use of table and div tags by the web community; which eventually led to a complete deprecation of frame and frameset tags in HTML5.
Why were frames deprecated in HTML5, but not iFrames? (2016) Available at: http://softwareengineering.stackexchange.com/questions/144515/why-were-frames-deprecated-in-html5-but-not-iframes (Accessed: 12 November 2016).
HTML frame tag (2016) Available at: http://www.w3schools.com/TAgs/tag_frame.asp (Accessed: 12 November 2016).
Google & Frames (2016) Available at: https://support.google.com/webmasters/answer/34445?hl=en (Accessed: 12 November 2016).
Staff, S. (2016) Search engines and frames. Available at: https://searchenginewatch.com/sew/news/2064573/search-engines-frames (Accessed: 12 November 2016).
Frames in HTML documents (2016) Available at: https://www.w3.org/TR/REC-html40/present/frames.html#h-16.4.1 (Accessed: 12 November 2016).
Disadvantages of using frames (2000) Available at: http://www.plus2net.com/html_tutorial/html_frmcons.php (Accessed: 12 November 2016).
The pros and cons of frames (2016) Available at: http://www.mediacollege.com/internet/html/frames/pros-cons.html (Accessed: 12 November 2016).
HTML5 – 11 obsolete features (2016) Available at: https://www.w3.org/TR/html5/obsolete.html#frames (Accessed: 12 November 2016).
Furr, J. (2015) How do iFrames affect your SEO?. Available at: http://www.visibilitymagazine.com/how-do-iframes-affect-your-seo/ (Accessed: 15 November 2016).
Physioc, H. (2013) How iFrames (don’t) affect SEO. Available at: http://tentacleinbound.com/articles/how-iframes-affect-seo (Accessed: 15 November 2016).