Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative for frames in html5 using iframes

I am new to HTML5 and I have done some research and found out that the use of <frameset> is outdated and from what I read <iframes> are not. So can someone help me, I want to obtain the same result as the example shown but while using <iframes> or another substitute for <frameset> that is not deprecated in HTLM5?

<frameset cols="20%,*,">     <frame src="menu.html">     <frame src="events.html"> </frameset>  
like image 579
snekk Avatar asked Aug 15 '13 18:08

snekk


People also ask

Are IFrames deprecated in HTML5?

IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area.

Are IFrames still used in 2021?

<iframe> is not an obsolete or deprecated tag. It's still widelly used in the web, mostly for media purposes.

Are IFrames supported in HTML5?

The <iframe> element is still valid in HTML5.

Why frames are not used in HTML5?

First, the frame and frameset elements are not deprecated in HTML5, they're obsolete (i.e., they've been removed entirely). The frame element replaces the body element in pages as a means to include a different document model for web pages: they're bad for usability and accessibility. thats why Frame has been removed.


1 Answers

Frames have been deprecated because they caused trouble for url navigation and hyperlinking, because the url would just take to you the index page (with the frameset) and there was no way to specify what was in each of the frame windows. Today, webpages are often generated by server-side technologies such as PHP, ASP.NET, Ruby etc. So instead of using frames, pages can simply be generated by merging a template with content like this:

Template File

<html> <head> <title>{insert script variable for title}</title> </head>  <body>   <div class="menu">    {menu items inserted here by server-side scripting}   </div>   <div class="main-content">    {main content inserted here by server-side scripting}   </div> </body> </html> 

If you don't have full support for a server-side scripting language, you could also use server-side includes (SSI). This will allow you to do the same thing--i.e. generate a single web page from multiple source documents.

But if you really just want to have a section of your webpage be a separate "window" into which you can load other webpages that are not necessarily located on your own server, you will have to use an iframe.

You could emulate your example like this:

Frames Example

<html> <head>   <title>Frames Test</title>   <style>    .menu {       float:left;       width:20%;       height:80%;     }     .mainContent {       float:left;       width:75%;       height:80%;     }   </style> </head> <body>   <iframe class="menu" src="menu.html"></iframe>   <iframe class="mainContent" src="events.html"></iframe> </body> </html> 

There are probably better ways to achieve the layout. I've used the CSS float attribute, but you could use tables or other methods as well.

like image 80
drwatsoncode Avatar answered Sep 19 '22 01:09

drwatsoncode