Summary

  • W3C published the first public HTML Templates draft on 14 February 2013. Its central trick was an inert subtree: real parsed HTML held outside the live page until an author needed an instance.
  • HTML 5.1's 2014 draft and the October 2014 HTML5 Recommendation placed template in the language. The current HTML Standard describes a DocumentFragment available through template.content, ready to clone, fill and insert.

A news site can draw a story card once, then publish it twenty times. The headline and photograph change; the frame does not. In early dynamic pages, that simple need could invite a ridiculous little theatre: stash markup in a hidden corner, reconstruct it with strings, or make a script assemble tags like a carpenter paid by the nail. The browser could parse HTML perfectly well, yet it lacked a clean place to keep a parsed piece for later use.

The first public HTML Templates draft of 14 February 2013 offered that place. A <template> could contain markup that the browser parsed into a DOM subtree while leaving it inert. The draft described making instances from its contents. The practical proposal was modest and sharp: keep the ordinary HTML parser, give authors a holding room for reusable structure, and let a script decide when to bring a copy onto the stage.

The room has a strange floor plan. The markup between <template> tags looks like children of the element in the source, yet the DOM stores it in the fragment exposed as template.content. The HTML 5.1 Working Draft of 4 February 2014 spells out why. The fragment belongs to a separate document with no browsing context. While there, scripts do not run; controls do not enter the live form; the template itself renders nothing. The contents can be inspected and copied without pretending they already occupy seats on the page.

That 2014 draft supplies a charmingly concrete demonstration: a table of cats. Each row begins as a template containing cells. The script clones its content, puts a cat's values into the cells, then appends the result to the table. The cats are individual; the table row's structure is shared. A newsroom could use the same arrangement for story cards, adding one clone per article and writing each headline into the appropriate node. A copy becomes part of the page when it is inserted, and its values belong to that copy.

The HTML5 Recommendation of 28 October 2014 carried the element into the main HTML specification. W3C's publication history records the standalone sequence: a 2013 Working Draft followed by a 2014 Working Group Note. The feature's address changed as HTML itself absorbed the work. Its useful division of labor remained: the browser parses and stores structure; the author chooses data, edits the clone and decides when to insert it.

The current HTML Standard still describes template as declaring fragments that script can clone and insert. It says the element represents nothing in a rendering. Its associated DocumentFragment is owned by an inert document, and cloning steps copy the fragment's descendants. The standard also contains newer uses of the element; the little newsroom story needs only its original shelving trick.

There is a moment of comedy in a browser doing so much work for something that appears to do nothing. It reads the markup, builds the nodes, keeps them offstage and waits. But repetition is the real cost in a page with dozens of cards. The template lets an author write the shape once in HTML, then make as many inhabited copies as the day's news requires. The empty room becomes a production line only when the editor opens the door.