What is the <head> tag used for?
The head element represents a collection of metadata for the document. Metadata is, as its name says, data about the data. In short, you can tell the browser some details about the content of the page. For example, <meta charset="UTF-8"> you are specifying the character collection that the browser should use to parse your page. You can still specify the author, describe the content of the page, have settings for SEO, inform style sheets for the browser to use in page rendering, etc. All documentation, including all possible elements for the head tag, you'll find here / a> (1).
What's the difference between putting something in <head> and elsewhere?
By default, all elements within head are not displayed by the browser. Expected behavior, since the element is intended to define metadata, not page data. The templates that the author cites are from the Handlebars library, so they are not contents that will be rendered directly to the user, but rather, content that will be available for JavaScript to use in the future (when executed). I believe that the author only defines these templates within the head element because they are not rendered, but any content within the script element that does not have MIME Type of JavaScript are disregarded by the browser when rendering the page. Therefore, an element defined as below, within the element body , would work in the same way.
<body>
<h1>Renderizado</h1>
<script type="text/html">
<h1>Não renderizado</h1>
</script>
</body>
To make it even more specific, you can use type="text/template" :
<body>
<h1>Renderizado</h1>
<script type="text/template">
Aqui está meu {{template}}.
</script>
</body>
Is there any specific behavior that only happens in <head> and can not be played using the rest of the page?
In this case, no. When it's not about metadata, I particularly think it's more semantic to include in the body element, since the template is part of the document's content, it just does not display.
Element template
There is also the template element that is defined just for this end. Your content is ignored by the browser when rendering the page and can be accessed via JavaScript.
<h1>Renderizado</h1>
<template id="h1">
<h1>Não renderizado</h1>
</template>
I think the ideal is to use this element instead of script . Including, web components usually use this tag. The framework Polymer I know you use. Also read about shadow gift .
References
The head element
The script element
