The Head Section

The <head> section of an HTML document is like the control center of your web page. It contains metadata—information about your page that doesn't appear directly on the screen but is crucial for browsers, search engines, and other services to understand and properly display your content.

What is the Head Section?

The <head> element is a container for metadata. It sits between the opening <html> tag and the <body> tag, and contains information about the document rather than content in the document.

MARKUP

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata goes here -->
    <title>My Page Title</title>
  </head>
  <body>
    <!-- Visible content goes here -->
    <h1>Hello World</h1>
  </body>
</html>

💡 Key Concept:

Think of the <head> as the "behind-the-scenes" section. Users don't see what's in the head directly on the page, but it affects how the page appears in browser tabs, search results, social media shares, and more.

Basic Head Structure

A typical head section includes several essential elements:

MARKUP

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  
  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page title (required) -->
  <title>My Amazing Website</title>
  
  <!-- Page description for SEO -->
  <meta name="description" content="A brief description of my page">
  
  <!-- Linking to CSS stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Favicon -->
  <link rel="icon" href="favicon.ico">
</head>

Elements That Can Go in the Head

Let's explore the different types of elements you can include in the head section:

1. The Title Element (Required)

Every HTML document must have a <title> element inside the head. It's the only required element in the head section.

MARKUP

<head>
  <title>About Us - My Company</title>
</head>

The title element:

Appears in the browser tab or window title bar
Shows up in search engine results
Appears when users bookmark the page
Is announced by screen readers
Shows in browser history

⚠️ Important:

Keep titles between 50-60 characters for optimal display in search results. Make each page's title unique and descriptive.

2. Meta Elements

Meta elements provide metadata about your HTML document. They don't have closing tags (they're void elements).

MARKUP

<head>
  <!-- Character encoding (always include) -->
  <meta charset="UTF-8">
  
  <!-- Viewport for mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page description -->
  <meta name="description" content="Learn HTML from scratch">
  
  <!-- Keywords (less important for SEO now) -->
  <meta name="keywords" content="HTML, tutorial, web development">
  
  <!-- Author information -->
  <meta name="author" content="John Doe">
  
  <!-- Search engine instructions -->
  <meta name="robots" content="index, follow">
</head>

We'll explore meta tags in detail in the next lesson!

3. Link Elements

The <link> element creates relationships between your HTML document and external resources.

MARKUP

<head>
  <!-- Link to CSS stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Link to external stylesheet (like Google Fonts) -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
  
  <!-- Favicon (the little icon in browser tabs) -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- Apple touch icon for iOS devices -->
  <link rel="apple-touch-icon" href="apple-icon.png">
  
  <!-- Alternate versions of the page -->
  <link rel="alternate" href="page-spanish.html" hreflang="es">
  
  <!-- Canonical URL (for SEO) -->
  <link rel="canonical" href="https://example.com/original-page">
</head>

4. Style Element

You can include CSS directly in the head using the <style> element (though external stylesheets are generally preferred).

MARKUP

<head>
  <title>My Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>

5. Script Element

JavaScript can be included in the head, though it's often better to place scripts at the end of the body for performance reasons.

MARKUP

<head>
  <title>My Page</title>
  
  <!-- External JavaScript file -->
  <script src="script.js"></script>
  
  <!-- Inline JavaScript -->
  <script>
    console.log('Page loaded');
  </script>
  
  <!-- Defer loading until page is parsed -->
  <script src="app.js" defer></script>
  
  <!-- Load asynchronously -->
  <script src="analytics.js" async></script>
</head>

💡 Script Loading Tips:

defer: Download in background, execute after HTML is parsed
async: Download in background, execute as soon as ready
No attribute: Block HTML parsing until script downloads and executes

6. Base Element

The <base> element specifies a base URL for all relative URLs in the document. It can only appear once and must come before any elements that use URLs.

MARKUP

<head>
  <base href="https://example.com/" target="_blank">
  <title>My Page</title>
</head>
<body>
  <!-- This link will go to: https://example.com/about.html -->
  <a href="about.html">About</a>
  
  <!-- This image src becomes: https://example.com/images/logo.png -->
  <img src="images/logo.png" alt="Logo">
</body>

The base element is rarely used in modern development but can be useful in specific scenarios.

Complete Head Section Example

