HTML Head Element

Explore document header regions and descriptive information configuring page characteristics

Quick Answer

What goes in the HTML head element?

The <head> element contains metadata not displayed on the page: <title> (page title), <meta> tags (charset, description, viewport), <link> (stylesheets, favicons), and <script> tags. This metadata affects SEO, social media sharing, browser behavior, and page appearance. Always include title, charset, and viewport meta tags.

The head section houses document metadata—informational properties describing content attributes. Positioned between opening html and body tags, these specifications remain invisible to visitors while serving browsers, search indexing systems, and web infrastructure.

What is the HTML Head?

The head element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

Example - Basic HTML Head

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.

<!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">
</head>
<body>
    <h1>Page Content</h1>
</body>
</html>

The HTML Title Element

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

Defining a title in the browser tab
Providing a title for the page when it is added to favorites
Displaying a title in search engine results

Example

<head>
    <title>HTML Tutorial - Learn HTML for Free</title>
</head>

Note:

Write a concise, descriptive title for this page. Google has no fixed character limit and may generate a different title link.

The HTML Meta Element

The meta element is used to specify metadata like character set, page description, keywords, author, and viewport settings.

Character Set

Define the character encoding for the HTML document:

Example

<meta charset="UTF-8" />

UTF-8:

UTF-8 is the most common character encoding. It covers almost all characters and symbols in the world.

Viewport for Responsive Design

The viewport meta tag is essential for responsive web design:

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

Explanation:

width=device-width: Sets the width to
                    follow the screen width
                  
initial-scale=1.0: Sets the initial zoom
                    level when the page loads

Description Meta Tag

Define a description for your web page (used by search engines):

Example

<meta
  name="description"
  content="Free HTML tutorials for beginners. Learn HTML with examples and exercises."
/>

SEO Tip:

Write a useful, page-specific description. Google has no fixed character limit and may select different page text for the search snippet.

Keywords Meta Tag

The following legacy keywords example is retained for reference. Google Search ignores the keywords meta tag.

Example
<meta name="keywords" content="HTML, tutorial, web development, beginner" />

Author Meta Tag

Define the author of the page:

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

Refresh Document

Refresh the document every 30 seconds:

Example
<meta http-equiv="refresh" content="30" />

The HTML Link Element

The link element defines the relationship between the current document and an external resource. It is most commonly used to link to stylesheets and favicons.

Link to a Stylesheet

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.

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

Link to a Favicon

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

Preconnect to External Domains

Example - Performance Optimization

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Benefit:

Preconnect establishes early connections to important third-party origins, improving page load performance.

The HTML Style Element

The style element is used to define internal CSS for a single HTML page:

Example
<head>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: navy;
        }
    </style>
</head>

💡 Best Practice

It is better to use external CSS files rather than internal styles. This keeps your HTML clean and CSS reusable across multiple pages.

The HTML Script Element

The script element is used to define client-side JavaScript. While scripts can be placed in the head, it is often better to place them at the end of the body for performance.

Example - External Script

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

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

Example - Internal Script

The snippet includes JavaScript inside its HTML. Unavailable or blocked: browser dialog “alert()”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<head>
    <script>
        function myFunction() {
            alert("Hello World!");
        }
    </script>
</head>

The HTML Base Element

The base element specifies the base URL and/or target for all relative URLs in a page:

Example

<head
  >
    <base
    href="https://www.example.com/"
    target="_blank"
  />
</head
>
<body
  >
    <a href="images/logo.webp">Logo</a
  >
    <!-- This will link to: https://www.example.com/images/logo.webp -->
</body
>

Note:

There can only be one base element in a document, and it must be inside the head element.

Complete Head Example

Here is a complete example of a well-structured HTML head section:

Example - Complete Head

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.

<!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">

    <!-- Page title -->
    <title>Learn HTML - Free Tutorial</title>

    <!-- Meta description for SEO -->
    <meta name="description" content="Free HTML tutorial with examples">

    <!-- Keywords -->
    <meta name="keywords" content="HTML, tutorial, web development">

    <!-- Author -->
    <meta name="author" content="HTML Free Codes">

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

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

    <!-- External JavaScript with defer -->
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Welcome to HTML Tutorial</h1>
</body>
</html>