Home/HTML/Metadata and the Head Element

Metadata and the Head Element

HTML Basics•Reading time: 6 min

The <head> section of an HTML document contains metadata that is not displayed on the page but provides crucial information about the document.

In this tutorial, you'll learn about the various metadata elements and how they influence document behavior, search engine optimization, and browser display.

1The Head Element

The <head> element is a container for metadata (information about the document) and is placed between the <html> tag and the <body> tag.

Metadata typically defines document title, character set, styles, scripts, and other meta information.

basic-head.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- The content of the document goes here -->
</body>
</html>

Important Notes:

The <head> element is not displayed on the page
Content in the <head> provides information to browsers and search engines
Well-structured metadata improves accessibility, SEO, and user experience
Some metadata tags are essential for proper page rendering

2Essential Meta Tags

Certain metadata elements are essential for proper rendering and functionality of web pages. Let's explore the most important ones:

Document Title

The <title> element defines the title of the document, which appears in the browser tab and search results.

html

<title>My Website | Homepage</title>

Best practices: Keep titles concise (50-60 characters), unique for each page, and include key terms.

Character Encoding

The charset meta tag defines the character encoding for the document, ensuring text displays correctly.

html

<meta charset="UTF-8">

Best practices: Always include this tag and place it as the first element in the <head> section. UTF-8 is the recommended encoding for most websites.

Viewport Settings

The viewport meta tag controls how the page is displayed on mobile devices, making it essential for responsive design.

html

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

What it does: Sets the viewport width to match the device width and sets the initial zoom level to 1.0, ensuring proper display on mobile devices.

Page Description

The description meta tag provides a summary of the page content, which often appears in search engine results.

html

<meta name="description" content="Learn about HTML metadata and the head element in this comprehensive tutorial for beginners.">

Best practices: Keep descriptions between 150-160 characters and include relevant keywords naturally.

Meta Tag Structure

The <meta> tag uses different attributes based on what information it's providing:

charset - for character encoding
name and content - for named metadata like description and viewport
http-equiv and content - for HTTP header equivalents
property and content - commonly used for social media metadata

3Linking External Resources

The <head> section is where you link to external resources like stylesheets, scripts, fonts, and icons that enhance your webpage.

CSS Stylesheets

Link to external CSS files to style your HTML document:

html

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

<!-- External stylesheet with media query -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">

<!-- Alternative method using @import (not recommended for performance) -->
<style>
  @import url('styles.css');
</style>

JavaScript Files

Link to external JavaScript files to add interactivity:

html

<!-- Basic script inclusion -->
<script src="script.js"></script>

<!-- With async attribute (loads asynchronously) -->
<script src="analytics.js" async></script>

<!-- With defer attribute (executes after HTML is parsed) -->
<script src="app.js" defer></script>

Note: async and defer attributes help improve page loading performance by controlling when scripts load and execute.

Fonts and Icons

Link to external fonts and favicon icons:

html

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- Favicon (website icon) -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Apple Touch Icon (for iOS devices) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Preloading and Prefetching

Optimize resource loading with preload, prefetch, and preconnect:

html

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

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

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

Performance tip: Use these resource hints strategically to improve page load times and user experience.

Resource Loading Best Practices

Place CSS links in the head to prevent flash of unstyled content (FOUC)
Use defer for scripts that don't need to run immediately
Only include resources that are necessary for the current page
Consider using resource hints like preload and preconnect for critical assets
Minimize the number of external resources to improve loading performance

4SEO and Social Media Tags

Additional metadata can significantly improve your website's visibility in search engines and appearance when shared on social media platforms.

SEO Meta Tags

These tags help search engines understand and index your content:

html

<!-- Basic SEO tags -->
<meta name="description" content="A comprehensive guide to HTML metadata and the head element.">
<meta name="keywords" content="HTML, metadata, head element, web development">
<meta name="author" content="Your Name">

<!-- Robots directive -->
<meta name="robots" content="index, follow">

<!-- Canonical URL (prevents duplicate content issues) -->
<link rel="canonical" href="https://example.com/metadata-tutorial">

Open Graph Protocol

These tags control how your content appears when shared on Facebook and other platforms that support Open Graph:

html

