Head Element in HTML

What Is Head Element in HTML?

The head element includes the document's title that can be displayed to the end user and metadata elements that are not displayed to the end user but rather describe the document. Further, the head element can include JavaScript script elements that can be evaluated and dynamically alter other HTML elements of the document.

The head element often includes elements such as title, meta, style, link, and script.

Title Element

The title element is important for web crawlers which crawl the document with the purpose of best understanding its content. Further, the title from the title element is often displayed in a web browser tab for a given document.

<head>
  <title>
    Witcher Horses
  </title>
<head>

Meta Elements

The meta element is dedicated to HTML document's metadata. There might be many - and most often there are - meta elements for a single HTML document.

The notable meta elements are:

  • charset - specifies character encoding (HTML5 recommends UTF-8),

  • viewport - controls the viewport (i.e. the area visible to the end user) size and shape - a typical mobile friendly meta viewport content is width=device-width, initial-scale=1,

  • robots - informs web crawlers whether the document should be crawled and to which extent (non-binding for web crawlers) - important for SEO,

  • description - important for SEO,

  • keywords,

  • Open Graph protocol (the Facebook protocol for mapping documents into Social Graph objects), and

  • other.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="robots" content="index,follow,all">
  <meta name="description" content="The site with all of the Witcher horses! All in one place!">
  <meta name="keywords" content="wither, horses, geralt, ciri, roach, kelpie">
  <meta property="og:site_name" content="soundof.IT" />
<head>

Style

The style element contains Cascading Style Sheets markup for an HTML document.

<head>
  <style>
    .horses {
      color: red;
      font-weight: bold;
    }
  </style>
<head>

Link

The link element is dedicated to:

  • indicating the canonical document for a given HTML document,

  • indicating alternate language versions for a given HTML document, and

  • creating relations with external resources such as style sheets or a favicon icon.

<head>
  <link rel="canonical" href="https://soundof.it/html-tutorial">
  <link rel="alternate" hreflang="en" href="https://soundof.it/html-tutorial" />
  <link rel="alternate" hreflang="pl" href="https://soundof.it/html-bryk" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...">
<head>

Script

The script embeds executable (most often JavaScript) code and/or data (e.g. JSON data). A script element can include executable code and/or data within itself (inline) or point to an external resource using src.

<script>
  console.log("Roach is Geralt's horse.")
</script>

<script src="bundle.js"></script>

A script element does not have to be within a head element. Putting a script element within a body element is acceptable.

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.