3

Eu estou lendo um livro que em determinado momento diz o seguinte:

"Agora precisamos de um lugar para colocar nossos templates - uma maneira é usar um elemento existente no nosso HTML, de preferência escondido. Você pode conseguir isso usando o elemento <script> dentro de <head>."

  • Para que serve a tag <head>?
  • Qual a diferença entre colocar algo na <head> e em outros lugares?
  • Existe algum comportamento específico que só acontece na <head> e que não pode ser reproduzido usando o resto da página?

O autor segue:

"Pode parecer estranho no início - mas funciona muito bem."

  • Por que seria estranho usar essa tag para esse fim?

1 Resposta 1

6

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

  1. The head element
  2. The script element

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .