Learn how to use the HTML <head> element on your website.
The HTML <head> element is a container for metadata (information) about your web pages, such as page title, styles, and scripts.
The content inside the <head> element is primarily read and processed by machines (e.g. a browser), not by your site visitors.
The <head> element should not be confused with the <header> element, which serves a different purpose.
The <head> element is placed right below the opening <html> tag, and right before the opening <body> tag:
<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>The following HTML elements can be put inside the <head> element:
- <title>
- <link>
- <style>
<meta>- <script>
<base>- <noscript>
Examples
Let’s look at a few examples of how to use the <head> element with some commonly used metadata elements inside.
The <title> element
The <title> element defines your HTML document’s title, which is displayed in the browsers page tab:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body></body>
</html>If you move your mouse over any website’s page tab and hold it still for a few seconds, you’ll get a small popup displaying the whole page title.
The <style> element
The <style> element contains styling information for your HTML document (typography, spacing, colors, animations, etc.) written in CSS:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<style type="text/css">
body {
background-color: red;
}
p {
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body></body>
</html>The <link> element
The more modern way of applying styles to HTML documents is by importing external CSS style sheets, with the <link> element:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<link href="/styles/main.css" rel="stylesheet" />
</head>
<body></body>
</html>Good to know: if you use both the <style> and the <link> element in the same document, the styles will be applied in the order you include them in your document. CSS cascades, so whatever comes last (from top to bottom) will override previous styles, if they address the same HTML elements.
The <script> element
The <script> element is used to execute JavaScript in two different ways:
- By embedding JavaScript code directly inside your document (like you saw with the
<style>element). - By importing external JavaScript script files via the
srcattribute.
Embed JavaScript code directly inside your document:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script>
// Make background color red
document.body.style.backgroundColor = "red"
</script>
</head>
<body></body>
</html>Import an external JavaScript file:
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script src="/scripts/main.js"></script>
</head>
<body></body>
</html>