LearnContact
Lesson 98 min read

HTML Head Section

Learn what the HTML Head Section is, how it stores metadata, links CSS, loads JavaScript, and helps browsers and search engines understand a webpage.

Introduction

In the previous lesson, you learned about HTML attributes and how they provide additional information and configuration for HTML elements.

Now you will learn about one of the most important structural parts of an HTML document: the Head Section.

A typical HTML document contains two major sections: the head and the body.

Two Major HTML Sections
<html>
    <head>
        <!-- Information about the webpage -->
    </head>

    <body>
        <!-- Visible webpage content -->
    </body>
</html>

Head Section

  • Contains information about the webpage.
  • Defines the browser tab title.
  • Stores metadata.
  • Links external resources.
  • Usually does not contain visible page content.

Body Section

  • Contains the visible webpage content.
  • Displays headings and paragraphs.
  • Contains images and links.
  • Contains forms and interactive content.
  • Creates what users see in the page area.

The body contains the content users interact with directly, while the head provides information and resources that help the browser and other services understand and process the document.

HTML Document
↓
Head Provides Page Information
↓
Browser Processes Resources
↓
Body Provides Visible Content
↓
Webpage is Presented
Information About the Page

The Head Section mainly contains information about the HTML document rather than the visible content displayed inside the webpage.

What is the Head Section?

The Head Section is the part of an HTML document represented by the <head> element.

It contains document metadata and other information or resources associated with the webpage.

Head Element
<head>
    <!-- Information about the document -->
</head>

The information inside the head can help browsers determine how to process the document, provide information to search engines and social platforms, and connect the page with external resources such as stylesheets.

Document Title

Defines the title associated with the document.

Metadata

Provides information such as character encoding and page descriptions.

Stylesheets

Connects the document with external CSS resources.

Scripts

Can load or contain JavaScript.

Resource Links

Can reference icons and other external resources.

Base URL

Can define a base URL for relative URLs in the document.

Key Point

The Head Section stores document-level information and resource references that help browsers and other services process the webpage.

Why Do We Need It?

A webpage needs more than visible content.

The browser also needs information about the document itself, including its title, character encoding, responsive viewport configuration, stylesheets, icons, and other resources.

Without Useful Head Information

  • The document may not have a meaningful title.
  • Character encoding may not be declared.
  • Responsive viewport behavior may not be configured.
  • External stylesheets may not be connected.
  • Page descriptions and other metadata may be missing.

With a Well-Structured Head

  • The document has a meaningful title.
  • Character encoding is declared.
  • Mobile viewport behavior can be configured.
  • Stylesheets and resources can be connected.
  • Useful document metadata can be provided.

Page Identification

The title helps identify the document in browser tabs and other interfaces.

Character Encoding

Metadata can tell the browser how document characters are encoded.

Responsive Behavior

Viewport metadata helps pages behave correctly on mobile devices.

Search Information

Metadata can provide useful descriptions and other document information.

Styling

External stylesheets can be linked to the document.

Resources

Scripts, icons, and other resources can be referenced.

Create HTML Document
↓
Add Head Section
↓
Provide Document Information
↓
Connect Required Resources
↓
Browser Processes the Page

Real-World Analogy

Imagine a book.

The book has information that describes the publication and pages that contain the actual content.

Book and HTML Analogy
Book Structure                 HTML Structure
────────────────              ────────────────

Book Information              Head Section
│                             │
├── Title                     ├── Document Title
├── Author                    ├── Metadata
├── Publisher                 ├── Resource Links
└── Publication Details       └── Document Information


Book Pages                    Body Section
│                             │
├── Chapters                  ├── Headings
├── Paragraphs                ├── Paragraphs
├── Images                    ├── Images
└── Actual Content            └── Visible Content

The descriptive information helps identify and understand the book, while the pages contain what the reader actually reads.

Similarly, the HTML head contains information about the document, while the body contains the main content presented to the user.

Book Information

  • Describes the publication.
  • Provides identification.
  • Contains supporting information.
  • Is not the main chapter content.

HTML Head

  • Describes the document.
  • Provides identification and metadata.
  • Connects supporting resources.
  • Is not the main visible page content.
