The main role of the <head> element is to store all the head elements. These head elements contain additional metadata about the document or links to other sources that are necessary for the document to appear or function properly in a web browser.
The head elements together describe the attributes of the document like title, meta data like character set, tell the browser where to look for the style sheets or the scripts that allow you to expand the HTML in a very dynamic and interactive manner.
The following are the HTML elements that you can include in the <head> tag: <title>, <base>, <link>, <style>, <meta>, <script> and the <noscript> element.
The <title> element specifies the title of a document. It is necessary for a valid document to contain the title element. There is only one title element allowed in a document. It must be placed in the < head> element. A title is a plain text element that contains entities and does not contain any markup tags.
The title of a document can be used for a variety of purposes. For example:
The following example shows how to add a title to an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Tip: A good title should be concise and relevant to the content of the document, as search engines' web crawlers pay close attention to the keywords used in titles. Ideally, titles should be no more than 65 characters long. Check out the guidelines for titles.
The <base> element in HTML defines the base URL for all the relative links in the document. For example, you can specify the base URL at the top of the page and then all the following relative links will use the base URL as a source of reference. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="https://www.codinghub360.com/">
</head>
<body>
<p><a href="html-tutorial/html-head">HTML Head</a>.</p>
</body>
</html>In the example above, the hyperlink will resolve to https://www.codinghub360.com/html-tutorial/html-head regardless of the URL of the current page.
The reason for this is that the relative URL of the link, which is html-tutorial/html-head is added at the end of your base URL: https://www.codinghub360.com/.
Warning: The HTML < base> element must be placed in front of any element that references an external source. HTML only allows one base element per document.
The <link> element is used to link the current document to an external document or resource. One of the most common uses of link element is linking to external style sheets.
<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="style.css">
</head>To learn more about style sheets, please refer to the CSS tutorial section.
Note: The <head> element of an HTML document can contain any number of the <link> element. A <link> element contains attributes but no content.
The HTML element <style> defines the style information that is included in the HTML document. Within the HTML element, the <style> rules define how HTML elements are rendered in the browser.
<head>
<title>Embedding Style Sheets</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head>
Note: If you have a single document with a unique style, then you can use an embedded style sheet. However, if you have multiple documents with the same style, then you will need to use the external style sheet. Learn more about HTML styles in the tutorial.
The <meta> tag contains metadata about the HTML. Metadata describes and provides information about another piece of data. Here is an example:
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>In the next chapter, we'll go into more detail about the meta element.
Using the <script> element, you can define client-side scripts, like JavaScript in HTML.
In the following example, you'll see a welcome message pop up in your browser:
<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>In the later chapter, we’ll go over the script and the noscript element.