Head & Metadata in HTML

The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is not displayed on the page but is machine parsable.

The <head> element typically contains:

Document title (<title>)
Character set declarations (<meta charset="...">)
Styles (<style> or <link>)
Scripts (<script>)
Other meta information (<meta>)
Links to external resources (<link>)

Essential Head Elements

The <title> Element

The <title> element defines the title of the document. It's required in all HTML documents and is important for:

Browser tabs - displays the title
Bookmarks - uses the title when bookmarking pages
Search engine results - often displays the title as the clickable headline

<title>Page Title | Website Name</title>

The <meta> Element

The <meta> element provides metadata about the HTML document. Metadata is not displayed on the page but is used by browsers, search engines, and other web services.

Character Encoding

<meta charset="UTF-8">

This specifies the character encoding for the HTML document, and should be placed as the first element inside the <head>.

Viewport Settings

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

This gives the browser instructions on how to control the page's dimensions and scaling, essential for responsive web design.

Description

<meta name="description" content="A brief description of the page content.">

This provides a short description of the page, which may be used by search engines in search results.

Keywords

<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">

While less important for SEO today, this can still be used to specify keywords related to the page content.

Author

<meta name="author" content="John Doe">

Specifies the author of the page.

Linking External Resources

The <link> Element

The <link> element defines the relationship between the current document and an external resource. It's most commonly used to link to stylesheets.

CSS Stylesheets

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

Favicon

<link rel="icon" href="favicon.ico" type="image/x-icon">

This links to the favicon (the small icon displayed in the browser tab).

Alternative Stylesheets

<link rel="alternate stylesheet" href="darkmode.css" title="Dark Mode">

Preconnect and Preload

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="important-font.woff2" as="font" type="font/woff2" crossorigin>

These are resource hints that help with performance optimization.

Social Media Metadata

Special meta tags can be used to control how your content appears when shared on social media platforms.

Open Graph Protocol (Facebook, LinkedIn)

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Description of your page">
<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">

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description of your page">
<meta name="twitter:image" content="https://example.com/image.jpg">

Scripts in the Head

The <script> element is used to embed or reference JavaScript code. When placing scripts in the head, consider:

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

Regular script: Blocks parsing until the script is downloaded and executed
defer: Downloads in parallel with HTML parsing and executes after parsing is complete
async: Downloads in parallel with HTML parsing and executes as soon as it's available (may interrupt parsing)

For performance reasons, it's often better to place scripts at the end of the <body> or use defer when placing them in the <head>.

Complete Head Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Head Example | My Website</title>
    
    <!-- Description and keywords -->
    <meta name="description" content="A comprehensive example of HTML head elements and metadata">
    <meta name="keywords" content="HTML, head, metadata, SEO, tutorial">
    <meta name="author" content="John Doe">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="responsive.css">
    
    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    
    <!-- Open Graph tags for social media -->
    <meta property="og:title" content="Complete Head Example">
    <meta property="og:description" content="A comprehensive example of HTML head elements and metadata">
    <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">
    
    <!-- Twitter Card tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Complete Head Example">
    <meta name="twitter:description" content="A comprehensive example of HTML head elements and metadata">
    <meta name="twitter:image" content="https://example.com/image.jpg">
    
    <!-- Scripts with defer attribute -->
    <script src="main.js" defer></script>
    
    <!-- Inline styles (if needed) -->
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }
    </style>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Best Practices for Head and Metadata

Always include the charset meta tag as the first element in the head
Always include a viewport meta tag for responsive design
Write descriptive, unique titles for each page (ideally 50-60 characters)
Write concise, accurate meta descriptions (ideally 150-160 characters)
Use appropriate Open Graph and Twitter Card tags if your content is likely to be shared
Consider using resource hints like preconnect and preload for performance optimization
Use defer or async attributes for scripts when appropriate
Keep the head section organized and commented for better maintainability