Skip to content
Guide Docs

HTML Head Elements

The <head> element contains metadata about the HTML document that isn’t displayed on the page but is crucial for browsers, search engines, and social media platforms.

The Head Section

The head section is placed between <html> and <body> tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadata goes here -->
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

Essential Head Elements

1. Title Element

The <title> element defines the browser tab title and is crucial for SEO:

<head>
    <title>My Awesome Website - Home Page</title>
</head>

Best practices:

  • Keep it under 60 characters
  • Include relevant keywords
  • Be descriptive and unique for each page
  • Put important keywords first

2. Meta Charset

Specifies character encoding for the document:

<meta charset="UTF-8">

This ensures proper display of special characters, emojis, and international text.

3. Viewport Meta Tag

Essential for responsive design on mobile devices:

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

Viewport properties:

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


<!-- Prevent user zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


<!-- Set specific width -->
<meta name="viewport" content="width=500, initial-scale=1.0">

SEO Meta Tags

Description Meta Tag

Provides a summary for search engine results:

<meta name="description" content="Learn HTML, CSS, and JavaScript with our comprehensive guides and tutorials. Perfect for beginners and experienced developers.">

Best practices:

  • 150-160 characters
  • Include target keywords naturally
  • Make it compelling to increase click-through rates
  • Unique for each page

Keywords Meta Tag

Less important now, but still used by some search engines:

<meta name="keywords" content="HTML, CSS, JavaScript, web development, tutorials">
<meta name="author" content="John Doe">
<meta name="copyright" content="© 2024 My Company">

Robots Meta Tag

Controls search engine crawling and indexing:

<!-- Allow indexing and following links -->
<meta name="robots" content="index, follow">


<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow">


<!-- Index but don't follow links -->
<meta name="robots" content="index, nofollow">


<!-- Don't show cached version -->
<meta name="robots" content="noarchive">

Social Media Meta Tags

Open Graph (Facebook, LinkedIn)

<!-- Basic Open Graph tags -->
<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">
<meta property="og:site_name" content="Your Website Name">


<!-- Optional tags -->
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Cards

<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@yourusername">
<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">

Twitter card types:

  • summary: Small card with thumbnail
  • summary_large_image: Large card with prominent image
  • app: Mobile app card
  • player: Video/audio player card

Stylesheets

<!-- External CSS -->
<link rel="stylesheet" href="styles.css">


<!-- Multiple stylesheets -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="responsive.css">


<!-- Media queries in link -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">

Favicon

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


<!-- PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">


<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">


<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

Preloading Resources

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero-image.jpg" as="image">
<link rel="preload" href="critical.css" as="style">


<!-- Prefetch for next page -->
<link rel="prefetch" href="next-page.html">


<!-- DNS prefetch -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">


<!-- Preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">

Canonical URL

Helps prevent duplicate content issues:

<link rel="canonical" href="https://example.com/preferred-url">

Alternate Languages

<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="es" href="https://example.com/es">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">

Script Elements in Head

External JavaScript

<!-- Regular script (blocks rendering) -->
<script src="script.js"></script>


<!-- Async loading (doesn't block) -->
<script src="script.js" async></script>


<!-- Defer loading (executes after parsing) -->
<script src="script.js" defer></script>

Inline Scripts

<script>
    console.log('Page loaded');
    // Initialization code
</script>

Style Elements

Inline CSS

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }


    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
</style>

Critical CSS

<!-- Inline critical CSS for faster rendering -->
<style>
    /* Above-the-fold styles */
    header { background: #333; color: white; }
    nav { display: flex; }
</style>


<!-- Load rest of CSS asynchronously -->
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Base Element

Sets base URL for all relative URLs:

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


<!-- Now all relative links use this base -->
<a href="page.html">Link</a> <!-- Goes to https://example.com/page.html -->

Other Useful Meta Tags

Refresh and Redirect

<!-- Refresh page every 30 seconds -->
<meta http-equiv="refresh" content="30">


<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=https://example.com/new-page">

Content Security Policy

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Theme Color (Mobile browsers)

<meta name="theme-color" content="#4285f4">

Application Name

<meta name="application-name" content="My App">

Complete Head Example

Here’s a comprehensive example with all essential elements:

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


    <!-- Viewport for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- SEO Meta Tags -->
    <title>Best Web Development Tutorials | Learn HTML, CSS, JS</title>
    <meta name="description" content="Learn web development with our comprehensive tutorials. Master HTML, CSS, JavaScript and modern frameworks.">
    <meta name="keywords" content="web development, HTML, CSS, JavaScript, tutorials">
    <meta name="author" content="Guide Docs">
    <meta name="robots" content="index, follow">


    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:title" content="Best Web Development Tutorials">
    <meta property="og:description" content="Learn web development with our comprehensive tutorials.">
    <meta property="og:image" content="https://example.com/og-image.jpg">


    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://example.com/">
    <meta name="twitter:title" content="Best Web Development Tutorials">
    <meta name="twitter:description" content="Learn web development with our comprehensive tutorials.">
    <meta name="twitter:image" content="https://example.com/twitter-image.jpg">


    <!-- Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">


    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/">


    <!-- Stylesheets -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="styles.css">


    <!-- Preload critical resources -->
    <link rel="preload" href="hero.jpg" as="image">


    <!-- JavaScript -->
    <script src="app.js" defer></script>


    <!-- Theme color -->
    <meta name="theme-color" content="#4285f4">
</head>
<body>
    <!-- Page content -->
</body>
</html>

Best Practices

  1. Always include essential meta tags: charset, viewport, title, description
  2. Use semantic and descriptive titles: Unique for each page
  3. Optimize meta descriptions: Write compelling copy for better CTR
  4. Implement Open Graph tags: Better social media sharing
  5. Add favicons: Multiple sizes for different devices
  6. Use preload wisely: Only for critical resources
  7. Defer non-critical JavaScript: Improves page load time
  8. Set canonical URLs: Prevent duplicate content issues
  9. Use HTTPS: Required for many modern features
  10. Test social media cards: Use validators before publishing

SEO Checklist

  • Unique, descriptive title (under 60 characters)
  • Meta description (150-160 characters)
  • Viewport meta tag for mobile
  • Canonical URL set
  • Open Graph tags for social sharing
  • Twitter Card tags
  • Favicons for all devices
  • Structured data (JSON-LD)
  • Proper language attribute
  • HTTPS enabled

Common Mistakes

<!-- Missing viewport -->
<head>
    <title>Page</title>
    <!-- Will break mobile responsiveness -->
</head>


<!-- Missing charset -->
<head>
    <title>Page</title>
    <!-- Special characters may not display correctly -->
</head>


<!-- Duplicate titles -->
<head>
    <title>Home</title>
    <title>Homepage</title> <!-- Don't do this -->
</head>


<!-- Blocking scripts -->
<head>
    <script src="large-library.js"></script> <!-- Blocks rendering -->
    <!-- Use defer or async instead -->
</head>

Tools for Testing

  • Google Search Console: Monitor search performance
  • Facebook Sharing Debugger: Test Open Graph tags
  • Twitter Card Validator: Test Twitter cards
  • Lighthouse: Audit performance and SEO
  • W3C Validator: Validate HTML markup

Summary

  • The <head> contains metadata not displayed on the page
  • Essential elements: charset, viewport, title, description
  • Social media tags improve sharing appearance
  • Proper meta tags boost SEO rankings
  • Preloading resources improves performance
  • Always test head elements before deployment

Master these head elements to improve your website’s SEO, performance, and social media presence!