Take the 2-minute tour ×

I just stumbled upon something I've never seen before. In the source of Backbone.js's example TODO application (Backbone TODO Example) they had their templates inside a <script type = "text/template"></script>, which contained code that looks like something out of PHP but with JavaScript tags.

Can someone explain this to me? Is this legit?

share|improve this question
Great question and answer. I just ran across this trick in the new YUI App Framework code: new.yuilibrary.com/yui/docs/app/app-todo.html –  mjhm Aug 18 '11 at 20:53
What about type="text/tcl" which I saw in the W3C doc? How to use it? (Should I ask another question?) –  L01man Jun 11 '12 at 14:11
@L01man yes, you should ask another question. –  Nate Glenn Feb 17 '13 at 22:05

7 Answers 7

up vote 220 down vote accepted

Those script tags are a common way to implement templating functionality (like in PHP) but on the client side.

By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.

Backbone doesn't force you to use any particular templating library - there are quite a few out there: Mustache, Haml, Eco, and so on (the one used in the example you linked to is underscore.js). These will use their own syntax for you to write within those script tags.

share|improve this answer
Thanks for your response. So this is a cross-browser solution to having the browser's ignore this code? –  Matt Feb 6 '11 at 9:58
@Matt, exactly that. At the same time it's easy to retrieve the full text again using .innerHTML, hence it's common practice now among templating engines. –  Box9 Feb 6 '11 at 10:01
hi, different Matt here. Would <script type="text/template"> pass an html verification test? –  Matt Apr 5 '12 at 22:16
nevermind, I found on icanhazjs.com that it's valid –  Matt Apr 5 '12 at 22:24
Looking forward to <template /> tag. html5rocks.com/en/tutorials/webcomponents/template & caniuse.com/#search=template –  Volker E. Jun 7 '13 at 21:07

It's legit and very handy!

Try this:

<script id="hello" type="text/template">
  Hello world

Several Javascript templating libraries use this technique. Handlebars.js is a good example.

share|improve this answer
How would you do this alert in raw javascript with jquery? –  tremor Oct 9 '13 at 21:01
@tremor Do you mean in raw javascript without jquery? Something like: var el = document.getElementById('hello'); var html = el.textContent; alert(html); (you'll need to look further into processing script tags' text in IE) –  SgtPooki Oct 16 '13 at 19:03
@SgtPooki ya i meant without, thanks for the answer. What I'd really like to do is src that script to an external file and get it, but I've found that's not really possible.. so I'm diving into AJAX and socket.io now. –  tremor Oct 30 '13 at 16:14
@tremor, I may not understand exactly what you're trying to do, but grabbing external files dynamically, to either run or parse as a template, is definitely possible. Check out requirejs. –  SgtPooki Oct 31 '13 at 16:08

To add to Box9's answer:

Backbone.js is dependent on underscore.js, which itself implements John Resig's original microtemplates.

If you decide to use Backbone.js with Rails, be sure to check out the Jammit gem. It provides a very clean way to manage asset packaging for templates. http://documentcloud.github.com/jammit/#jst

By default Jammit also uses JResig's microtemplates, but it also allows you to replace the templating engine.

share|improve this answer

jQuery Templates is an example of something that uses this method to store HTML that will not be rendered directly (that’s the whole point) inside other HTML: http://api.jquery.com/jQuery.template/

share|improve this answer
jQuery.template is abandoned, and followed up by jsviews.com/#jsrender –  doekman Sep 6 '13 at 19:19

It's a way of adding text to HTML without it being rendered or normalized.

It's no different than adding it like:

 <textarea style="display:none"><span>{{name}}</span></textarea>
share|improve this answer
It is different, a textarea will still insert those elements into the DOM and fetch any external assets (like images) requested. A script tag will not. –  LocalPCGuy May 13 '13 at 22:09
@LocalPCGuy thats not true, including <img src="image.jpg"> inside a textarea will not cause the browser to fetch image.jpg, the browser knows that the content inside a textarea is not meant to be rendered. –  vikki Apr 11 at 17:35
@vikki woops, you are correct, textarea may be one of the few elements that would be a viable replacement for script tag templating. –  LocalPCGuy Apr 11 at 23:41
@LocalPCGuy yeah I think those two can be used interchangebly. If your template has the line </script> you can't use it inside a script tag, so you can use the textarea then, and vice versa. –  vikki Apr 13 at 7:30

By setting script tag type other than text/javascript, browser will not execute the internal code of script tag. This is called micro template. This concept is widely used in Single page application(aka SPA).

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

For micro template, type of the script tag is text/template. It is very well explained by Jquery creator John Resig http://ejohn.org/blog/javascript-micro-templating/

share|improve this answer

<script type = “text/template”> … </script> is obsolete. Use <template> tag instead.

share|improve this answer
<template> tag still isn't supported by Internet Explorer as of IE 11. –  ovinophile Aug 23 at 6:23
In 5 years time use the <template> tag. –  superluminary Sep 30 at 13:06
<script type = “text/template”> can hold anything, they are not parsed. On the other hand, <template> tags are parsed into a DOM, hence needs to valid HTML. Usually, this means that the first will be kept as intact template, while the second will strip away non-html-compliant parts and break the template. ...of course, it's only a problem if you use template engines like mustache or the like. –  arnaud Sep 30 at 13:16

Your Answer


