Head Element
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
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
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.