create html templates textarea or script or div or else

Question

I have seen html templates created using any of the following tags

<textarea>
<script>
<div>

Which one is better and why?

Which of the following way of creating html templates is better and y?

CSS:

.template {
  display: none;
}

textarea :

<textarea class="template" id="tmpl1">
  <div>adfsdfsdfs</div>
</textarea>

script :

<script type="text/html" id="tmpl1">
  <div>adfsdfsdfs</div>
</script>

div :

<div class="template" id="tmpl1">
  <div>adfsdfsdfs</div>
</div>

I had faced problem with script tag here

could i suggest a better way for templating , that is not one of the tree above as i would use none of them — Billybonks, Jan 25 '13 at 10:50

score 0 · Answer 1 · answered Jan 25 '13 at 13:04

0

i would suggest none of the above options take a look at Mustache it was created by one of the founders of git hub

http://mustache.github.com/

definitely my favorite way to do html templating

answered Jan 25 '13 at 13:04

Billybonks

1,568
3
15
32

The question is about how to supply the template to the browser. The templating engine used isn't relevant. Any of the techniques discussed in the question could be used to store Mustache templates. (For that matter, since there are not variables in any of the example templates, they could already be moustache). – Quentin Jan 25 '13 at 13:08
how is the templating engine irrelevant?... you wont store your mustache inside a script tag if it is meant to be in a div tag etc. the fact is the current templating engine that the above question is using. expects you to use html tags to identify what data should be injected where, i am giving him a solution to scrap that altogether and just use a .mustache template file, on a side note my solution expects you to generate the templates before sending them to the browser. – Billybonks Jan 25 '13 at 13:24
"how is the templating engine irrelevant?" — Because the question is about where to keep the templates, not what format the template is in. (Of course, the template engine might be tightly coupled to the code for fetching templates, but that is generally indicative of poor design in the overall template library). – Quentin Jan 25 '13 at 13:26
"you wont store your mustache inside a script tag if it is meant to be in a div tag etc" — You seem to be confusing "Where the template is stored" with either "What the outermost element in the template data is" or "Where the code rendered from the template will be placed". – Quentin Jan 25 '13 at 13:27
"i am giving him a solution to scrap that altogether and just use a .mustache template file" — So your solution is "Keep the templates in separate files instead of embedding them in the HTML document"? If so, then that is the point you should have made rather than "Use Mustache". The problem with doing that is that it adds an extra HTTP request for fetching each template. – Quentin Jan 25 '13 at 13:28
"my solution expects you to generate the templates before sending them to the browser" — Well, obviously. A template isn't much use unless you have built it before using it. Or did you mean that the templates should be rendered into the final code? That wasn't implied by your original answer (Mustache has a JavaScript implementation so it can run client side). The question doesn't have enough information in it to know if that is a good solution anyway, if the same template is being used multiple times or if all the data used comes from the client in the first place, then a server round trip… – Quentin Jan 25 '13 at 13:31
… could be a rather expensive (and thus slow) addition to the process. – Quentin Jan 25 '13 at 13:31
Join http://chat.stackoverflow.com/rooms/23378/templating, i think i am missing something, lets continue in that chat – Billybonks Jan 25 '13 at 15:10
i am using my own templating engine which i can make it work for all the above mentioned template containers. its in my hands. the only thing needed is how to have a perfect container. – Sandeep Jan 28 '13 at 05:11

score 0 · Answer 2 · answered Jan 25 '13 at 13:11

They are all poor choices.

textarea is designed to accept user input

div elements are designed to present content to the user

script elements are designed to hold programs

If you want to embed a template into an HTML document, then I'd write a JavaScript program to store it in a variable (and use a json serializer to generate the JavaScript literal that gets assigned to that variable). That program can then go in a script element.

Alternatively, store the template in a data-* attribute on an appropriate element.

create html templates textarea or script or div or else

2 Answers2