HTML <head> Tag

The HTML <head> tag is a container for metadata and other information about the HTML document. It is placed at the top of the HTML file, inside the <html> tag, but outside the <body> tag. The content inside the <head> tag is not displayed directly on the web page but is used to define the document’s title, links to stylesheets, scripts, and other settings.

It plays a critical role in defining the structure, style, and behavior of the webpage.

Basic Syntax of HTML <head> Tag

The basic structure of the <head> tag is:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        Metadata and links go here.
    </head>
    <body>
        Visible content goes here.
    </body>
</html>

The <head> tag usually includes several nested elements, such as <title>, <meta>, <link>, <style>, and <script>.

Common Elements Inside the <head> Tag

  • <title>: Specifies the title of the web page, displayed on the browser tab or in search engine results.
  • <meta>: Provides metadata such as character set, viewport settings, or page description for SEO.
  • <link>: Links external resources like stylesheets or icons.
  • <style>: Contains internal CSS styles for the page.
  • <script>: Includes or links to JavaScript files for functionality.
  • <base>: Specifies a base URL for relative URLs on the page.

Basic Example of HTML <head> Tag

Here’s a simple example showing common elements inside the <head> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>My First Website</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a sample page.</p>
    </body>
</html>

Explanation: The <head> includes the page title, character encoding, viewport settings for responsiveness, and a link to an external stylesheet.

Using <style> Inside the <head>

You can include internal CSS styles directly inside the <head> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>Styled Page - TutorialKart.com</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f0f0f0;
                color: #333;
            }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This page has inline styles defined in the <head> tag.</p>
    </body>
</html>
Using <style> Inside the <head>

Explanation: The <style> element inside the <head> tag contains CSS rules that style the entire page.

Using <script> Inside the <head>

You can include JavaScript within the <head> tag to add interactivity to your page:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Example</title>
        <script>
            function greet() {
                alert("Welcome to My Website!");
            }
        </script>
    </head>
    <body onload="greet()">
        <h1>Hello!</h1>
        <p>This page greets you with an alert message on load.</p>
    </body>
</html>
Using <script> Inside the <head>

Explanation: The JavaScript function greet() is defined inside the <script> tag, and it is executed when the page loads.

Practical Applications of the <head> Tag

  • Page Titles: Specify meaningful titles using the <title> tag to improve user experience and SEO.
  • Metadata: Add meta tags for character encoding, viewport settings, and search engine optimization.
  • External Resources: Link external stylesheets, scripts, and fonts using the <link> tag.
  • Internal Styling: Include inline CSS for quick styling within the <style> tag.
  • JavaScript: Define or link JavaScript functions and libraries for interactivity.