title: Why should we wrap our templates inside script blocks?
body: <h2>Background</h2>
  
  <p>All the JS template engines recommend putting your template text inside script blocks like so:</p>
  
  <pre><code>&lt;script id="peopleTemplate" type="text/template"&gt;
     {#people}
     &lt;div class="person"&gt;Name: {firstName} {lastName}&lt;/div&gt;
     {/people}
  &lt;/script&gt;
  </code></pre>
  
  <p>but many developers (understandably) dislike this because they lose HTML syntax highlighting in their code editor inside the script block. I've seen the workarounds like this: <a href="https://stackoverflow.com/questions/14449312/keep-correct-html-syntax-highlighting-in-script-text-html-templates">Keep correct HTML syntax highlighting in &lt;script&gt; &quot;text/html&quot; templates</a>  . This question is not asking about workarounds.</p>
  
  <p>I know one danger is that web browsers will attempt to fix invalid HTML so calling $('#peopleTemplate').html() will have unpredictable results. However, off the top of my head, I cannot think of any examples to illustrate this.</p>
  
  <h2>Question</h2>
  
  <p>What are some of the other dangers of replacing the script tag with a div ? </p>
  
  <p>Bonus: can someone come up with a good fiddle that illustrates the browser HTML auto-fixing?</p>