Head Tag: Metadata and More

Learn about the <head> tag, what it contains, metadata, title, CSS, and JS, head tag.

Introduction

<head> contains metadata (data about data). Let's what goes in the <head>!

What You Will Learn

  • What <head> does
  • Common elements inside <head>
  • Meta tags, title, link, script, style

What is <head>?

<head>:

  • Comes after <html>, before <body>
  • Not visible on the page
  • Contains metadata about the document

What Goes in <head>?

1. <title> - Page Title

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

2. <meta> - Metadata

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A great website!">
</head>

3. <link> - External Resources

<head>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>

4. <style> - Embedded CSS

<head>
    <style>
        body { background: white; }
    </style>
</head>

5. <script> - JavaScript

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

6. <base> - Base URL

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

Complete <head> Example

<head>
    <!-- Character encoding -->
    <meta charset="UTF-8">
    
    <!-- Viewport for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Page title -->
    <title>My Awesome Website</title>
    
    <!-- Description for search engines -->
    <meta name="description" content="Learn web development tutorials">
    
    <!-- Keywords (less important these days) -->
    <meta name="keywords" content="HTML, CSS, JavaScript">
    
    <!-- Author -->
    <meta name="author" content="John Doe">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">
    
    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- JavaScript (often better at end of <body>) -->
    <script src="script.js"></script>
</head>

Common <meta> Tags Explained

<meta charset="UTF-8"

Sets character encoding to handle all characters (emojis, etc.)

<meta name="viewport" ...

Helps with responsive design on mobile.

<meta name="description" ...

Shown in search engine results.

<meta name="author" ...

Author of the page.

Best Practices

✅ Always include <meta charset="UTF-8"> ✅ Always include <meta name="viewport"> ✅ Always include <title> ✅ Put CSS <link> in <head> ✅ Put JS at end of <body> (or use defer/async

Common Mistakes

❌ Putting visible content in <head>

<head>
    <h1>Hello!</h1>  <!-- Wrong!
</head>
<body>...</body>

❌ Forgetting <title>

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

FAQs

**Q: <head> visible? A: No, only metadata.

**Q: <head> order? A: doesn't matter too much, but put <meta charset> first is good.

**Q: multiple <meta> tags? A: Yes!

Related Topics

  • Title Tag
  • Meta Tags

Summary

<head> contains metadata, title, links to CSS/JS. It's not visible but very important!

Next Topic

Let's learn about Body Tag!

← Back to Syllabus