Any way of using frames in HTML5?

For school I must make a website and it must use those crappy old damn fml frames. I've already complained about this to my teacher without any success :(

I want to use HTML5, but it seems that frames are deprecated. Am I really required to use XHTML or HTML 4? Is there some work-around that makes my pages validate HTML5 with use of frames?

Solution 1:

I know your class is over, but in professional coding, let this be a lesson:

"Deprecated" means "avoid use; it's going to be removed in the future"
Deprecated things still work - just don't expect support or future-proofing
If the requirement requires it, and you can't negotiate it away, just use the deprecated construct.
- If you're really concerned, develop the alternative implementation on the side and keep it ready for the inevitable failure
- Charge for the extra work now. By requesting a deprecated feature, they are asking you to double the work. You're going to see it again anyway, so might as well front-load it.
- When the failure happens, let the interested party know that this was what you feared; that you prepared for it, but it'll take some time
- Deploy your solution as quickly as you can (there will be bugs)
- Gain rep for preventing excessive downtime.

Solution 2:

Now, there are plenty of example of me answering questions with essays on why following validation rules are important. I've also said that sometimes you just have to be a rebel and break the rules, and document the reasons.

You can see in this example that framesets do work in HTML5 still. I had to download the code and add an HTML5 doctype at the top, however. But the frameset element was still recognized, and the desired result was achieved.

Therefore, knowing that using framesets is completely absurd, and knowing that you have to use this as dictated by your professor/teacher, you could just deal with the single validation error in the W3C validator and use both the HTML5 video element as well as the deprecated frameset element.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <!-- frameset is deprecated in html5, but it still works. -->
    <frameset framespacing="0" rows="150,*" frameborder="0" noresize>
        <frame name="top" src="http://www.npscripts.com/framer/demo-top.html" target="top">
        <frame name="main" src="http://www.google.com" target="main">
    </frameset>
</html>

Keep in mind that if it's a project for school, it's most likely not going to be something that will be around in a year or two once the browser vendors remove frameset support for HTML5 completely. Just know that you are right and just do what your teacher/professor asks just to get the grade :)

UPDATE:

The toplevel parent doc uses XHTML and the frame uses HTML5. The validator did not complain about the frameset being illegal, and it didn't complain about the video element.

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
    <head>
    </head>
    <frameset framespacing="0" rows="150,*" frameborder="0" noresize>
        <frame name="top" src="http://www.npscripts.com/framer/demo-top.html" target="top">
        <frame name="main" src="video.html" target="main">
    </frameset>
</html>

video.html:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="player-container">
            <div class="arrow"></div>
            <div class="player">

                <video id="vid1" width="480" height="267" 
                    poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
                    durationHint="33" controls>
                    <source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" />

                    <source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" />

                </video>

        </div>
    </body>
</html>

Solution 3:

Maybe some AJAX page content injection could be used as an alternative, though I still can't get around why your teacher would refuse to rid the website of frames.

Additionally, is there any specific reason you personally want to us HTML5?

But if not, I believe <iframe>s are still around.

Solution 4:

You'll have to resort to XHTML or HTML 4.01 for this. Although iframe is still there in HTML5, its use is not recommended for embedding content meant for the user.

And be sure to tell your teacher that frames haven't been state-of-the-art since the late nineties. They have no place in any kind of education at all, except possibly for historical reasons.

Solution 5:

Frames were not deprecated in HTML5, but were deprecated in XHTML 1.1 Strict and 2.0, but remained in XHTML Transitional and returned in HTML5. Also here is an interesting article on using CSS to mimic frames without frames. I just tested it in IE 8, FF 3, Opera 11, Safari 5, Chrome 8. I love frames, but they do have their problems, particularly with search engines, bookmarks and printing and with CSS you can create print or display only content. I'm hoping to upgrade Alex's XHTML/CSS frame without frames solution to HTML5/CSS3.