HTML Head Element: Complete Guide, Tags, Examples & Best Practices

Learn about the HTML head element, including title, meta, link, CSS, JavaScript, favicons, SEO metadata, viewport settings, examples, and best practices.

By /

HTML – The <head> Element

The HTML <head> element is one of the most important parts of an HTML document, even though most of its contents are not directly visible on the webpage.

It contains information about the document that browsers, search engines, social platforms, and other web technologies need to understand and process the page correctly. This information is often called metadata.

A well-written <head> section can improve page structure, search engine visibility, browser behavior, social sharing, accessibility, performance, and compatibility across different devices.

In simple words, the <body> contains the content people see, while the <head> contains important information and instructions about that content.

What Is the HTML <head> Element?

The <head> element is a container placed between the opening <html> tag and the opening <body> tag.

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my web page.</p>
</body>
</html>

The <head> section contains information such as:

  • The page title
  • Character encoding
  • Viewport settings
  • Search engine metadata
  • CSS files
  • JavaScript files
  • Favicon information
  • Canonical URLs
  • Social media metadata
  • Web application information
  • Resource hints
  • Other metadata used by browsers and services

Most of this information is not displayed as normal page content.

Why Is the <head> Element Important?

The <head> element connects an HTML page with information and resources that help the page work properly.

For example, the browser uses the <title> element inside <head> to determine the title shown in a browser tab.

Similarly, the <meta charset="UTF-8"> declaration tells the browser how the document’s characters should be interpreted.

The <meta name="viewport"> element helps a webpage display correctly on smartphones and tablets.

CSS files can be loaded through <link> elements, while JavaScript can be connected through <script> elements.

The <head> therefore acts as a control and information area for the webpage.

Basic Structure of the <head>

A common modern <head> section may look like this:

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Learn HTML Head Element</title>

    <meta name="description" content="Learn what the HTML head element does and how to use it correctly.">

    <link rel="stylesheet" href="style.css">

    <link rel="icon" href="favicon.ico">
</head>

Each element has a specific purpose.

The <title> Element

The <title> element defines the title of the HTML document.

Example:

<title>HTML Head Element Guide</title>

The title may appear in:

  • The browser tab
  • Bookmarks
  • Browser history
  • Search engine results, depending on the search engine
  • Other interfaces that use document metadata

Every HTML document should generally have a meaningful <title>.

A poor title:

<title>Page</title>

A better title:

<title>HTML Head Element: Complete Guide</title>

A good title should accurately describe the page rather than simply repeating a collection of keywords.

The <meta> Element

The <meta> element provides metadata about the HTML document.

It is an empty element, meaning it does not normally have a closing tag.

Example:

<meta charset="UTF-8">

Another example:

<meta name="description" content="Learn HTML head elements, metadata, links, titles, stylesheets, and more.">

The <meta> element can provide different kinds of information depending on its attributes.

Character Encoding

One of the most important metadata declarations is the character encoding.

<meta charset="UTF-8">

UTF-8 is widely used because it supports a very large range of characters and writing systems.

For example, it allows HTML documents to correctly represent many characters used in:

  • English
  • Hindi
  • Odia
  • Bengali
  • Chinese
  • Japanese
  • Arabic
  • European languages
  • Mathematical symbols
  • Many other writing systems

It is good practice to declare the character encoding early in the document’s <head>.

The Viewport Meta Tag

Modern websites need to work on different screen sizes.

A common viewport declaration is:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser how to handle the page’s viewport on devices such as smartphones.

Without an appropriate viewport configuration, a responsive website may not behave as expected on mobile devices.

Understanding the Attributes

width=device-width tells the browser to use the device’s screen width as the viewport width.

initial-scale=1.0 establishes the initial zoom level.

This is one of the most common declarations found in modern HTML documents.

The <link> Element

The <link> element establishes relationships between the current document and an external resource.

It is commonly used to connect CSS files.

Example:

<link rel="stylesheet" href="style.css">

This tells the browser to use style.css as a stylesheet for the document.

The <link> element is also used for other purposes, including:

  • Favicons
  • Canonical URLs
  • Preloading resources
  • Alternate resources
  • Language versions
  • Web app manifests
  • DNS and connection hints

Linking a CSS File

A typical example is:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

The browser loads the stylesheet and applies its CSS rules to the document.

You can also use multiple stylesheets:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">

The order in which stylesheets are processed can matter when CSS rules have competing declarations.

The Favicon

A favicon is the small icon associated with a website or webpage.

A common implementation is:

<link rel="icon" href="/favicon.ico">

You can also specify an image type:

<link rel="icon" type="image/png" href="/favicon.png">

Favicons may appear in browser tabs, bookmarks, history interfaces, and other browser UI.

The Canonical Link

The canonical link helps indicate the preferred URL for a page when multiple URLs can represent substantially the same content.

