I know people are wondering what they are going to do since the iframe tag has become deprecated in HTML 5. I wrote this tutorial to help people find other ways to do iframe-like things with webpages.
In Hypertext Markup Language (HTML) 5, the <iframe> tag is deprecated. This means that it won't be supported by most browsers soon. How can we replace the iframe? That's a question a lot of people are asking. The solution is really simple, the <object> tag. This is supported in all browsers and is easy to use.
In HTML 5, the attributes supported for the <object> tag are:
- and all of the standard attributes
We will be working with the "data" and "type" attributes for this tutorial only. The type attribute defines the MIME type of the object in the data attribute. The data attribute is the location of what would have been in our src attribute in the <iframe> tag.
For the first example, create a basic HTML 5 document:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An Object Test Page</title> <head> <body> </body> </html>
save this document as "index.html".
Create another document, and in the body tag, put whatever you want. Save this as "framed.html". Make sure to save them in the same folder unless you want to have a harder time with the relative URLs.
If you closed "index.html", open it up again. In the <body> element, add this tag:
We have thus created an object. Save it and open it in your web browser. Nothing shows up! That's because we haven't defined the attributes for the object tag yet.
Go back to your "index.html" file, and change your object element to look like this:
<object data="framed.html" type="text/html"></object>
We have just added some functionality to the object element. Save it and open it up in your browser. "framed.html" will show up in a small part of the page!
However, we aren't finished just yet! We still have to add the backup in case a URL that doesn't work is placed into the object element. We will call this code the "Fallback code" that the browser goes to when a link doesn't work.
Add this to your object element:
<object data="framed.html" type="text/html"><p>This is the fallback code!</p></object>
Now we have the fallback code. Change the data attribute of the object element to a bad URL and see how the fallback code shows up.
You now have a sufficient replacement for the iframe.