Everything you need to know about the HTML tag
As the internet moved out of its adolescence and web pages grew more complex, webmasters began to search for ways to make information more efficiently displayed. One of the best solutions created was the use of HTML frames.
Using the <frame> HTML tag allows the browser window to be divided into multiple sections that can be loaded separately. It’s possible to load pages from different servers within one frameset, or collection of frames in a single browser window.
And then along came HTML 5 and made them obsolete. But HTML 4 was the standard for more than a decade, so many coders still use it and it’s likely your browser of choice will continue to support frames for the foreseeable future.
To help you understand the use of the frame tag, as well as its HTML 5 replacement, iFrames, this piece will take a look at how they are used and what these elements mean for HTML documents and web pages.
How the <frame> HTML tag was/ is used
The HTML frame tag allows the developer to draw the user’s attention to a particular page section within the larger framework. Some pages may have several such subsections.
In this case, an HTML frame tag is used inside the <frameset> tag. There can be multiple frame tags inside a single frameset tag, with each frame tag displaying its section of the webpage.
SPECIAL NOTE: In HTML, a frame element functions as a block. In HTML 5, but has become completely obsolete. That means you should stop using it if you’re using HTML and instead, use the iframe HTML tag (more on that later).
The disadvantage of using frames
From the information we’ve presented so far, it seems like the frame tag is a useful way to define content sections, creation elements that fit into columns and rows of a width to suit the developer’s needs and pull content from a separate HTML document. So, you may be asking, why was it made obsolete?
If they were so useful, why did this attribute not remain the default way to structure content? There are a number of disadvantages to using the <frame> tag, notably:
Search engines that reference a particular page only give the address of that document. This means they may inadvertently like directly to a page that was intended to be displayed within a frameset.
The use of frames can be also abused to create poorly constructed websites. While this tag may be great for information that only needs one or two columns and a few rows, as it gets more complex and the content goes beyond one or two frames, it puts a higher workload on a server.
Additionally, it’s easy to common mistakes like creating a link that creates duplicate pages within a frame.
On top of this, people using old browsers will find they do not support frames. And anyone still using an outdated version of Internet Explorer probably doesn’t have the technical know-how to determine why a webpage is being incorrectly displayed.
But this hasn’t stopped many web developers from using a frameset document to logically structure data, so it’s also worthwhile to look at how this tag is used.
How to use the <frame> HTML tag
Web browsers can display frames if you use the frameset tag in HTML instead of using the body tag.
Frameset tags instruct the browser on how it should partition the window into multiple panes. A frame’s unique identifier, or “frame tag,” specifies which HTML file will be rendered inside the frame.
Horizontal frames in an HTML document are determined using the row attribute of the frame tag, while vertical frames are specified using the col attribute.
You can use the frame tag to specify things like marginwidth pixels and marginheight pixels of content you want to be displayed within margins on a page. Or if you want to prevent resizing of an attribute in a frame, noresize allows you to do just that.
Should you still use the <frame> tag?
Depending on which developer you ask, you’ll either be told frames have limited, but specific cases in which they should be used or they should be avoided completely.
The pro-frames argument generally comes down to the idea that they can be used to hold large amounts of content that you don’t want to reload with every navigation. However, that’s exactly why XMLHttpRequest objects exist, to allow web pages to retrieve data without a full refresh.
Because of the misuse of frames, a website user may no longer have a positive User Experience (UX). And due to the nature of micro-domains, using frames can also harm your SEO rankings.
There are a lot of domains that need to be crawled and indexed separately. Crawlers will be unable to properly index your page because of the use of frames, lowering its search engine rankings and potentially hurting organic traffic.
Additionally, if we haven’t made this abundantly clear, frames have not just been deprecated in HTML5, but they have become obsolete. HTML 5 does not support the <frame> tag and frames should be avoided if you want your site to be easily crawled.
The only way around this is to include a noframes tag in your HTML code with a keyword rich description. If the image you tried to load did not succeed, this tag would appear instead.
That data is also what the web crawler sees as it makes its way through your site. But it’s important to remember to place it outside of the <frameset> tag. If not, the robots might miss it. However, there’s no assurance that your website will be indexed accurately.
Over the years the <frame> tag grew far beyond providing top and bottom margins, specifying rows and columns. As developers sought to find ways to use it for other elements and creating frames in complex HTML documents, it was expanded to include related tags.
The <frame> related tags include:
<frameset>
The <frameset> HTML tag allows you to specify multiple embedded frames within the main HTML document.
<noframes>
Web browsers that do not support frames can use the alternative <noframes> HTML tag. But it’s worth noting the <noframes> tag in HTML has been considered obsolete, so its use is discouraged.
And of course most importantly,
<iframe>
<iframe> is closely associated with <frame>, and in fact has been crowned its replacement. iFrames are used to specific an inline frame (hence the “i” in iframes), which embeds a media file, a Java applet, or any other HTML document type into an existing web page.
How to use iframes
This iframe tag is used to define a region within a document that can be displayed separately from the main HTML document.
This can include things like scroll bars or a frame border. It is also used as a reference for elements in Javacript.
Using this tag, you can embed browsing context within its own document , allowing linearized navigation using session history.
You can basically think of it as a web page inside of a specified template within another web page.
Iframes use the following syntax:
Iframe attributes
The true beauty of using an iframe rather than an old-fashioned frame tag is not just in its use of HTML 5, but in the fact that it supports other attributes, including global and event attributes.
The title attribute specifies the content of a page to screen readers, providing accessibility and compliance with ADA specifications.
Other Common Attribute Uses of Inline Frames
- allow – This specifies a feature policy for the iFrame.
- allowpaymentrequest – This allows you to invoke a Payment Request API.
- height – This determines the frame’s height, with a default value of 150 pixels.
- loading – This tells the browser window if it should load an iFrame immediately or wait until specified conditions are met.
- referrpolicy – This is used to specify which referrer information should be included when retrieving the frame.
- sandbox – This allows you to set extra content restrictions.
- src – This is used to identify the URL of the imbed document, i.e., the src URL.
- width – Height’s counterpart, this determines the width of an iframe with a default value of 300 pixels.
Of course these attributes are just a small sampling of the functionality iFrame offers. As you dive into it, you’ll find it provides all the functionality of the more familiar frame tag, but with greater functionality and efficiency.
Confused? evisio can help
If you’re a veteran SEO professional, upgrading from the <frame> HTML tag to <iframe> is old hat. But if you’re a novice or someone whose job doesn’t all them to dedicate massive amounts of time to staying up to date on the impact of HTML changes on search engine optimization, then evisio is perfect for you.
The platform designed to streamline every SEO workflow and help you get better results, it automatically scans your web site to find and identify issues and opportunities to rank more highly.
It then presents this information to you in the form of easy-to-follow, step-by-step instructions, so you don’t have to be a coding wizard. In fact, with evisio, there’s never any heavy coding required. Just plain English instructions to help you claim a spot on the front page.
And don’t think we’ve forgotten about you, HTML wizards. Evisio is great for you too. With automating reporting and project management functionality (including user permissions and task creation), it makes your job a lot easier too. And that lets you get more done, in less time, with fewer headaches.
See it for yourself. Contact us for a free, no-obligation trial. You’ll only wish you had switched sooner.
If you’re looking for SEO project management software to better manage your workflow, clients, and business – evisio.co is your solution. Try evisio.co for free here!