Here's a comprehensive example of a well-structured head section:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Essential meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page title -->
  <title>Complete HTML Tutorial - Learn Web Development</title>
  
  <!-- SEO meta tags -->
  <meta name="description" content="Learn HTML from scratch with our comprehensive tutorial. Perfect for beginners and intermediate developers.">
  <meta name="keywords" content="HTML, tutorial, web development, learn coding">
  <meta name="author" content="Falytom">
  
  <!-- Open Graph for social media -->
  <meta property="og:title" content="Complete HTML Tutorial">
  <meta property="og:description" content="Learn HTML from scratch">
  <meta property="og:image" content="https://example.com/share-image.jpg">
  <meta property="og:url" content="https://example.com/html-tutorial">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Complete HTML Tutorial">
  <meta name="twitter:description" content="Learn HTML from scratch">
  <meta name="twitter:image" content="https://example.com/share-image.jpg">
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  
  <!-- JavaScript -->
  <script src="main.js" defer></script>
</head>
<body>
  <!-- Visible content goes here -->
</body>
</html>

Does Order Matter in the Head?

While HTML is generally forgiving about the order of elements in the head, following best practices improves performance and clarity:

Recommended Order:

Character encoding first
MARKUP
```
<meta charset="UTF-8">
```
This should be within the first 1024 bytes of the document

Viewport meta tag

MARKUP

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

Title
MARKUP
```
<title>Page Title</title>
```
Other meta tags (description, keywords, author, etc.)
Open Graph and social media tags
Favicon links
CSS links (before JavaScript when possible)
JavaScript (at the end of head, or in body)

Why the Head is "Invisible" but Important

Although users don't see the head content directly on the page, it has a huge impact on:

Search Engine Optimization (SEO)

Title and description appear in search results
Meta tags help search engines understand your content
Canonical links prevent duplicate content issues
Structured data helps with rich snippets

Open Graph tags control how your page looks when shared on Facebook
Twitter Card tags control appearance on Twitter
Proper metadata creates attractive, clickable social previews

Browser Behavior

Viewport meta tag makes your site mobile-friendly
Character encoding prevents display issues
Favicon appears in tabs and bookmarks
Preconnect and prefetch hints improve performance

Accessibility

Title is read by screen readers
Language declarations help assistive technology
Proper metadata improves navigation

Common Head Section Mistakes

Mistake 1: Missing Title

MARKUP

<!-- WRONG: No title -->
<head>
  <meta charset="UTF-8">
</head>

<!-- CORRECT: Always include title -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Mistake 2: Charset Not First

MARKUP

<!-- WRONG: Charset comes later -->
<head>
  <title>My Page</title>
  <meta name="description" content="...">
  <meta charset="UTF-8">
</head>

<!-- CORRECT: Charset should be first -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <meta name="description" content="...">
</head>

Mistake 3: Visible Content in Head

MARKUP

<!-- WRONG: Visible content in head -->
<head>
  <title>My Page</title>
  <h1>Welcome</h1>
  <p>This doesn't belong here!</p>
</head>

<!-- CORRECT: Visible content goes in body -->
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This belongs in the body!</p>
</body>

Mistake 4: Multiple Title Elements

MARKUP

<!-- WRONG: Multiple titles -->
<head>
  <title>First Title</title>
  <title>Second Title</title>
</head>

<!-- CORRECT: Only one title -->
<head>
  <title>My Page Title</title>
</head>

Mistake 5: Malformed Meta Tags

MARKUP

<!-- WRONG: Missing quotes, wrong syntax -->
<head>
  <meta name=description content=My page>
  <meta charset=UTF-8 />
</head>

<!-- CORRECT: Proper quotes and syntax -->
<head>
  <meta name="description" content="My page">
  <meta charset="UTF-8">
</head>

Performance Optimization Tips

1. CSS Loading

MARKUP

<!-- Load critical CSS inline for faster rendering -->
<head>
  <style>
    /* Critical CSS here */
    body { margin: 0; font-family: sans-serif; }
  </style>
  
  <!-- Load non-critical CSS asynchronously -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

2. Resource Hints

MARKUP

<head>
  <!-- DNS prefetch for external domains -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  
  <!-- Preconnect to establish early connection -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Prefetch resources for next page -->
  <link rel="prefetch" href="next-page.html">
  
  <!-- Preload critical resources -->
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>

3. Script Optimization

MARKUP

<head>
  <!-- Defer non-critical scripts -->
  <script src="app.js" defer></script>
  
  <!-- Async for independent scripts -->
  <script src="analytics.js" async></script>
  
  <!-- Module scripts (automatically deferred) -->
  <script type="module" src="main.js"></script>
</head>

Testing Your Head Section

