What is the head tag for in html?

Asked

Viewed 6,079 times

3

I am reading a book which at a certain point says the following:

"Now we need a place to place our templates - one way is to use an existing element in our HTML, preferably hidden. You can achieve this by using the element <script> inside <head>."

  • What’s the tag for <head>?
  • What’s the difference between putting something in <head> and elsewhere?
  • Is there any specific behavior that only happens in <head> and that cannot be reproduced using the rest of the page?

The author follows:

"It may seem strange at first - but it works very well."

  • Why would it be weird to use that tag for that purpose?
html tags

1 answer

6


What’s the tag for <head>?

The element head represents a collection of metadata for the document. Metadata is, as its name says, data about the data. Briefly, you can give the browser some details about the contents of the page. For example, <meta charset="UTF-8"> you are specifying the collection of characters that the browser should use to analyze your page. You can still specify the author, describe the content of the page, have settings for SEO, inform stylesheet for the browser to use in page rendering, etc. All documentation including all possible elements for the tag head you find here (1).

What’s the difference between putting something in <head> and elsewhere?

By default, all elements present within the head are not displayed by the browser. Expected behavior, since the element has the purpose of defining metadata and not page data. The templates which the author cites are from the library Handlebars, therefore, it is not content that will be rendered directly to the user, but content that will be available for Javascript to use in the future (when executed). I believe the author just defines these templates within the element head by not being rendered, but any content within the element script who does not own the MIME Type de Javascript are disregarded by the browser when rendering the page. Therefore, an element defined as below within the element body, would work 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 that cannot be reproduced using the rest of the page?

For this case, no. When it’s not about metadata, I particularly think it gets more semantic to include in the element body, for the template is part of the document content, only not displayed.

Element template

There is still the element template which is set precisely for this purpose. Its 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 believe that today the ideal is to use this element instead of the script. Inclusive, web Components use this tag generally. The framework Polymer I know you do. Read also about shadow gift.

References

  1. The head element
  2. The script element

Browser other questions tagged html tags

You are not signed in. Login or sign up in order to post.