← Back to All Tags

<head>

Contains metadata/information for the document

Definition and Usage

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

Metadata is data about the HTML document. Metadata is not displayed.

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

Required: The <head> element must be the first child of the <html> element and must contain at least one <title> element.
Note: The <head> tag contains important information that affects how browsers and search engines interpret your page.

Browser Support

The <head> tag is supported in all browsers:

Chrome
Chrome
All versions
Firefox
Firefox
All versions
Safari
Safari
All versions
Edge
Edge
All versions
Opera
Opera
All versions

Attributes

The <head> tag supports the Global Attributes in HTML.

Examples

Basic Head Structure

Minimal head with required title:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

Head with Meta Tags

Include important meta information:

Example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML with free tutorials and examples">
  <meta name="keywords" content="HTML, tutorial, web development">
  <meta name="author" content="John Doe">
  <title>HTML Tutorial - Learn HTML</title>
</head>

Head with CSS and JavaScript

Link external stylesheets and scripts:

Example

<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <style>
    body { font-family: Arial, sans-serif; }
  </style>
</head>

Complete SEO Head

Comprehensive head for search engine optimization:

Example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best HTML Tutorial 2025 | Learn HTML Free</title>
  <meta name="description" content="Learn HTML with our comprehensive free tutorial. Perfect for beginners and advanced developers.">
  <meta name="keywords" content="HTML, HTML5, web development, tutorial">
  <meta name="author" content="HTML Free Codes">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Best HTML Tutorial 2025">
  <meta property="og:description" content="Learn HTML with free tutorials">
  <meta property="og:image" content="https://example.com/image.jpg">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Best HTML Tutorial 2025">

  <link rel="canonical" href="https://example.com/html-tutorial">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>

Responsive Meta Tags

Head optimized for mobile devices:

Example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Responsive Website</title>

  <!-- iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Android -->
  <meta name="theme-color" content="#745af2">

  <link rel="stylesheet" href="responsive.css">
</head>

Head Elements Explained

  • <title>: (Required) Defines the document title shown in browser tab and search results
  • <meta>: Provides metadata like character set, viewport, description, keywords, and author
  • <link>: Links to external resources like stylesheets, fonts, and icons
  • <style>: Contains internal CSS styles for the document
  • <script>: Contains or references JavaScript code
  • <base>: Specifies the base URL for all relative URLs in the document

SEO Meta Tags Importance

  • Title Tag: Most important for SEO, appears in search results
  • Description Meta: Appears in search results, influences click-through rate
  • Viewport Meta: Essential for mobile-friendly websites
  • Charset Meta: Ensures proper character encoding (UTF-8 recommended)
  • Canonical Link: Prevents duplicate content issues
  • Open Graph Tags: Controls how content appears when shared on social media
  • Robots Meta: Controls how search engines index your page

Best Practices for Document Head

  • Always include <meta charset="UTF-8"> as the first meta tag
  • Include viewport meta tag for responsive design
  • Keep title tag between 50-60 characters for optimal SEO
  • Write descriptive meta descriptions (150-160 characters)
  • Place critical CSS in the head for faster rendering
  • Use defer or async for script tags to improve performance
  • Include favicon for better branding
  • Add canonical URL to avoid duplicate content
  • Use Open Graph tags for social media sharing
  • Preconnect to external domains to improve loading speed
  • Keep the head section organized and well-commented
  • Validate your HTML to ensure proper head structure

Common Head Elements Order

Recommended order for head elements:

Best Practice Order

<head>
  <!-- 1. Character encoding (must be first) -->
  <meta charset="UTF-8">

  <!-- 2. Viewport and compatibility -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 3. Title (required) -->
  <title>Page Title</title>

  <!-- 4. SEO meta tags -->
  <meta name="description" content="...">
  <meta name="keywords" content="...">

  <!-- 5. Canonical and robots -->
  <link rel="canonical" href="...">

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

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

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

  <!-- 9. Scripts -->
  <script src="script.js" defer></script>
</head>

Default CSS Settings

Most browsers will display the <head> element with the following default values:

Default CSS

head {
  display: none;
}

Related Tags