Several tools can help you verify your head section is properly configured:

1. Browser Developer Tools

Open DevTools (F12)
Go to the Elements/Inspector tab
Expand the <head> element
Verify all meta tags and links are present

2. Validation Tools

W3C HTML Validator - Check for HTML errors
Twitter Card Validator - Test Twitter card meta tags
Facebook Sharing Debugger - Test Open Graph tags

3. SEO Tools

Check title length (50-60 characters)
Verify meta description (150-160 characters)
Ensure unique titles for each page

Minimal vs. Complete Head

Minimal Head (For Learning/Testing)

MARKUP

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>

Production-Ready Head

MARKUP

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title - Site Name</title>
  <meta name="description" content="Compelling description">
  <meta name="author" content="Author Name">
  
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Compelling description">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
  
  <link rel="canonical" href="https://example.com/page">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="styles.css">
  
  <script src="app.js" defer></script>
</head>

Key Takeaways

The <head> contains metadata about the document
Content in the head is not directly visible on the page
Every page must have exactly one <title> element
Character encoding should be the first meta tag
Viewport meta tag is essential for mobile responsiveness
Meta descriptions help with SEO and social sharing
Link elements connect external resources like CSS and favicons
The head affects SEO, social sharing, and accessibility
Order matters for performance optimization
Use validation tools to verify your head section

What's Next?

Now that you understand the head section's purpose and structure, we'll dive deeper into meta tags. You'll learn about different types of meta tags, their purposes, and how to use them effectively for SEO, social media, and browser control. Meta tags are powerful tools that significantly impact how your pages are discovered and displayed!

What is the Head Section?

The <head> element is a container for metadata. It sits between the opening <html> tag and the <body> tag, and contains information about the document rather than content in the document.

MARKUP

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata goes here -->
    <title>My Page Title</title>
  </head>
  <body>
    <!-- Visible content goes here -->
    <h1>Hello World</h1>
  </body>
</html>

💡 Key Concept:

Basic Head Structure

A typical head section includes several essential elements:

MARKUP

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  
  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page title (required) -->
  <title>My Amazing Website</title>
  
  <!-- Page description for SEO -->
  <meta name="description" content="A brief description of my page">
  
  <!-- Linking to CSS stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Favicon -->
  <link rel="icon" href="favicon.ico">
</head>

Elements That Can Go in the Head

Let's explore the different types of elements you can include in the head section:

1. The Title Element (Required)

Every HTML document must have a <title> element inside the head. It's the only required element in the head section.

MARKUP

<head>
  <title>About Us - My Company</title>
</head>

The title element:

Appears in the browser tab or window title bar
Shows up in search engine results
Appears when users bookmark the page
Is announced by screen readers
Shows in browser history

⚠️ Important:

Keep titles between 50-60 characters for optimal display in search results. Make each page's title unique and descriptive.

2. Meta Elements

Meta elements provide metadata about your HTML document. They don't have closing tags (they're void elements).

MARKUP

<head>
  <!-- Character encoding (always include) -->
  <meta charset="UTF-8">
  
  <!-- Viewport for mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page description -->
  <meta name="description" content="Learn HTML from scratch">
  
  <!-- Keywords (less important for SEO now) -->
  <meta name="keywords" content="HTML, tutorial, web development">
  
  <!-- Author information -->
  <meta name="author" content="John Doe">
  
  <!-- Search engine instructions -->
  <meta name="robots" content="index, follow">
</head>

We'll explore meta tags in detail in the next lesson!

3. Link Elements

The <link> element creates relationships between your HTML document and external resources.

MARKUP

<head>
  <!-- Link to CSS stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Link to external stylesheet (like Google Fonts) -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
  
  <!-- Favicon (the little icon in browser tabs) -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- Apple touch icon for iOS devices -->
  <link rel="apple-touch-icon" href="apple-icon.png">
  
  <!-- Alternate versions of the page -->
  <link rel="alternate" href="page-spanish.html" hreflang="es">
  
  <!-- Canonical URL (for SEO) -->
  <link rel="canonical" href="https://example.com/original-page">
</head>

4. Style Element

You can include CSS directly in the head using the <style> element (though external stylesheets are generally preferred).

MARKUP

<head>
  <title>My Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>

5. Script Element

JavaScript can be included in the head, though it's often better to place scripts at the end of the body for performance reasons.

MARKUP