Description vs Content

The Head Section describes and supports the webpage, while the Body Section contains the primary content presented to users.

Location in HTML

The head element is a child of the html element and appears before the body element.

Head Location
<!DOCTYPE html>
<html>
<head>
    <!-- Head Section -->
</head>

<body>
    <!-- Body Section -->
</body>
</html>
Document Hierarchy
Document
│
├── <!DOCTYPE html>
│
└── html
    │
    ├── head
    │   └── Document information and resources
    │
    └── body
        └── Main document content
PartLocationMain Purpose
<!DOCTYPE html>Before the html elementDeclares the document type
<html>Document rootContains the HTML document
<head>Inside html, before bodyContains document metadata and supporting information
<body>Inside html, after headContains the document content
Correct Document Order

In a standard HTML document, the head appears before the body inside the html element.

Common Elements Inside <head>

Several HTML elements are commonly used inside the Head Section.

ElementPurpose
<title>Defines the document title
<meta>Provides document metadata
<link>Creates relationships with external resources
<style>Contains embedded CSS
<script>Contains or references JavaScript
<base>Defines the base URL used for relative URLs

The <title> Element

Title Element
<title>Learn HTML - PrograMinds</title>

The title element defines the title of the document.

Browsers commonly use this title in tabs and window interfaces. The title can also be used by bookmarks and search systems.

The <meta> Element

Metadata Examples
<meta charset="UTF-8">

<meta
    name="description"
    content="Learn HTML from beginner to advanced."
>

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

The meta element provides different kinds of document metadata.

The <link> Element

Linking a Stylesheet
<link rel="stylesheet" href="styles.css">

The link element creates a relationship between the current document and an external resource.

The <style> Element

Embedded CSS
<style>
    body {
        font-family: Arial, sans-serif;
    }
</style>

The style element contains CSS rules embedded directly in the HTML document.

The <script> Element

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

The script element can contain JavaScript or reference an external JavaScript resource.

The <base> Element

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

The base element defines the base URL used to resolve relative URLs in the document.

Use <base> Carefully

The base element affects relative URLs throughout the document. Use it only when you understand how it changes link and resource resolution.

Example 1: Basic Head

A basic Head Section should contain a meaningful document title.

Basic Head Section
<!DOCTYPE html>
<html lang="en">
<head>
    <title>PrograMinds Learning</title>
</head>

<body>
    <h1>Welcome</h1>
</body>
</html>
Document Breakdown
HTML Document
│
├── head
│   │
│   └── title
│       └── PrograMinds Learning
│
└── body
    │
    └── h1
        └── Welcome
CodePurpose
<head>Begins the Head Section
<title>Defines the document title
</head>Ends the Head Section
<body>Begins the main document content
<h1>Creates the main visible heading
Basic Head Example

Welcome

Two Different Outputs

The title identifies the document in browser interfaces, while the h1 element appears as content inside the webpage.

Example 2: Meta Information

Metadata provides information about the document.

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

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

    <meta
        name="description"
        content="Learn HTML from beginner to advanced."
    >

    <title>HTML Course</title>
</head>

Character Encoding

UTF-8 Character Encoding
<meta charset="UTF-8">

This declares UTF-8 as the character encoding for the document.

Viewport Metadata

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

This commonly used metadata helps configure the viewport for responsive layouts on mobile devices.

Page Description

Description Metadata
<meta
    name="description"
    content="Learn HTML from beginner to advanced."
>

This provides a description of the page. Search engines may use page descriptions when generating search result snippets, but the displayed snippet is determined by the search engine.

MetadataPurpose
charsetDeclares document character encoding
viewportConfigures viewport behavior
descriptionProvides a description of the page
Place Charset Early

Declare the character encoding early in the document head so the browser can interpret document bytes correctly.

Example 3: Linking CSS

External CSS stylesheets are commonly connected to HTML documents using the link element.

Linking External CSS
<head>
    <meta charset="UTF-8">

    <title>My Website</title>

    <link
        rel="stylesheet"
        href="styles.css"
    >
