HTML head Tag: A Comprehensive Guide

What is the HTML head Tag?

Introduction: Why the HTML <head> Tag Matters

When building a webpage, beginners usually focus on what users can see—text, images, and buttons.
However, some of the most important information on a webpage is invisible to users.

This invisible but powerful information lives inside the HTML <head> tag.

The <head> tag:

  • Controls how browsers interpret your page

  • Plays a major role in SEO

  • Helps with responsiveness and accessibility

  • Improves performance and user experience

👉 Even though users don’t see the <head> tag, search engines, browsers, and devices depend on it.

What Is the HTML head Tag?

The HTML <head> tag is a container for metadata—information about the webpage.

👉 In simple terms:
The <head> tag tells the browser how the page should behave, not what it should display.

Where Is the head Tag Located?

he <head> tag is placed:

  • Inside the <html> tag

  • Before the <body> tag

<!DOCTYPE html>
<html>
<head>
  <!-- Metadata goes here -->
</head>
<body>
  <!-- Visible content goes here -->
</body>
</html>

What Goes Inside the head Tag?

The <head> tag can contain several important elements.

✅ Common Elements Inside <head>

ElementPurpose
<title>Page title
<meta>Metadata
<link>External resources
<style>Internal CSS
<script>JavaScript
<base>Base URL

<title> Tag (Most Important Element)

The <title> tag defines the title of the webpage.

 
<title>HTML Head Tag Explained</title>

Where It Appears

  • Browser tab

  • Search engine results

  • Bookmarks

Best Practices

  • One <title> per page

  • 50–60 characters

  • Include main keyword

  • Make it unique

 <meta> Tags (Core Metadata)

Meta tags provide information about the page.

a) Character Encoding (charset)

 
<meta charset="UTF-8">

Prevents broken characters
 Supports all languages
👉 Always include this

b) Viewport (Responsive Design)

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

 Required for mobile-friendly pages
 Enables responsive layouts

c) Meta Description (SEO)

 
<meta name="description" content="A complete beginner guide to the HTML head tag with examples and best practices.">

  • Appears in search results

  • Improves click-through rate

  • Ideal length: 140–160 characters

d) Meta Author

 
<meta name="author" content="Arvinder Kaur">

Used in:

  • Blogs

  • Documentation

  • Educational sites

e) Meta Robots

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

Controls search engine behavior.

 <link> Tag (External Resources)

The <link> tag connects external files.

a) Link CSS File

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

b) Add Favicon

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

Improves branding
 Appears in browser tabs

 <style> Tag (Internal CSS)

Used for writing CSS inside the HTML file.

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

⚠️ Use for small projects or demos
👉 External CSS is better for large sites

<script> Tag in <head>

Used to add JavaScript.

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

Best Practice

  • Use defer to avoid blocking page load

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

 Social Media Metadata (Open Graph & Twitter)

Controls how your page appears when shared.

 
<meta property="og:title" content="HTML Head Tag Guide"> <meta property="og:description" content="Learn HTML head tag with examples."> <meta property="og:image" content="image.png">

👉 Important for marketing and sharing.

 <base> Tag (Advanced Use)

Defines a base URL for all links.

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

⚠️ Use carefully—affects all links.

Complete Example: HTML head Tag

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

  <title>HTML Head Tag: A Comprehensive Guide</title>

  <meta name="description" content="Learn what the HTML head tag is, what goes inside it, SEO impact, and best practices.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="A Kaur">
  <meta name="robots" content="index, follow">

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

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

  <h1>HTML Head Tag</h1>
  <p>This content appears in the body.</p>

</body>
</html>

head vs body (Key Difference)

Feature<head><body>
Visible content❌ No✅ Yes
Metadata✅ Yes❌ No
SEO info✅ Yes❌ No
User interaction❌ No✅ Yes

Common Beginner Mistakes

  • Putting visible content inside <head>
  •  Missing <meta charset>
  •  Using multiple <title> tags
  •  Forgetting viewport meta Adding CSS/JS incorrectly

Best Practices for Using Head Tag

  • Always include charset and viewport
  •  Write unique titles and descriptions
  •  Keep <head> clean and organized
  •  Use external CSS and JS
  •  Add favicon and social metadata

SEO Importance of head Tag

The <head> tag directly impacts:

  • Search engine understanding

  • Page titles and snippets

  • Mobile friendliness

  • Sharing previews

  • Accessibility

👉 Good <head> = Better SEO foundation.

FAQs: HTML Tag

Is the <head> tag mandatory?

Yes, every HTML document should have it.

Is content inside <head> visible?

No, it is hidden from users.

Can CSS and JS go inside <head>?

Yes, but use best practices (defer, external files).

Does <head> affect SEO?

Yes, significantly.

Can I skip metadata?

Technically yes, but not recommended.