Home » HTML Head Tag

HTML head Tag: A Comprehensive Guide

Introduction

The <head> tag is one of the most important parts of an HTML document, even though it is not visible on the webpage.

It contains essential information that helps:

  • Browsers understand your page
  • Search engines index your content
  • External files (CSS/JS) load correctly

Learn full structure → /html-document-structure

What is HTML Head Tag?

What is HTML Head Tag? The HTML head tag contains metadata and resources like title, meta tags, styles, and scripts that are not displayed on the webpage but are essential for functionality and SEO.

Main elements inside <head>:

  • <title>
  • <meta>
  • <link>
  • <style>
  • <script>

Basic HTML Head Tag Example

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

The <head> section defines information about the page, not content

HTML Head Tag Structure (Visual)

<head>
 ├── title
 ├── meta
 ├── link
 ├── style
 └── script
</head>

Important Elements Inside 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.

 Character Encoding (charset)

<meta charset="UTF-8">
  • Prevents broken characters
  •  Supports all languages
    Always include this

 Viewport (Responsive Design)

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  •  Required for mobile-friendly pages
  •  Enables responsive layouts

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

Meta Author

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

Used in:

  • Blogs

  • Documentation

  • Educational sites

 Meta Robots

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

Controls search engine behavior.

 <link> Tag (External Resources)

The <link> tag connects external files.

 Link CSS File

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

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.

Add Your Heading Text Here

  • Improves SEO
  • Helps browser rendering
  • Loads styles and scripts
  • Controls page behavior

 A properly structured head improves search ranking and performance

HTML Head Tag and SEO

  • Use proper title
  • Add meta description
  • Use viewport for mobile
  • Optimize scripts

 SEO starts from <head>

Common Mistakes

Putting visible content inside <head>

<head>
<h1>Wrong</h1>
</head>
 

Missing meta viewport

Breaks mobile layout

Duplicate title tags

Beginner Mistake Example

<head> <p>This is wrong</p> </head>
Wrong: visible content inside head

Correct:

<head><title>Correct</title></head>

<body>
<p>Visible content</p>
</body>

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

Key Takeaways

  • Head tag contains metadata
  • Not visible on page
  • Important for SEO
  • Includes title, meta, link, script
  • Essential for every webpage

FAQs: HTML Tag

1. What is HTML head tag?

It contains metadata and resources.

2. Why is head tag important?

It improves SEO and functionality.

3. What are elements inside head?

Title, meta, link, style, script.

4. Can I add content inside head?

No, only metadata.

5. Is head tag required?

Yes, it is essential.

Scroll to Top