<head>
  <title>My Page</title>
  
  <!-- External JavaScript file -->
  <script src="script.js"></script>
  
  <!-- Inline JavaScript -->
  <script>
    console.log('Page loaded');
  </script>
  
  <!-- Defer loading until page is parsed -->
  <script src="app.js" defer></script>
  
  <!-- Load asynchronously -->
  <script src="analytics.js" async></script>
</head>

💡 Script Loading Tips:

defer: Download in background, execute after HTML is parsed
async: Download in background, execute as soon as ready
No attribute: Block HTML parsing until script downloads and executes

6. Base Element

The <base> element specifies a base URL for all relative URLs in the document. It can only appear once and must come before any elements that use URLs.

MARKUP

<head>
  <base href="https://example.com/" target="_blank">
  <title>My Page</title>
</head>
<body>
  <!-- This link will go to: https://example.com/about.html -->
  <a href="about.html">About</a>
  
  <!-- This image src becomes: https://example.com/images/logo.png -->
  <img src="images/logo.png" alt="Logo">
</body>

The base element is rarely used in modern development but can be useful in specific scenarios.

Complete Head Section Example

Here's a comprehensive example of a well-structured head section:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Essential meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page title -->
  <title>Complete HTML Tutorial - Learn Web Development</title>
  
  <!-- SEO meta tags -->
  <meta name="description" content="Learn HTML from scratch with our comprehensive tutorial. Perfect for beginners and intermediate developers.">
  <meta name="keywords" content="HTML, tutorial, web development, learn coding">
  <meta name="author" content="Falytom">
  
  <!-- Open Graph for social media -->
  <meta property="og:title" content="Complete HTML Tutorial">
  <meta property="og:description" content="Learn HTML from scratch">
  <meta property="og:image" content="https://example.com/share-image.jpg">
  <meta property="og:url" content="https://example.com/html-tutorial">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Complete HTML Tutorial">
  <meta name="twitter:description" content="Learn HTML from scratch">
  <meta name="twitter:image" content="https://example.com/share-image.jpg">
  
  <!-- Favicon -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  
  <!-- JavaScript -->
  <script src="main.js" defer></script>
</head>
<body>
  <!-- Visible content goes here -->
</body>
</html>

Does Order Matter in the Head?

While HTML is generally forgiving about the order of elements in the head, following best practices improves performance and clarity:

Recommended Order:

Character encoding first
MARKUP
```
<meta charset="UTF-8">
```
This should be within the first 1024 bytes of the document

Viewport meta tag

MARKUP

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

Title
MARKUP
```
<title>Page Title</title>
```
Other meta tags (description, keywords, author, etc.)
Open Graph and social media tags
Favicon links
CSS links (before JavaScript when possible)
JavaScript (at the end of head, or in body)

Why the Head is "Invisible" but Important

Although users don't see the head content directly on the page, it has a huge impact on:

Search Engine Optimization (SEO)

Title and description appear in search results
Meta tags help search engines understand your content
Canonical links prevent duplicate content issues
Structured data helps with rich snippets

Open Graph tags control how your page looks when shared on Facebook
Twitter Card tags control appearance on Twitter
Proper metadata creates attractive, clickable social previews

Browser Behavior

Viewport meta tag makes your site mobile-friendly
Character encoding prevents display issues
Favicon appears in tabs and bookmarks
Preconnect and prefetch hints improve performance

Accessibility

Title is read by screen readers
Language declarations help assistive technology
Proper metadata improves navigation

Common Head Section Mistakes

Mistake 1: Missing Title

MARKUP

<!-- WRONG: No title -->
<head>
  <meta charset="UTF-8">
</head>

<!-- CORRECT: Always include title -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Mistake 2: Charset Not First

MARKUP

<!-- WRONG: Charset comes later -->
<head>
  <title>My Page</title>
  <meta name="description" content="...">
  <meta charset="UTF-8">
</head>

<!-- CORRECT: Charset should be first -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <meta name="description" content="...">
</head>

Mistake 3: Visible Content in Head

MARKUP

<!-- WRONG: Visible content in head -->
<head>
  <title>My Page</title>
  <h1>Welcome</h1>
  <p>This doesn't belong here!</p>
</head>

<!-- CORRECT: Visible content goes in body -->
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This belongs in the body!</p>
</body>

Mistake 4: Multiple Title Elements

MARKUP

<!-- WRONG: Multiple titles -->
<head>
  <title>First Title</title>
  <title>Second Title</title>
</head>

<!-- CORRECT: Only one title -->
<head>
  <title>My Page Title</title>
</head>

