HTML Head Element

Explore document header regions and descriptive information configuring page characteristics

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

The title should be descriptive but concise (50-60 characters is ideal for SEO).

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:

Keep descriptions between 150-160 characters for optimal display in search results.

Keywords Meta Tag

Define keywords for search engines (less important today):

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
<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
<head>
    <script src="script.js" defer></script>
</head>

Example - Internal Script
<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.png">Logo</a>
    <!-- This will link to: https://www.example.com/images/logo.png -->
</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
<!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>