Example:

<link rel="canonical" href="https://example.com/articles/html-head">

The canonical element is primarily a signal to search engines.

It does not automatically redirect visitors.

For example, these URLs could potentially refer to similar content:

https://example.com/page
https://example.com/page?source=newsletter

A canonical URL can indicate which URL should be treated as the preferred version.

Canonical implementation should be accurate. Incorrect canonical declarations can create indexing problems.

Meta Description

The meta description provides a short description of the page.

Example:

<meta name="description" content="Learn about the HTML head element, its purpose, common tags, metadata, and best practices.">

Search engines may use this description when generating search-result snippets, although they can choose different text when it better matches a user’s query.

A useful description should be:

  • Accurate
  • Relevant to the page
  • Naturally written
  • Easy to understand
  • Helpful to potential visitors

Do not treat the description as a place to stuff keywords.

Robots Metadata

The robots meta tag can provide instructions to search engine crawlers.

Example:

<meta name="robots" content="noindex, nofollow">

This example requests that compliant crawlers do not index the page and do not follow links from it.

For a normal indexable page, you often do not need to explicitly write:

<meta name="robots" content="index, follow">

Search engine behavior has many nuances, so robots directives should be used deliberately.

Language of the Document

The primary language of the page should normally be declared on the <html> element rather than inside <head>.

For an English page:

<html lang="en">

For an Odia page:

<html lang="or">

For a Hindi page:

<html lang="hi">

Language information can help browsers, assistive technologies, search engines, and other software understand the document.

Open Graph Metadata

Open Graph metadata is commonly used to control how pages are represented when shared on supported social platforms and services.

Example:

<meta property="og:title" content="HTML Head Element Guide">
<meta property="og:description" content="Learn how the HTML head element works and how to use it correctly.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-head">
<meta property="og:image" content="https://example.com/images/html-head.jpg">

These tags can help create richer link previews.

However, Open Graph is not part of the core HTML specification. It is a metadata convention supported by various platforms.

Twitter Card Metadata

Some platforms also support Twitter Card metadata.

For example:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Head Element Guide">
<meta name="twitter:description" content="Learn about HTML head elements and metadata.">
<meta name="twitter:image" content="https://example.com/images/html-head.jpg">

The exact behavior of social platforms can change, so metadata should be tested on the platforms where your content is shared.

Adding JavaScript to the <head>

JavaScript can be included using the <script> element.

For example:

<script src="script.js"></script>

However, placing a normal external script in <head> can affect document parsing and page loading.

Modern HTML provides useful attributes such as defer and async.

Using defer

<script src="script.js" defer></script>

A deferred script is downloaded while the HTML document is being parsed and executed after parsing has completed, while preserving the order of deferred scripts.

This is often useful for scripts that depend on the document being parsed.

Using async

<script src="analytics.js" async></script>

An asynchronous script can be downloaded independently and executed as soon as it is ready.

The execution order of multiple asynchronous scripts should not be relied upon.

Use async when the script does not depend on a particular execution order or on the document’s parsing sequence.

Inline JavaScript in the Head

JavaScript can also be written directly inside a <script> element:

<script>
    console.log("Hello");
</script>

Although this is valid, external JavaScript files are often easier to maintain in larger projects.

Adding CSS Directly in the Head

CSS can be written using a <style> element.

Example:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            font-size: 2rem;
        }
    </style>
</head>

This is called an internal or embedded stylesheet.

It can be useful for small pages, page-specific styles, or special cases.

For larger websites, external stylesheets are generally easier to maintain.

The <base> Element

The <base> element specifies the base URL for relative URLs in a document.

Example:

<base href="https://example.com/">

If the document then contains:

<a href="about.html">About</a>

the relative URL can resolve against the specified base URL.

Only one <base> element should generally be used in a document.

Because it affects the resolution of relative URLs throughout the document, it should be used carefully.

The <style> Element

The <style> element contains CSS rules.

Example:

<style>
    .notice {
        padding: 20px;
        border: 1px solid #ccc;
    }
</style>

Unlike <link>, which commonly references an external stylesheet, <style> contains CSS directly within the HTML document.

The <script> Element

The <script> element is used to embed executable code or reference external scripts.

Example:

<script src="app.js" defer></script>

Although scripts can appear in different places, the <head> is one possible location.

Modern development often uses defer, modules, or other loading strategies to avoid unnecessarily delaying page rendering.

The <noscript> Element

<noscript> provides fallback content for situations where scripting is not available or is disabled.

Example:

<noscript>
    JavaScript is required for some features of this website.
</noscript>

The behavior of <noscript> differs depending on where it appears and whether scripting is enabled.

It can be useful for communicating important information to users when JavaScript cannot be used.

Resource Hints in the Head