</head>
Stylesheet Link Breakdown
link
│
├── rel="stylesheet"
│       │
│       └── Defines the relationship
│
└── href="styles.css"
        │
        └── Identifies the stylesheet resource
PartPurpose
<link>Creates a resource relationship
rel="stylesheet"Identifies the resource as a stylesheet
href="styles.css"Specifies the stylesheet location
Browser Parses link
↓
Reads Stylesheet Relationship
↓
Resolves CSS URL
↓
Requests CSS Resource
↓
Parses CSS
↓
Uses Styles During Rendering
The HTML and CSS Remain Separate

The HTML document contains the structure and the link to the stylesheet, while the external CSS file contains the style rules.

Example 4: Adding JavaScript

JavaScript can be loaded using the script element.

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

    <title>Interactive Website</title>

    <script src="script.js" defer></script>
</head>
Script Breakdown
script
│
├── src="script.js"
│       │
│       └── JavaScript resource
│
└── defer
        │
        └── Defers execution until HTML parsing is complete

The src attribute identifies the external JavaScript file.

For classic external scripts, the defer attribute allows HTML parsing to continue while the script is downloaded and delays execution until the document has been parsed.

Classic Script Without defer

  • HTML parsing can pause when the script is encountered.
  • The script is fetched if necessary.
  • The script executes before parsing continues.
  • Can delay document parsing.

Classic Script With defer

  • HTML parsing can continue.
  • The script can download in parallel.
  • Execution waits until parsing completes.
  • Useful for many document scripts.
Modern Script Loading

Scripts do not always need to be moved to the end of the body. Using defer for suitable classic external scripts is a common way to load scripts from the head without blocking document parsing.

Module Scripts Behave Differently

Scripts loaded with type="module" are deferred by default. You will learn more about script loading behavior in the JavaScript course.

Browser Processing Flow

Browsers process an HTML document progressively as they parse the markup.

When the parser encounters information and resources in the head, the browser can process metadata and begin requesting required resources.

Receive HTML
↓
Begin Parsing Document
↓
Process Head Elements
↓
Discover External Resources
↓
Request Required Resources
↓
Continue Parsing Body
↓
Build DOM and CSSOM
↓
Calculate Layout and Paint
Simplified Processing Flow
HTML Response
     │
     ▼
Begin Parsing
     │
     ▼
Process <head>
     │
     ├── Read Metadata
     │
     ├── Process Title
     │
     ├── Discover CSS
     │
     └── Discover Scripts
     │
     ▼
Continue Parsing <body>
     │
     ▼
Build Page Structures
     │
     ▼
Layout
     │
     ▼
Paint
The Browser Does Not Simply Finish the Entire Head First

Browser processing is more complex than reading the complete head, loading everything, and only then reading the body. Browsers parse documents progressively and can request resources while parsing continues.

Some Resources Affect Rendering

Stylesheets and scripts can affect when and how a page is rendered. Their exact behavior depends on the resource type, attributes, loading strategy, and browser processing rules.

Real-World Applications

The Head Section is used by nearly every professional website and web application.

Business Websites

Document titles, descriptions, icons, stylesheets, and other metadata.

Blogs

Article descriptions, social metadata, canonical references, and styles.

News Websites

Page metadata, structured information, social sharing information, and resources.

E-Commerce

Product page titles, descriptions, icons, social metadata, and stylesheets.

Web Applications

Stylesheets, scripts, icons, manifests, and application metadata.

Responsive Websites

Viewport configuration and responsive CSS resources.

Multilingual Websites

Character encoding and language-related document information.

Shared Pages

Social metadata can influence how links are presented on supported platforms.

Advantages

Identifies the Document

A meaningful title helps users identify the page.

Declares Encoding

Character encoding metadata helps browsers interpret text correctly.

Supports Responsive Pages

Viewport metadata supports mobile-friendly layouts.

Connects Styles

External CSS resources can be linked.

Loads Scripts

JavaScript resources can be referenced.

Provides Metadata

Document descriptions and other metadata can be supplied.

Connects Resources

Icons and other external resources can be referenced.

Organizes Document Information

