Para que serve a tag <head>
?
O elemento head
representa uma coleção de metadados para o documento. Metadados são, como o próprio nome diz, dados sobre os dados. De forma resumida, você poderá informar o navegador alguns detalhes sobre o conteúdo da página. Por exemplo, <meta charset="UTF-8">
você está especificando a coleção de caracteres que o navegador deve utilizar para analisar sua página. Você ainda pode especificar o autor, descrever o conteúdo da página, ter configurações para SEO, informar folhas de estilos para o navegador utilizar na renderização da página, etc. Toda a documentação, incluindo todos os elementos possíveis para a tag head
você encontra aqui (1).
Qual a diferença entre colocar algo na <head>
e em outros lugares?
Por padrão, todos os elementos presentes dentro da head
não são exibidos pelo navegador. Comportamento esperado, visto que o elemento tem como finalidade definir metadados e não dados da página. Os templates que o autor citam são da biblioteca Handlebars, portanto, não são conteúdos que serão renderizados diretamente ao usuário, mas sim, conteúdos que estarão disponíveis para o JavaScript utilizar futuramente (quando executado). Acredito que o autor apenas define esses templates dentro do elemento head
por não serem renderizados, mas qualquer conteúdo dentro do elemento script
que não possui o MIME Type de JavaScript são desconsiderados pelo navegador ao renderizar a página. Portanto, um elemento definido como abaixo, dentro do elemento body
, funcionaria da mesma maneira.
<body>
<h1>Renderizado</h1>
<script type="text/html">
<h1>Não renderizado</h1>
</script>
</body>
Para deixar ainda mais específico, você pode utilizar type="text/template"
:
<body>
<h1>Renderizado</h1>
<script type="text/template">
Aqui está meu {{template}}.
</script>
</body>
Existe algum comportamento específico que só acontece na <head>
e que não pode ser reproduzido usando o resto da página?
Para este caso, não. Quando não se trata de metadados, eu particularmente acho que fica mais semântico incluir no elemento body
, pois o template faz parte do conteúdo do documento, só não é exibido.
Elemento template
Existe ainda o elemento template
que é definido justamente para este fim. Seu conteúdo é ignorado pelo navegador ao renderizar a página e pode ser acessado via JavaScript.
<h1>Renderizado</h1>
<template id="h1">
<h1>Não renderizado</h1>
</template>
Acredito que hoje o ideal é utilizar este elemento ao invés do script
. Inclusive, web components utilizam esta tag geralmente. O framework Polymer eu sei que usa. Ler também sobre shadow dom.
Referências
- The head element
- The script element