Modern websites may use resource hints to help browsers establish connections or fetch important resources efficiently.

Examples include:

<link rel="preconnect" href="https://cdn.example.com">

and:

<link rel="dns-prefetch" href="//cdn.example.com">

These techniques can sometimes improve performance, but they should be used only when there is a real performance reason.

Too many unnecessary hints can add complexity without providing meaningful benefits.

Preloading Resources

The preload relation can tell the browser that a resource is important and may be needed soon.

Example:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Preloading should be used carefully.

If you preload too many resources, you can compete with resources that are actually more important.

Module Scripts

Modern JavaScript can use modules.

Example:

<script type="module" src="app.js"></script>

Module scripts have different loading and execution behavior from classic scripts and are automatically deferred.

They support modern JavaScript features such as import and export.

Web App Manifest

A web application can connect to a manifest file using:

<link rel="manifest" href="/manifest.webmanifest">

A manifest can provide information used by browsers when treating a website as a web application.

It can contain information such as:

  • Application name
  • Short name
  • Icons
  • Start URL
  • Display mode
  • Theme information

The exact support and behavior depend on the browser and platform.

Theme Color

A theme color can provide browser or operating-system UI with a preferred color associated with a page or web application.

Example:

<meta name="theme-color" content="#ffffff">

Support and visual behavior vary between browsers and operating systems.

Security-Related Metadata

Some security-related policies can be delivered through HTTP response headers, while others can be represented through HTML metadata.

For example:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

However, Content Security Policy is generally best managed through HTTP response headers when possible.

Do not add security metadata without understanding its effects. An incorrect security policy can prevent legitimate scripts, styles, images, or other resources from loading.

http-equiv

The http-equiv attribute allows certain metadata to behave similarly to an HTTP header.

Example:

<meta http-equiv="refresh" content="5">

This requests a refresh after a specified period.

Automatic page refresh or redirect mechanisms should be used carefully. For many navigation scenarios, a normal HTTP redirect is preferable.

Common <head> Elements at a Glance

ElementCommon Purpose
<title>Defines the document title
<meta>Provides metadata
<link>Connects external resources or declares relationships
<style>Contains CSS
<script>Embeds or loads JavaScript
<base>Defines the base URL for relative URLs
<noscript>Provides fallback content related to scripting

A Complete Practical Example

Here is a simple, modern example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Head Element Guide</title>

    <meta name="description"
          content="A practical guide to the HTML head element, metadata, stylesheets, scripts, favicons, and best practices.">

    <link rel="canonical"
          href="https://example.com/html-head">

    <link rel="icon"
          href="/favicon.ico">

    <link rel="stylesheet"
          href="/css/style.css">

    <meta property="og:title"
          content="HTML Head Element Guide">

    <meta property="og:description"
          content="Learn about the HTML head element and its most useful components.">

    <meta property="og:type"
          content="article">

    <meta property="og:url"
          content="https://example.com/html-head">

    <meta property="og:image"
          content="https://example.com/images/html-head.jpg">

    <script src="/js/app.js" defer></script>
</head>

<body>
    <h1>HTML Head Element</h1>

    <p>
        The head element contains important metadata and resource references.
    </p>
</body>
</html>

This example demonstrates several common components without putting visible page content inside <head>.

What Should Not Usually Go Inside <head>?

The <head> is not intended to hold normal visible page content.

For example, this is incorrect:

<head>
    <h1>Welcome to My Website</h1>
    <p>This is my homepage.</p>
</head>

Normal page content belongs inside <body>:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my homepage.</p>
</body>

The distinction is simple:

<head> = document information and resources

<body> = document content

<head> vs <body>

Feature<head><body>
Main purposeMetadata and resourcesVisible document content
Browser tab titleYesNo
Main headingsNoYes
ParagraphsNoYes
CSS referencesYesPossible, but usually not ideal
MetadataYesNo
Images displayed as page contentNoYes
FormsNoYes
Navigation contentNoYes
JavaScriptYesYes

HTML Head and SEO

The <head> is particularly important for search engine optimization because it contains several signals and metadata that can affect how a page is understood and represented.

Important SEO-related elements can include:

<title>...</title>
<meta name="description" content="...">
<link rel="canonical" href="...">
<meta name="robots" content="...">

Social sharing metadata can also be placed in the head.

However, SEO is not determined by the <head> alone.

Search engines also consider:

  • Page content
  • Site structure
  • Internal links
  • External links
  • Accessibility
  • Mobile usability
  • Performance
  • Structured data
  • Page experience
  • Crawlability
  • Indexability
  • Overall website quality

Therefore, adding many meta tags does not automatically make a website rank better.

Structured Data in the Head

Structured data helps search engines understand certain types of content.

JSON-LD is commonly placed in the <head> using a script element.

Example:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Head Element Guide"
}
</script>