Mistake 5: Malformed Meta Tags

MARKUP

<!-- WRONG: Missing quotes, wrong syntax -->
<head>
  <meta name=description content=My page>
  <meta charset=UTF-8 />
</head>

<!-- CORRECT: Proper quotes and syntax -->
<head>
  <meta name="description" content="My page">
  <meta charset="UTF-8">
</head>

Performance Optimization Tips

1. CSS Loading

MARKUP

<!-- Load critical CSS inline for faster rendering -->
<head>
  <style>
    /* Critical CSS here */
    body { margin: 0; font-family: sans-serif; }
  </style>
  
  <!-- Load non-critical CSS asynchronously -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

2. Resource Hints

MARKUP

<head>
  <!-- DNS prefetch for external domains -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  
  <!-- Preconnect to establish early connection -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Prefetch resources for next page -->
  <link rel="prefetch" href="next-page.html">
  
  <!-- Preload critical resources -->
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>

3. Script Optimization

MARKUP

<head>
  <!-- Defer non-critical scripts -->
  <script src="app.js" defer></script>
  
  <!-- Async for independent scripts -->
  <script src="analytics.js" async></script>
  
  <!-- Module scripts (automatically deferred) -->
  <script type="module" src="main.js"></script>
</head>

Testing Your Head Section

Several tools can help you verify your head section is properly configured:

1. Browser Developer Tools

Open DevTools (F12)
Go to the Elements/Inspector tab
Expand the <head> element
Verify all meta tags and links are present

2. Validation Tools

W3C HTML Validator - Check for HTML errors
Twitter Card Validator - Test Twitter card meta tags
Facebook Sharing Debugger - Test Open Graph tags

3. SEO Tools

Check title length (50-60 characters)
Verify meta description (150-160 characters)
Ensure unique titles for each page

Minimal vs. Complete Head

Minimal Head (For Learning/Testing)

MARKUP

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>

Production-Ready Head

MARKUP

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title - Site Name</title>
  <meta name="description" content="Compelling description">
  <meta name="author" content="Author Name">
  
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Compelling description">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
  
  <link rel="canonical" href="https://example.com/page">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="styles.css">
  
  <script src="app.js" defer></script>
</head>

Key Takeaways

The <head> contains metadata about the document
Content in the head is not directly visible on the page
Every page must have exactly one <title> element
Character encoding should be the first meta tag
Viewport meta tag is essential for mobile responsiveness
Meta descriptions help with SEO and social sharing
Link elements connect external resources like CSS and favicons
The head affects SEO, social sharing, and accessibility
Order matters for performance optimization
Use validation tools to verify your head section

What is the Head Section?

Basic Head Structure

Elements That Can Go in the Head

1. The Title Element (Required)

2. Meta Elements

3. Link Elements

4. Style Element

5. Script Element

6. Base Element

Complete Head Section Example

Does Order Matter in the Head?

Recommended Order:

Why the Head is "Invisible" but Important

Search Engine Optimization (SEO)

Social Media Sharing

Browser Behavior

Accessibility

Common Head Section Mistakes

Mistake 1: Missing Title

Mistake 2: Charset Not First

Mistake 3: Visible Content in Head

Mistake 4: Multiple Title Elements

Mistake 5: Malformed Meta Tags

Performance Optimization Tips

1. CSS Loading

2. Resource Hints

3. Script Optimization

Testing Your Head Section

1. Browser Developer Tools

2. Validation Tools

3. SEO Tools

Minimal vs. Complete Head

Minimal Head (For Learning/Testing)

Production-Ready Head

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu

The Head Section

What is the Head Section?

Basic Head Structure

Elements That Can Go in the Head

1. The Title Element (Required)

2. Meta Elements

3. Link Elements

4. Style Element

5. Script Element

6. Base Element

Complete Head Section Example

Does Order Matter in the Head?

Recommended Order:

Why the Head is "Invisible" but Important

Search Engine Optimization (SEO)

Social Media Sharing

Browser Behavior

Accessibility

Common Head Section Mistakes

Mistake 1: Missing Title

Mistake 2: Charset Not First

Mistake 3: Visible Content in Head

Mistake 4: Multiple Title Elements

Mistake 5: Malformed Meta Tags

Performance Optimization Tips

1. CSS Loading

2. Resource Hints

3. Script Optimization

Testing Your Head Section

1. Browser Developer Tools

2. Validation Tools

3. SEO Tools

Minimal vs. Complete Head

Minimal Head (For Learning/Testing)