Document-level information remains separate from main page content.

  • Defines the document title.
  • Provides document metadata.
  • Declares character encoding.
  • Supports responsive viewport configuration.
  • Connects external stylesheets.
  • References JavaScript resources.
  • Links icons and other external resources.
  • Provides page descriptions.
  • Supports social sharing metadata.
  • Can provide canonical URL information.
  • Separates document information from main content.
  • Helps browsers process the document.
  • Provides useful information to search systems.
  • Supports professional document organization.

Common Beginner Mistakes

Placing Main Content in <head>

Main document content belongs inside the body.

Forgetting the <title>

Every document should have a useful and descriptive title.

Missing Character Encoding

Declare the document character encoding.

Missing Viewport Metadata

Responsive pages commonly need viewport configuration.

Using the keywords Meta Tag for SEO

Modern search engines generally do not use the meta keywords tag as a ranking signal.

Assuming Description Controls Search Snippets

Search engines may choose a different snippet from the page content.

Blocking Parsing with Scripts

Classic scripts without suitable loading attributes can pause HTML parsing.

Duplicate Titles or Descriptions

Pages should have useful metadata appropriate to their actual content.

Main Content in the Wrong Place
<!-- ❌ Incorrect -->

<head>
    <h1>Welcome to My Website</h1>
    <p>Learn web development.</p>
</head>


<!-- ✅ Correct -->

<head>
    <title>My Website</title>
</head>

<body>
    <h1>Welcome to My Website</h1>
    <p>Learn web development.</p>
</body>
Missing Title
<!-- ❌ Missing a document title -->

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


<!-- ✅ Better -->

<head>
    <meta charset="UTF-8">
    <title>HTML Course - PrograMinds</title>
</head>
Missing Viewport Configuration
<!-- ❌ Incomplete for a typical responsive page -->

<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>


<!-- ✅ Common responsive setup -->

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

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

    <title>My Website</title>
</head>
Potentially Blocking Classic Script
<!-- Can pause HTML parsing -->

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


<!-- Common alternative -->

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

Poor Head Section

  • Missing document title.
  • Missing encoding declaration.
  • Missing responsive viewport metadata.
  • Main content placed in the head.
  • Unnecessary or outdated metadata.

Well-Structured Head

  • Meaningful document title.
  • Character encoding declared.
  • Appropriate viewport metadata.
  • Useful document metadata.
  • Resources loaded intentionally.

Best Practices

  • Include one meaningful title element.
  • Make the title specific to the page content.
  • Declare UTF-8 character encoding.
  • Place the charset declaration early in the head.
  • Include appropriate viewport metadata for responsive websites.
  • Write useful page descriptions.
  • Do not rely on the description meta tag to control the exact search result snippet.
  • Link external stylesheets using the link element.
  • Use meaningful resource paths.
  • Use defer for suitable classic external scripts loaded from the head.
  • Understand the difference between defer, async, and module scripts before using them.
  • Keep main page content inside the body.
  • Keep document metadata and supporting information inside the head where appropriate.
  • Avoid obsolete or unnecessary metadata.
  • Do not depend on the meta keywords tag for search ranking.
  • Use unique and descriptive titles for different pages.
  • Use page descriptions that accurately describe the page.
  • Add icons when the project requires them.
  • Use canonical URL information when duplicate or alternative URLs require it.
  • Add social metadata when link previews are important.
  • Keep the Head Section organized.
  • Avoid loading unnecessary resources.
  • Use secure HTTPS resource URLs in production.
  • Check for broken stylesheet and script paths.
  • Test the page on mobile devices.
  • Validate the HTML document when unexpected behavior occurs.
Professional Basic Head
<head>
    <meta charset="UTF-8">

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

    <meta
        name="description"
        content="Learn HTML with beginner-friendly lessons and practical examples."
    >

    <title>Learn HTML - PrograMinds</title>

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

    <script
        src="/scripts/main.js"
        defer
    ></script>
</head>
Keep Only What the Page Needs

A professional Head Section is not the one with the most tags. It contains the document information and resources that the page actually needs.

Frequently Asked Questions

What is the HTML Head Section?

The Head Section is the part of an HTML document that contains metadata, document information, and references to supporting resources.

Which element creates the Head Section?

The <head> element.

Where is the head element located?

