HTML5 Zone is brought to you in partnership with:

Emil Stenström is an interface developer and internet strategist working as a consultant for Valtech in Sweden. As an interface developer he blogs about HTML, CSS and Javascript, and how to make browsers do what you want. As an internet strategist he blogs about how to make best use of the web, using all the new technologies optimally. Emil is a DZone MVB and is not an employee of DZone and has posted 11 posts at DZone. You can read more from them at their website. View Full User Profile

HTML includes

10.12.2011
| 9158 views |
  • submit to reddit
One of the first questions beginners ask when starting to learn HTML is how to do includes. They seldom know that includes is what they are asking about, but instead feels bad when having to copy and paste that same menu HTML each time they want a new page. “Do I have to type the same thing over and over?”.

After asking friends how to solve the problem they get the answer that they now have to learn PHP. Or ASP. Or JSP. Or some other strange language they don’t need. And install this thing here, and that thing there. What does your server host support? Oh, no, you need to configure stuff better. No, that setting is insecure… You know the drill, I’m sure you’ve walked someone through it sometime.

So, a way to include a piece of HTML into a random page would clearly benefit beginners learning HTML. But that’s not all:

  • Browsers would be able to cache components of a page, and therefor load new pages using common components faster.
  • Less work learning new template languages just to find that language X does not have a way to include things.
  • Possible to learn componentization by looking at existing sites and learn from them. This is an area we need to be better in.
  • Easy to make fallbacks by linking directly to the corresponding HTML snippet.

So, how would this be implemented? We need a tag that acts as a kind of include, so what about <object>? Just point to the HTML file you want and voilá, it gets included. Since this is HTML it would work exactly the same across all server-side languages.

Luckily, this is already in the HTML5 spec. At the bottom of the object specification. Iinterestingly, I found it after writing this article… Great minds think alike :)

In this example, an HTML page is embedded in another using the object element.

<figure>
 <object data="clock.html"></object>
 <legend>My HTML Clock</legend>
</figure>

Good! And it even seems to work in current browsers (Thanks Siegfried). I’ve tested it in Firefox, Opera, and Safari, and it works the same in all of them. Internet Explorer 6, 7, 8 (beta 2) just ignores it altogether.

The problem is, the current implementation is to handle them just like iframes. And there’s of course lots of problems with that approach:

  • Currently, an object element without a height and width gets rendered as a 300 x 150 pixel block. There is no reason whatsoever to do this when including HTML. This must change for this to be usable.
  • The included HTML needs to be stylable with the CSS rules on the page it’s included from. Currently, this does not work, included HTML is treated as an iframe. Must be changed if this is to be usable.
  • Are HTML components full HTML pages? Do they include a doctype and a <head>, and do those get included? I assume only HTML inside <body> gets included in the new page. No CSS. No JS linked to in <head>.
  • Clicking links inside included HTML should be handled as if the HTML was on the current page. This follows the same concept as if the HTML was included in the server side, and is needed if this is ever going to be used for a menu.

So, what do you think, is this a good idea? Personally, I’m hoping more concepts from template languages start to move into HTML.

Update: Thanks to the comments (thanks zcorpan) I now have found exactly the above in HTML5. It’s called <iframe seamless>. It meets all the points in my list, and I’m now really looking forward to the first implementation.

References
Published at DZone with permission of Emil Stenström, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Robert Craft replied on Thu, 2012/01/26 - 7:07am

Well, object is not new at all. It worked this way at least since html 4. I’m not quite sure about html 3.Although the IE… But that’s always the same. There is 1 thing to mention when “including” html via object. The included page is a full html page. It may contain links. By clicking on one of those links only the embedded page changes. This may be useful, but in other circumstances not what you want to. Generally including html is not a _that_ good idea. It is a security risk. You know including html via iframe? You know that mainly russian criminals include invisible trojans mainly via iframe? Including html in some other way opens more risks. There is a common mechanism including html snippets (f.ex. a navigation menu) on the server side, called SSI (server side includes). No need for php or the like. The page is still delivered as a full html page. This feature was especially meant for including repetitive parts like navigation menues, footers and the like.

Spring Security

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.