Use iframes with XHTML 1.0 Strict

by Mads Kristensen 4. November 2009 12:26

Recently I had to use iframes on a website conforming to XHTML 1.0 Strict. As you might know, the XHTML 1.0 Strict doctype doesn’t allow the use of iframes. The XHTML 1.0 Transitional doctype on the other hand, does allow you to use iframes, but I don’t like to use that doctype. The reason is, as the name implies, that it’s a doctype meant for make the transition from HTML into XHTML – a sort of a temporary solution.

When building new websites I like to use a strict doctype because it doesn’t allow for many of the style and behavioral tags that is much better placed in stylesheets and JavaScript.

What’s needed is a doctype that conforms to XHTML 1.0 Strict which also allows for iframes.

A solution

What I came up with was very simple, but may be considered a hack by some. Basically, I took the doctype declaration (DTD) of XHTML 1.0 Strict and added support for iframes. I found how iframes was supported in the transitional DTD and copied it to the Strict DTD. It allows for some attributes like width and height that the Strict DTD doesn’t, so I removed those and then added support for the allowtransparency attribute.

So to make iframes work on your own invalid XHTML 1.0 Strict page, just replace the doctype at the top of your pages with this new one:

<!DOCTYPE html SYSTEM "http://madskristensen.net/custom/xhtml1-iframe.dtd">

I suggest you download and host the DTD on your own server instead of using mine in case I forget to pay my hosting fee.

Check out the demo of XHTML 1.0 Strict with Iframe

A hack?

Some might say it’s a hack because by using this DTD the page is no longer XHTML 1.0 Strict. That is correct. It is now something new and different, but completely identical to XHTML 1.0 Strict with support for iframes. So it’s XHTML 1.0 Strict with Iframe.

XHTML have build in support for custom DTDs and thus this is completely supported and valid XHTML. If you don’t like using other doctypes than the few main ones created by the W3C then I have to ask why? What does it give you, your users or the quality of the page that this new one doesn’t?

In my book, it comes down to using a doctype that is based on known standards (XHTML 1.0 Strict in this case) so it still make sense to other devs when they read the markup. It’s also important that the DTD is strict (yep, this DTD is still strict), but most of all it’s important that the markup conforms correctly to the DTD so the entire page is valid. Remember, when using custom DTDs your page is still valid XHTML.

Note

I tried using XHTML 1.1 modules to build the DTD, but it never worked out for me. I got to the point where the iframe tag was valid, but not allowed in any other tags including body. I couldn’t seem to find a way to get full support for it. If you know how, please let me know.

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

Tags: , ,

Client-side

Comments

11/4/2009 3:37:09 PM #

trackback

Use iframes with XHTML 1.0 Strict

Thank you for submitting this cool story - Trackback from PimpThisBlog.com

PimpThisBlog.com |

11/4/2009 3:57:14 PM #

Martin S.

Interesting!

I wouldn't do anything like this though, instead I would use the transitional doctype on those pages where iframes are used.

By the way, iframes are evil and shall not be used. ;)

Martin S. Sweden |

11/4/2009 4:06:38 PM #

Mads Kristensen

The problem is that there is no real alternative to iframes. The object tag page-include doesn't work in IE. I also think iframes are evil, but if you need them, you need them.

Mads Kristensen United States |

11/4/2009 4:23:08 PM #

Jason Derrasa

Thank you for the tutorial,but can google hurt ranking for this?Because google don't like iFrames.

Jason Derrasa United States |

11/4/2009 4:40:47 PM #

Mads Kristensen

Google don't care if you use this new DTD instead of XHTML 1.0 Strict or Transitional when using iframes. Google doesn't read the DTD

Mads Kristensen United States |

11/4/2009 5:30:28 PM #

Craig

Thanks for an innovative solution.  By the way, the Google home page uses iframes.

Craig United States |

11/5/2009 8:11:22 PM #

Stickle Bricks

Thanks for posting, I can get a bit obsessive about XHTML validation, although thankfully I haven't needed to use iframes recently.

Out of interest, if the W3C have deemed that iframes are outdated, what methods do they propose should be used instead?

Stickle Bricks United Kingdom |

11/5/2009 9:40:54 PM #

Mads Kristensen

You should use the object tag as shown here intranation.com/test-cases/object-vs-iframe/

The problem with using the object tag for this is that it doesn't work in IE

Mads Kristensen United States |

11/6/2009 12:01:02 AM #

Kim Larsen

Why XHTML when the language is dead (until it probably gets a new life in HTML5)?

Kim Larsen Denmark |

11/6/2009 3:26:18 PM #

Niche Profit Classroom

great solution on the iframes. Thank you. I'm going to try it on my blog..

Niche Profit Classroom United States |

11/6/2009 3:46:51 PM #

pingback

Pingback from random.cgi-biz.com

CLIENT-SIDE - iframes XHTML 1 0 Strict - Random Things To Blog

random.cgi-biz.com |

11/6/2009 5:10:33 PM #

Chris

This is awesome. I can't even imagine the amount of headaches you just saved people from. IFrames are used so often, even today, and it's generally a pain in the @ss. Though I try to avoid using IFrames at all cost, this is definitely a great future resource. Thanks Mads!

Cheers,

Chris

Chris United States |

11/6/2009 8:47:32 PM #

matt

or just use the <object> tag. Easy.

matt United States |

11/8/2009 1:02:52 PM #

Vinc

Yeah true, but then ie won't show external url content when using objects.

Vinc Netherlands |

11/7/2009 12:05:08 AM #

Petr

Conditional comments with object should work, but thank you for nice solution.
BTW: is there a way how to add own attributes and stay strict?

Petr Czech Republic |

11/10/2009 12:26:59 PM #

trackback

Social comments and analytics for this post

This post was mentioned on Twitter by AndyBeard: Use iframes with XHTML 1.0 Strict http://bit.ly/EkYMX (@pageoneresults will love this)

uberVU - social comments |

Comments are closed

About the slave

Mads Kristensen Mads Kristensen
Web developer at ZYB and founder of BlogEngine.NET. More...

LinkedIn ZYB Facebook Last.fm Twitter View Mads Kristensen's profile on Technorati

The Lounge

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008