How to create valid HTML5 using frames?

P

5

45

For school I have to make a website that must use frames. I complained to my teacher without success.

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

Phosphorescent answered 30/1, 2011 at 22:34 Comment(6)

Part of the learning process at school is learning that (a) profs aren't infallible (b) that sometimes there are requirements that are stupid, dated, archaic, and are still requirements. :) Best of luck. :) – Helgeson 30/1, 2011 at 22:39

This teacher of yours shouldn't be teaching web development if this is the extent of his knowledge. – Marti 30/1, 2011 at 22:46

I had to build a frame based website for school in 2004-2005. Even then they were laughably out of date. Good to know it's still going strong! – Buzzer 1/8, 2012 at 8:18

Frames are still widely used in e-learning, with some content connecting via SCORM, persisting state using a frameset. Hopefully that'll go away soon, but in the meantime your teacher appears to have provided you with a potential job in the education industry! – Copolymerize 30/10, 2013 at 0:56

<iframe seamless="seamless"> – Tellurize 23/5, 2014 at 13:32

@Valen, because that is well supported caniuse.com/#feat=iframe-seamless – Doughty 25/9, 2014 at 14:37

L

28

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>

Labarum answered 30/1, 2011 at 22:54 Comment(11)

Is it possible to define the video element and its attributes in a second DOCTYPE and use XHTML with the video tag? – Phosphorescent 30/1, 2011 at 22:56

@Radek - I updated my answer to show that the parent document can use a different doctype than the child frames. Great question! You should just bite the bullet and do what your professor/teacher is asking you to do, and know that you're going to be a great asset to your future employers! Nice job! – Labarum 30/1, 2011 at 23:13

@jmort253 stupid me. Of course! I can just use XHTML for the parent page and HTML5 for the frames. :) – Phosphorescent 30/1, 2011 at 23:15

@RadekS You can use whatever doctype you want - the determining factor is whether the browser supports video not the document type. None of Firefox, Chrome or Opera care, they'll play the videos whatever. – Nigro 31/1, 2011 at 2:39

@Nigro I know, but I want it to validate. :) – Phosphorescent 3/2, 2011 at 18:54

@jmort253: It's just that, that frames don't work in e.g. Firefox version 13.0.1, at least not without an add-on. I'm sorry to hear, WTP, that you can't get your teacher to not use frames :-((( Hope you can find a way to make the project good anyway :) – Varien 3/7, 2012 at 15:35

@LasseBunk - This all happened over a year ago. ;) Maybe he did get through to his teacher by showing him this question. – Labarum 4/7, 2012 at 0:56

@jmort253: Ooops, I didn't notice that :-) Yeah, we must hope that he got his teacher to require otherwise :) Have a good day :) /Lasse – Varien 4/7, 2012 at 7:47

@pattyd - Fixed. It looks like any site that has the X-Frame-Options header set to SAMEORIGIN can no longer be included in a frame or iframe, so I replaced it with duckduckgo. – Labarum 7/7, 2013 at 20:59

@jmort253 Cool, thanks! BTW, what is X-Frame-Options? Do I have to use that for frames support in HTML5 or something? – Cassaundracassava 8/7, 2013 at 0:50

@Cassaundracassava - No. This is a header returned with the HTTPResponse that tells user-agents (i.e. your browser) not to allow the website to be embedded in iframes or frameset elements. Sites like Google, Stack Overflow, and Yahoo do this to prevent other websites from pretending to be them. Give it a try yourself. Try to put this on your website: <iframe src="http://stackoverflow.com" width="800" height="1200" />, then do the same with duckduckgo.com. Good luck! – Labarum 8/7, 2013 at 1:38

D

42

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.

Donau answered 29/9, 2011 at 13:36 Comment(0)

L

28