It appears inside the html element before the body element.

Is content inside the head displayed in the webpage content area?

Most head content is not displayed as the main content of the webpage.

What is metadata?

Metadata is information about the document, such as its character encoding, description, or viewport configuration.

Which element defines the document title?

The <title> element.

Where does the document title appear?

Browsers commonly display it in tabs and other browser interfaces. It may also be used by bookmarks and search systems.

Should every page have a title?

Yes. Every HTML document should have a useful and descriptive title.

What does <meta charset="UTF-8"> do?

It declares UTF-8 as the character encoding of the document.

Why is the viewport meta tag important?

It helps configure how the page viewport behaves on mobile devices and is commonly used for responsive layouts.

What does the description meta tag do?

It provides a description of the page that can be used by search systems and other services.

Will a search engine always display my meta description?

No. Search engines may generate a different snippet based on the search query and page content.

Do meta keywords improve search ranking?

Major modern search engines generally do not use the meta keywords tag as a ranking signal.

How do I link an external CSS file?

Use a link element with rel="stylesheet" and an href pointing to the stylesheet.

Can the style element appear inside the head?

Yes. The style element can contain embedded CSS rules.

Can JavaScript be loaded from the head?

Yes. The script element can be used inside the head.

Should every script be moved to the end of the body?

No. Modern loading strategies such as defer and module scripts allow many scripts to be loaded appropriately from the head.

What does defer do?

For suitable classic external scripts, defer allows document parsing to continue while the script downloads and delays execution until parsing is complete.

What is the link element used for?

It defines relationships between the current document and external resources, such as stylesheets and icons.

What is the base element?

The base element defines the base URL used to resolve relative URLs in the document.

Can I put headings and paragraphs inside the head?

Main document content such as headings and paragraphs belongs inside the body.

Does the browser completely finish the head before reading the body?

Not in such a simple sequential way. Browsers parse documents progressively and can discover and request resources while parsing continues.

What is the difference between head and body?

The head contains document information and supporting resources, while the body contains the main document content.

Can the Head Section affect page performance?

Yes. Stylesheets, scripts, fonts, and other resources referenced by the document can affect loading and rendering performance.

What should I learn after the Head Section?

The next lesson is the HTML Body Section, where you will learn about the part of the document that contains the main page content.

Key Takeaways

  • The Head Section is represented by the head element.
  • The head appears inside the html element before the body.
  • It contains document metadata and supporting information.
  • The body contains the main document content.
  • The title element defines the document title.
  • The meta element provides document metadata.
  • The charset declaration defines document character encoding.
  • UTF-8 is the standard encoding used by modern webpages.
  • Viewport metadata supports responsive page behavior.
  • Description metadata provides information about the page.
  • Search engines may choose whether to use a meta description in result snippets.
  • The link element connects the document with external resources.
  • External CSS files are commonly linked from the head.
  • The style element contains embedded CSS.
  • The script element can contain or reference JavaScript.
  • Suitable scripts can use defer to avoid blocking document parsing.
  • Module scripts are deferred by default.
  • The base element affects relative URL resolution.
  • Main visible content belongs in the body.
  • Browsers parse HTML progressively.
  • Resources can be discovered and requested during parsing.
  • A well-structured head improves document organization.
  • Useful metadata helps browsers and other services understand the page.
  • Unnecessary metadata should be avoided.
  • Every page should have a meaningful and descriptive title.

Summary

The HTML Head Section contains information about a document and references to resources that support the webpage.

It is created using the head element and appears inside the html element before the body.

You learned that the title element defines the document title, while meta elements can provide information such as character encoding, viewport configuration, and page descriptions.

You also learned how the link element connects external stylesheets and how the script element can load JavaScript resources.

The Head Section does not contain the main document content. Headings, paragraphs, images, forms, and other primary page content belong inside the body.

You also learned that browser processing is progressive. Browsers can process metadata and discover resources while continuing to parse the document.

A well-structured Head Section provides useful document information, connects required resources, supports responsive design, and helps browsers and other services understand the webpage.

In the next lesson, you will learn about the HTML Body Section and how it contains the main content presented to users.

Next Lesson →

Body Section