The <head> section contains information about the HTML document like meta, links, styles, scripts, titles, etc.
<head>
<title>HTML Head Article</title>
</head>
The contents of the HTML head are not displayed in the browser when the document is loaded.
Note: The head and the body sections together make up the HTML document.
Elements of <head> Tag
The HTML <head> tag can contain the following tags:
- HTML
<title>tag - HTML
<meta>tag - HTML
<link>tag - HTML
<style>tag - HTML
<script>tag - HTML
<base>tag
HTML <title> tag
The HTML <title> tag is used to define the title of the document which is displayed at the browser title bar. For example,
<head>
<title>My First Title</title>
</head>
Browser Output
To Learn more about the <title> tag, visit HTML Title.
HTML <meta> tag
The HTML <meta> tag is used to add metadata (information about data) about the document. Metadata includes information like character set, page description, author name, viewport settings, etc. For example,
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
<meta name="keywords" content="HTML, Learn, Tutorial">
<meta name="author" content="codemy team">
</head>
To learn more about the <meta> tag, visit HTML Meta Elements.
HTML <link> tag
The HTML link tag is used to specify the relation between the document and an external resource. For example,
<head>
<link href="/styles/index.css" rel="stylesheet">
</head>
Here,
The <link> tag lets us use CSS styling from index.css in our HTML page.
Note: It is mostly used to add stylesheets and favicons.
HTML <style> tag
The HTML <style> tag is used to add CSS rules to the document. For example,
<head>
<style>
h1 {
color: red;
}
</style>
</head>
Here, <h1> tags in the HTML will be styled to red color.
To learn more about the <style> tag, visit HTML Style.
HTML <script> tag
The HTML <script> tag is used to add Javascript to the document. For example,
<head>
<script>
console.log('hi');
</script>
</head>
Here, we are writing javascript code inside the <script> tag.
We can also link HTML documents with external javascript files using the src attribute. For example,
<head>
<script src="scripts/main.js">
</head>
Here, using <script> tag we can add javascript features from main.js in our HTML document.
HTML <base> tag
The HTML <base> tag is used to define the base URL for the document. The base URL refers to the common part of the URL across all the links in the webpage. All relative links in the document will point to the URL in the base tag. For example,
<head>
<base href="https://codemy.com" target="_blank">
</head>
<body>
<img src="images/logo.png" alt="Logo of codemy">
</body>
Here, the image will load from https://codemy.com/images/logo.png instead of images/logo.png. This is because the <base> tag will add https://codemy.com/ before the src of the image and any other relative links on the webpage.
Complete Example
Finally, Let us look at what a <head> section of a real site might look like.
<head>
<title>HTML Head Article</title>
<meta charset="UTF-8">
<meta name="description" content="HTML Tutorial">
<meta name="keywords" content="HTML, Learn, Tutorial">
<meta name="author" content="codemy team">
<base href="https://codemy.com" target="_blank">
<link href="/styles/index.css" rel="stylesheet">
<script src="scripts/main.js">
</head>