HTML <head> Tag
The HTML <head> tag holds page metadata (title, charset, viewport, links, scripts). Learn its syntax, common meta tags, and examples.
The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.
Where the <head> goes
The <head> is the first element inside <html>, placed directly before the <body>. While the <body> holds the visible page content, the <head> holds the behind-the-scenes information the browser needs to render and identify the page:
<!DOCTYPE html>
<html>
<head>
<!-- metadata goes here -->
</head>
<body>
<!-- visible content goes here -->
</body>
</html>The <head> is technically required, but if you omit it, browsers will silently create one for you and move head-level elements (like <title> and <meta>) into it. Writing it explicitly keeps your document predictable and valid.
Elements you can put in the <head>
The <head> includes the following elements:
- The
<title>tag defines the title of a web page (required). It may be confused with the<h1>tag, but they are different. The<h1>tag specifies the title of page content, whereas the<title>tag is metadata representing the title of the entire HTML content and not its content. - The
<style>tag contains CSS code that defines how HTML elements should be rendered in a browser. - The
<base>tag defines an absolute (base) URL for all relative URLs. - The
<link>tag defines the relationship between the current HTML document and the resource to which it refers, or contains a link to an external style sheet. It can have two attributes: rel="stylesheet" and href. - The
<meta>tag provides additional information (metadata) about an HTML document. The<head>of a page can include different kinds of<meta>elements that may contain name and content attributes. - The
<script>tag contains a script (generally JavaScript), or reference to an external file with scripts. This element can be included in<head>. Sometimes, it is better to put it at the bottom of<body>to improve page load performance. The<script>element may seem empty, but it's not. - The
<noscript>tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or scripts are disabled by the user.
The <head> tag comes in pairs. The content is written between the opening (<head>) and closing (</head>) tags.
Examples
Example of the HTML <head> tag used with the <title> and <style> tags:
Example of a HTML head tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>In the given example, the <head> tag is used with the <title> and <style> tags. The <title> tag defines the title of the document, which is displayed in the browser window. In the <style> tag the style of the document is defined: the background of the document is light gray, the text in the paragraphs marked with the <p> tag is blue, and the links within the <a> tag are red.
Example of the HTML <head> tag used with the <link> tag:
The content of the page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Here the <link> tag connects the page to an external stylesheet at css/style.css (a file in a css folder next to the HTML file). Keeping CSS in a separate file is the standard approach for real projects, because the same stylesheet can be shared across many pages and cached by the browser. The page above will only show styling if that style.css file actually exists at the given path.
Example of the HTML <head> tag used with the <meta> tag:
HTML <head> Tag
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>The <meta> tag provides metadata about the page. The name="description" content is used by search engines as the snippet under a search result. The http-equiv="refresh" line reloads the page every 30 seconds — this is rarely appropriate today (it hurts accessibility and is usually replaced by JavaScript or HTTP headers), so use it sparingly.
The <meta> tags you almost always need
A few <meta> tags are so common that nearly every modern page includes them.
Character encoding and viewport
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Page</title>
</head><meta charset="UTF-8">declares the character encoding so accented letters, symbols, and emoji render correctly. Put it first in the<head>.<meta name="viewport" content="width=device-width, initial-scale=1">tells mobile browsers to match the layout width to the device width instead of zooming out a desktop-sized page. Omitting this is the single most common cause of "tiny" pages on phones, so include it on every responsive page.
Open Graph tags for social sharing
When someone shares your URL on platforms like Facebook, LinkedIn, or Slack, those services read Open Graph (og:) meta tags to build the preview card — the title, summary, and thumbnail image.
<head>
<meta property="og:title" content="Learn HTML - W3docs" />
<meta property="og:description" content="A beginner-friendly HTML tutorial." />
<meta property="og:image" content="https://www.example.com/preview.png" />
<meta property="og:url" content="https://www.example.com/learn-html" />
</head>Note that Open Graph tags use the property attribute (not name). The og:image URL should be absolute (start with https://), because the social platform fetches it from its own servers. See the <meta> chapter for the full list of <meta> tags.
Attributes
In HTML5, the <head> tag does not have any specific attributes. It only supports Global Attributes and the Event Attributes.