Structured data should accurately describe the content on the page.

It should not be used to provide misleading information.

Accessibility and the Head

Although users do not normally see the <head>, it can indirectly affect accessibility.

For example:

  • Correct document language helps assistive technologies.
  • A meaningful <title> helps users identify pages.
  • Correct character encoding helps text display properly.
  • Proper viewport configuration supports mobile users.
  • CSS and JavaScript should be loaded in ways that do not unnecessarily interfere with access to content.

Accessibility is therefore influenced by decisions made in both the <head> and <body>.

Common Mistakes in the <head>

1. Missing <title>

A page should generally have a meaningful title.

Bad:

<title></title>

Better:

<title>HTML Head Element Guide</title>

2. Missing Character Encoding

Include:

<meta charset="UTF-8">

and place it early in the head.

3. Forgetting the Viewport

For responsive websites, use an appropriate viewport declaration:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Using Too Many Meta Tags

More metadata does not automatically mean better SEO.

Use metadata that has a real purpose.

5. Incorrect Canonical URLs

Do not point a canonical URL to an unrelated page.

The canonical should represent the preferred URL for the content.

6. Loading Every Script Without a Strategy

Large numbers of blocking scripts can slow down page processing.

Consider whether scripts should use:

defer

or:

async

or be loaded as modules.

7. Preloading Too Many Resources

Preload is a performance optimization, not a general-purpose way to load everything faster.

8. Putting Visible Content in <head>

Headings, paragraphs, images intended as page content, forms, and other normal content should generally be placed in <body>.

9. Using Obsolete Metadata

Many old SEO techniques are no longer useful.

For example, the old keyword meta tag:

<meta name="keywords" content="html, head, tutorial">

should not be relied upon for modern search engine optimization.

Best Practices for the HTML <head>

A good <head> should be:

Clear: Include information that has a genuine purpose.

Accurate: Titles, descriptions, canonical URLs, and social metadata should match the page.

Efficient: Avoid unnecessary resources and performance hints.

Responsive: Include an appropriate viewport configuration.

Accessible: Use a meaningful title and correct language information.

Maintainable: Keep CSS, JavaScript, and metadata organized.

SEO-friendly: Provide useful metadata without keyword stuffing.

Secure: Prefer appropriate HTTP security headers for policies that are better delivered at the HTTP layer.

Recommended Basic Head Template

For a simple website, this is a useful starting point:

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Your Page Title</title>

    <meta name="description"
          content="A clear and useful description of your page.">

    <link rel="stylesheet"
          href="/css/style.css">

    <link rel="icon"
          href="/favicon.ico">

    <script src="/js/main.js" defer></script>
</head>

You can add other elements when your website actually needs them.

Frequently Asked Questions

What is the HTML <head> element?

The <head> element is a container for metadata and resources associated with an HTML document. It can contain the title, metadata, stylesheets, scripts, icons, canonical information, and other document-related information.

Is the <head> visible on a webpage?

The contents of <head> are generally not displayed as normal page content. However, some information affects browser interfaces and how the page is represented elsewhere.

Is <title> part of <head>?

Yes. The <title> element belongs inside the <head> and defines the document’s title.

Is <meta> required?

Not every possible meta tag is required. However, a character encoding declaration and an appropriate viewport declaration are common and recommended for modern websites.

Can CSS be placed inside <head>?

Yes. CSS can be embedded with <style> or loaded from an external file using <link>.

Can JavaScript be placed inside <head>?

Yes. JavaScript can be included in the head. External scripts are often loaded with appropriate attributes such as defer or async, depending on the script’s requirements.

Can an image be placed inside <head>?

An image intended as visible page content belongs in <body>. However, an image URL can appear in metadata, such as an Open Graph image declaration.

Does the head element improve SEO?

The <head> provides important information that can help search engines understand and represent a page. However, it is only one part of SEO and cannot guarantee higher rankings.

Can there be more than one <head> element?

A normal HTML document should have one document <head> element containing the document’s metadata.

Does <head> have attributes?

The <head> element generally does not require special attributes. Its importance comes from the metadata and other elements placed inside it.

Final Summary

The HTML <head> element is the information and resource section of an HTML document. It sits between <html> and <body> and normally contains information that browsers and other services need rather than ordinary visible page content.

Some of its most important components include:

<title>
<meta>
<link>
<style>
<script>
<base>

The <head> can define the page title, character encoding, viewport behavior, description, canonical URL, favicon, stylesheets, JavaScript, social metadata, structured data, and other useful information.

A well-structured head section makes a website easier for browsers and other software to understand. It can also support responsive design, accessibility, performance, search visibility, and social sharing.

The key principle is simple: keep the <head> focused on metadata, document information, and resources, while placing the actual page content inside <body>.

Related Posts

Search
Scroll to Top