HTML <head> Element and What Goes Inside It
The HTML <head> element contains metadata and resources used by the document rather than the page's main visible content. It normally contains the page title, metadata, stylesheets, icons, canonical links, scripts and other document-level settings.
In a normal HTML document there is one <head>, placed inside <html> before <body>.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Head Example</title>
</head>
<body>
Page content
</body>
</html>The visible page content belongs in the <body> element. The document title itself is defined in the head and is shown by browsers in places such as the tab or window title.
Common Elements Used Inside <head> Top ↑
| Element | Purpose |
|---|---|
<title> | Sets the document title. A document should have a useful, descriptive title. |
<meta> | Provides metadata such as character encoding, viewport settings, page description and robots directives. |
<link> | Connects the document to resources or relationships such as stylesheets, icons and canonical URLs. |
<script> | Loads or contains JavaScript and related script data. |
<style> | Contains CSS rules written directly in the document. |
<base> | Sets the base URL or default target used to resolve relative URLs. Use it carefully because it affects links throughout the document. |
Charset, Viewport and Description Top ↑
For modern HTML pages, declare UTF-8 early in the head. Responsive pages also commonly include the viewport meta element.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A concise description of this page.">The old meta keywords element is not needed for modern SEO and should not be added simply to list search terms.
Stylesheets, Canonical URLs and Favicons Top ↑
The <link> element can declare relationships between the current document and other resources.
<!-- External stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- Canonical URL -->
<link rel="canonical" href="https://www.example.com/page">The canonical link is used to identify a preferred URL for duplicate or very similar content. It should point to the intended canonical version of the page.
Internal CSS with <style> Top ↑
Page-specific CSS can be placed inside a <style> element in the head. Shared styles are usually easier to maintain in external stylesheets.
<style>
.notice {
padding: 1rem;
border: 1px solid #ccc;
}
</style>Scripts in the Head Top ↑
A script placed in the head does not simply mean it must finish loading before the page can work. Script-loading behavior depends on attributes such as defer, async, and type="module".
<!-- Download while HTML is parsed; execute after parsing -->
<script src="app.js" defer></script>
<!-- Independent script that can run as soon as it is ready -->
<script src="analytics.js" async></script>
<!-- JavaScript module scripts are deferred by default -->
<script type="module" src="app.js"></script>Use the script tutorial for more detail. Avoid loading unnecessary scripts in the head because they can delay rendering or consume bandwidth.
Preloading Important Resources Top ↑
rel="preload" tells the browser to fetch a resource early because the page is expected to need it soon. Use preload selectively; preloading too many resources can compete with more important downloads.
<link rel="preload" href="hero.webp" as="image">The as value should match the kind of resource being fetched.
Social Sharing Metadata Top ↑
Social platforms may use metadata placed in the head to build link previews. Open Graph properties are a common example.
<meta property="og:title" content="HTML Head Element Guide">
<meta property="og:description" content="Learn what belongs inside the HTML head.">Only add social metadata that your site actually uses and keep it consistent with the page content.
What Should Not Go in <head>? Top ↑
Normal visible page content such as headings, paragraphs, forms, tables and images belongs in <body>, not in <head>.
<head>
<title>Example</title>
</head>
<body>
<h1>Visible page heading</h1>
<p>Visible page content</p>
</body>Common <head> Mistakes Top ↑
Adding meta keywords Top ↑
Do not fill the head with a meta keywords list. Use a useful title, description and page content instead.
Using an obsolete doctype Top ↑
For modern HTML, use the concise HTML5 declaration <!doctype html>.
Putting visible content in the head Top ↑
Headings, paragraphs, forms, images and other visible document content normally belong in the body.
Loading every script without considering execution behavior Top ↑
Choose normal, defer, async or module loading based on script dependencies and when the code needs to run.
Preloading too many files Top ↑
Preload only resources that are genuinely important early in page rendering.
Related HTML Tutorials Top ↑
Frequently Asked Questions Top ↑
It contains document metadata and resource declarations such as the title, meta elements, stylesheets, canonical links, icons and scripts.
Most head content is not rendered as the page's visible body content, although items such as the title affect browser and external interfaces.
A useful starting point is a UTF-8 charset declaration, viewport metadata for responsive pages, and a descriptive title. Other elements depend on the page.
No. A meta keywords list is not needed for modern SEO.
Yes. When external scripts are placed there, attributes such as defer, async or type="module" can control when they execute.
No. Normal visible document content such as headings and paragraphs belongs in the body element.
Meta Tags BODY tag
HTML
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
| Babita RAj | 12-03-2013 |
| i want to learn html properly | |