HTML <head> Element

📘 Introduction

The <head> element contains metadata about an HTML document. Unlike the <body>, its contents are generally not displayed on the web page. Instead, the information inside the head helps browsers, search engines, and other tools understand how the document should be processed and presented.

Important

Every HTML document should contain exactly one <head> element, placed between the <html> and <body> elements.

🎯 Purpose of the Head Element

  • Store document metadata.
  • Define the page title.
  • Link external CSS files.
  • Load JavaScript files.
  • Specify character encoding.
  • Configure responsive layouts.
  • Provide SEO-related metadata.
  • Set icons and web app information.

📝 Basic Structure

Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

The browser reads the <head> before rendering the page. Many settings defined here affect how the document behaves and appears.

📦 Common Elements Inside <head>

ElementPurpose
<title>Defines the page title shown in the browser tab.
<meta>Provides metadata such as charset, viewport, author, and description.
<link>Links external resources like CSS files and icons.
<style>Contains internal CSS styles.
<script>Loads or embeds JavaScript.
<base>Specifies the base URL for relative URLs.

⚙️ Typical Head Example

Complete Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML Head Tutorial">

  <title>Learning HTML</title>

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

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

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

🔄 Browser Processing Flow

🌳 Organization of Head Content

<head>
Metadata
Title
Stylesheets
Scripts
Icons
Base URL

📂 Example Project

website
index.html
styles.css
app.js
favicon.ico

HTML File

index.html

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

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

  <title>My Website</title>

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

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

<body>
  <h1>Welcome!</h1>
</body>
</html>

📑 Frequently Used Meta Tags

<meta charset="UTF-8"> specifies the character encoding used by the document, ensuring proper display of text and symbols.

<meta name="viewport"> helps pages display correctly on mobile devices by controlling the viewport's size and scale.

The description meta tag provides a brief summary of the page, which may be used by search engines in search results.

💡 Best Practices

  • Always specify UTF-8 as the character encoding.
  • Include the viewport meta tag for responsive design.
  • Use a meaningful and unique page title.
  • Keep metadata accurate and relevant.
  • Load JavaScript with defer when appropriate.
  • Link external CSS files instead of embedding large styles.

Best Practice

A well-structured <head> improves performance, SEO, accessibility, and the overall user experience.

⚠️ Common Mistakes

  • Placing visible page content inside the <head>.
  • Omitting the <title> element.
  • Forgetting the viewport meta tag on responsive websites.
  • Loading unnecessary blocking scripts.
  • Using duplicate or incorrect metadata.

🌐 Browser Support

The <head> element is part of the HTML standard and is supported by all modern browsers as well as legacy browsers.

📖 Official Reference

For the complete specification and additional examples, visit MDN Web Docs - HTML <head> Element.

📝 Summary

Summary

The <head> element contains the metadata that controls how a web page is interpreted and presented. It commonly includes the document title, meta tags, stylesheets, scripts, icons, and other configuration information. Although its contents are usually invisible to users, they play a critical role in browser behavior, responsiveness, performance, and search engine optimization.