htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

The snippet includes CSS inside its HTML. Unavailable or blocked: stylesheet “styles.css”; script “script.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: stylesheet “styles.css”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: stylesheet “responsive.css”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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
  • Write a concise, descriptive title for this page. Google has no fixed character limit and may generate a different title link.
  • Write a useful, page-specific description. Google has no fixed character limit and may select different page text for the search snippet.
  • 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

Unavailable or blocked: stylesheet “styles.css”; script “script.js”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

head {
  display: none;
}

Related Tags