<meta property="og:title" content="Metadata and the Head Element Tutorial">
<meta property="og:description" content="Learn all about HTML metadata and the head element in this comprehensive guide.">
<meta property="og:image" content="https://example.com/images/metadata-tutorial.jpg">
<meta property="og:url" content="https://example.com/metadata-tutorial">
<meta property="og:type" content="article">

Twitter Card Tags

These tags control how your content appears when shared on Twitter:

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:title" content="Metadata and the Head Element Tutorial">
<meta name="twitter:description" content="Learn all about HTML metadata and the head element in this comprehensive guide.">
<meta name="twitter:image" content="https://example.com/images/metadata-tutorial.jpg">

Schema.org Structured Data

Add structured data to help search engines understand your content better and potentially display rich results:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Metadata and the Head Element Tutorial",
  "author": {
    "@type": "Person",
    "name": "Your Name"
  },
  "datePublished": "2023-09-20",
  "description": "Learn all about HTML metadata and the head element in this comprehensive guide."
}
</script>

Social Media Optimization Tips

Use high-quality images that are at least 1200×630 pixels for best display on social platforms
Write compelling, accurate descriptions that entice users to click
Test how your pages appear when shared using tools like the Facebook Sharing Debugger or Twitter Card Validator
Keep titles under 60 characters and descriptions under 160 characters for optimal display
Update metadata when the content of the page changes significantly

5Try It Yourself

Create a complete HTML document with a well-structured <head> section that includes essential metadata and optimizations.

complete-metadata.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  
  <!-- Viewport settings for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page title -->
  <title>Web Development Guide | HTML Metadata Tutorial</title>
  
  <!-- Meta description -->
  <meta name="description" content="Learn how to use HTML metadata and the head element to improve your website's SEO, accessibility, and social sharing.">
  
  <!-- Keywords (less important now for SEO but still used) -->
  <meta name="keywords" content="HTML, metadata, head element, SEO, web development">
  
  <!-- Author information -->
  <meta name="author" content="Your Name">
  
  <!-- Robots directive -->
  <meta name="robots" content="index, follow">
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/html-metadata-tutorial">
  
  <!-- Favicon and device-specific icons -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  
  <!-- CSS stylesheets -->
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  
  <!-- Open Graph tags for social sharing -->
  <meta property="og:title" content="Web Development Guide | HTML Metadata Tutorial">
  <meta property="og:description" content="Learn how to use HTML metadata and the head element to improve your website's SEO, accessibility, and social sharing.">
  <meta property="og:image" content="https://example.com/images/metadata-tutorial.jpg">
  <meta property="og:url" content="https://example.com/html-metadata-tutorial">
  <meta property="og:type" content="article">
  
  <!-- Twitter Card tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@yourusername">
  <meta name="twitter:title" content="HTML Metadata Tutorial">
  <meta name="twitter:description" content="Learn how to use HTML metadata and the head element.">
  <meta name="twitter:image" content="https://example.com/images/metadata-tutorial.jpg">
  
  <!-- Structured data with Schema.org -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Metadata and the Head Element Tutorial",
    "author": {
      "@type": "Person",
      "name": "Your Name"
    },
    "datePublished": "2023-09-20",
    "description": "Learn how to use HTML metadata and the head element to improve your website."
  }
  </script>
  
  <!-- JavaScript (with defer attribute) -->
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <h1>HTML Metadata and the Head Element</h1>
    <p>A comprehensive tutorial on optimizing your webpage's metadata</p>
  </header>
  
  <!-- Page content goes here -->
  
  <footer>
    <p>&copy; 2023 Web Development Guide. All rights reserved.</p>
  </footer>
</body>
</html>

Pro Tip

You don't need to include every possible meta tag on every page. Focus on the ones that matter most for your specific content and audience. Essential tags include charset, viewport, title, and description. Add social media tags when you want your content to be shared, and structured data for pages that can benefit from rich search results.

Summary

✓
The <head> element contains metadata that is not visible on the page but provides crucial information
✓
Essential meta tags include charset, viewport, title, and description
✓
Link external resources like CSS, JavaScript, fonts, and icons in the head section
✓
SEO meta tags help search engines understand and index your content
✓
Social media tags control how your content appears when shared on platforms like Facebook and Twitter

Previous: Block and Inline Elements Back to HTML Tutorials