How do I do what iframes did but only using HTML5?

I need to load multiple different pages into one page by buttons

[Skid]

Hey everyone,

This is my very first post here, I've looked all over the internet for help on this for years and have never found anything helpful so I thought I would post on a webmaster forum to see if anyone else can tell me.

What I need to do is set up an HTML5 webpage and have a section in it where there are buttons above and below this empty section. When you click the buttons they load different pages into that empty section without changing the page you are on, just the pages in that empty section.

Previously I would use an iframe in that empty area, but this new webpage is HTML5 and everywhere says to not use any frames or iframes and instead do this other thing. Finding that other thing though is next to impossible. Anyone have any idea?

I basically need a way to do iframe, without using iframe, in HTML5.

Please help, this has been a quest at least 5 years in the making...

Thanks,

- Skid

[tangor]

For a very first post, kudos! And welcome to Webmasterworld.

Is there a specific reason for NOT using iframe? Me, I don't know since I rarely use anything like that (prefer a full page reload if I am actually changing content)... just me.

[keyplyr]

Hi Skid and welcome to WebmasterWorld [webmasterworld.com]

[not2easy]

Hi Skid and welcome to WebmasterWorld [webmasterworld.com]

That 'other thing' is probably javascript. There isn't any taboo against using an inline frame (the iframe) but to have a link open within an iframe, the iframe's "name" property needs to match the link name. Multiple links with the same name are the problem for what you want to do with HTML5 and why javascript is better suited for the job.

[keyplyr]

While the <iframe> element is still valid in HTML5, there are significant reasons not to use it. One reason being website security, which is best denying iframe.

Better to use object and embed:

<object data="http://example.com" width="600" height="400">
 <embed src="http://example.com" width="600" height="400"> </embed>
 Content display here
</object>

But would not have a button.

[keyplyr]

So you could tag embeded elements and change them using CSS. This way no scripting involved, much faster.