HTML Includes

I’m putting on my developer hat today.

One of the biggest problems I’ve run into in building browser based applications, is the inability to use includes in HTML.

As a result I’ve started working on a component based HTML includes framework for browser based applications which can extend into the mobile app world. I call them HyperTextComponents.

Example: (note the bolded tags)

<!doctype html>
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="EXPIRES" content="Tue, 31 Jan 2012 12:00:01 GMT">
<title>Hyper Text Components</title>
<link type="text/css" rel="stylesheet" href="css/body.css"/>
<div id="page">
<component id="header" htmlsrc="components/header.html" csssrc="css/header.css"></component>
<component id="nav" htmlsrc="components/nav.html" csssrc="css/nav.css" jssrc="js/nav.js"></component>
<component id="content" htmlsrc="components/content.html" csssrc="css/content.css" cssclass="content"></component>
<component id="content1" htmlsrc="components/content1.html" cssclass="subcontent"></component>
<component id="footer" htmlsrc="components/footer.html" csssrc="css/footer.css"></component>
<div id="loading">
<div id="loadingani">loading...</div>
<script type="text/javascript" src="js/HyperTextComponents.js"></script>

Yes, I realize that the component tag does not comply with HTML standards… but we have to start somewhere.

Next steps for the project:

  1. add tests for recursive components to determine impact on performance
  2. try to optimize inclusion with fewer AJAX calls
  3. browser compatibility


On GitHub:


Leave a Reply

Your email address will not be published. Required fields are marked *