HTML - The <head> Element and Document Metadata in HTML

The <head> element is an important part of every HTML document. It contains information about the webpage that is generally not displayed directly as visible content on the page. This information is called metadata.

Metadata helps the browser understand how the webpage should be processed and displayed. It can also provide information to search engines, define character encoding, connect external resources, and control how the page behaves on different devices.

1. What Is the `<head>` Element?

The <head> element is placed immediately after the opening <html> tag and before the <body> element.

Basic structure:

<!DOCTYPE html>
<html>
<head>
    <!-- Metadata and other document information -->
</head>
<body>
    <!-- Visible webpage content -->
</body>
</html>

The content inside <head> is primarily intended for browsers, search engines, and other software that processes the webpage.

For example:

<head>
    <title>My Webpage</title>
    <meta charset="UTF-8">
</head>

Here, the <head> contains the page title and character encoding information.

2. What Is Document Metadata?

Metadata means data about data.

In HTML, metadata describes various characteristics of a webpage without being part of the main visible content.

For example, metadata can specify:

The title of the webpage
The character encoding used by the document
Information about the webpage
How the page should behave on mobile devices
External CSS files
Icons associated with the webpage
Relationships between the current document and external resources

This information is generally placed inside the <head> element.

3. Common Elements Used Inside `<head>`

Several HTML elements can be used within <head>. The most common ones are:

<head>
    <title>Example Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="An example HTML webpage">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

Each element has a specific purpose.

`<title>`

The <title> element defines the title of the webpage.

<title>Student Registration</title>

The title may appear in:

The browser tab
Browser history
Bookmarks
Search engine results, depending on the search engine

The <title> element should normally be included in every HTML document.

`<meta>`

The <meta> element provides metadata about the document.

For example:

<meta charset="UTF-8">

This specifies the character encoding of the webpage.

Another example is:

<meta name="description" content="Learn HTML concepts with simple examples.">

This provides a description of the page.

`<link>`

The <link> element establishes a relationship between the current HTML document and an external resource.

A common use is connecting a CSS file:

<link rel="stylesheet" href="style.css">

The browser uses this information to load the external stylesheet.

`<base>`

The <base> element specifies a base URL for relative URLs in a document.

Example:

<base href="https://example.com/">

If the document contains:

<a href="about.html">About Us</a>

the browser can resolve the relative URL using the base URL.

The <base> element should be used carefully because it can affect how relative links throughout the document are interpreted.

4. Character Encoding with `<meta charset>`

One of the most important pieces of metadata is character encoding.

Example:

<meta charset="UTF-8">

UTF-8 is widely used because it supports a very large range of characters, including many international languages and symbols.

For example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Language Example</title>
</head>
<body>
    <p>Welcome</p>
    <p>नमस्ते</p>
</body>
</html>

The character encoding helps the browser correctly interpret the characters in the document.

Without appropriate encoding, some characters may appear incorrectly.

5. Viewport Metadata

The viewport controls how a webpage is displayed on different devices.

A commonly used declaration is:

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

This tells the browser to use the device's width as the webpage's viewport width and to start with a normal zoom level.

It is particularly important for responsive webpages viewed on smartphones and tablets.

For example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page</title>
</head>

The viewport setting itself does not make a webpage responsive. CSS techniques are also required to create a responsive layout.

6. Page Description Metadata

A page can provide a description using the <meta> element.

Example:

<meta name="description" content="This page explains the basics of HTML programming.">

The description gives search engines and other systems information about the page.

However, providing a description does not guarantee that a search engine will display exactly that text in its search results.

7. Linking External CSS

The <head> is commonly used to connect an external CSS file.

HTML:

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

CSS file:

body {
    font-family: Arial, sans-serif;
}

The browser reads the <link> element and loads the specified stylesheet.

Keeping CSS in separate files helps organize larger websites and allows the same stylesheet to be reused across multiple pages.

8. Adding a Favicon

A favicon is a small icon associated with a webpage.

It can be specified using <link>:

<link rel="icon" href="favicon.ico">

A more explicit example is:

<link rel="icon" type="image/png" href="favicon.png">

The browser may display the favicon in places such as the browser tab or bookmarks.

9. Metadata Does Not Usually Appear in the Page

Consider:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="description" content="My personal website">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my homepage.</p>
</body>
</html>

The user sees:

Welcome to My Website
This is my homepage.

The <meta> information itself is not displayed as normal page content.

The browser and other software use this information behind the scenes.

10. Difference Between `<head>` and `<body>`

The <head> and <body> have different responsibilities.

`<head>`	`<body>`
Contains document information	Contains visible page content
Contains metadata	Contains headings, paragraphs, images, etc.
Contains the page `<title>`	Contains the content users interact with
Commonly contains CSS links	Contains elements displayed on the webpage
Contains metadata declarations	Contains the main document content

For example:

<html>
<head>
    <title>Student Portal</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Student Portal</h1>
    <p>Welcome to the student portal.</p>
</body>
</html>

Here, the <head> provides information and resources needed to process the page, while the <body> contains the content presented to the user.

11. Complete Example

A practical HTML document may look like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

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

    <meta name="description"
          content="A simple HTML learning webpage">

    <title>Learn HTML</title>

    <link rel="stylesheet" href="style.css">

    <link rel="icon" type="image/png" href="favicon.png">
</head>

<body>

    <h1>Learn HTML</h1>

    <p>
        HTML is used to structure content on webpages.
    </p>

</body>

</html>

In this example, the <head> provides several types of information:

charset defines the character encoding.
viewport provides viewport instructions for browsers.
description provides a description of the page.
title defines the document title.
The first <link> connects the CSS file.
The second <link> identifies the favicon.

The actual visible content is placed inside <body>.

12. Why the `<head>` Element Is Important

The <head> element plays an important role in making an HTML document function correctly.

It helps to:

Identify the webpage through its title.
Specify how text should be interpreted.
Provide useful metadata to browsers and other systems.
Connect external stylesheets and other resources.
Provide viewport instructions for different screen sizes.
Associate icons with the webpage.
Supply information that can be used when processing or indexing the page.

Conclusion

The <head> element is the section of an HTML document that contains important information about the document rather than the main visible content. It commonly contains elements such as <title>, <meta>, <link>, and <base>.

Understanding the <head> is essential because it provides the browser with information needed to interpret and present the webpage properly. While users primarily interact with content inside the <body>, the information in the <head> plays an important supporting role in how that webpage is processed.

HTML - The <head> Element and Document Metadata in HTML

1. What Is the <head> Element?

2. What Is Document Metadata?

3. Common Elements Used Inside <head>

<title>

<meta>

<link>

<base>

4. Character Encoding with <meta charset>

5. Viewport Metadata

6. Page Description Metadata

7. Linking External CSS

8. Adding a Favicon

9. Metadata Does Not Usually Appear in the Page

10. Difference Between <head> and <body>

11. Complete Example

12. Why the <head> Element Is Important

Conclusion

1. What Is the `<head>` Element?

3. Common Elements Used Inside `<head>`

`<title>`

`<meta>`

`<link>`

`<base>`

4. Character Encoding with `<meta charset>`

10. Difference Between `<head>` and `<body>`

12. Why the `<head>` Element Is Important