HTML head Tag: How to Include Metadata and Links in head

The HTML head tag contains information and loads tools for the web page.

What Is the <head> Tag in HTML?

The <head> tag is placed above the <body>. It tells the browser how to process the page and does not display on the screen.

It contains these tags:

• The page title
• The metadata
• Scripts,
• Styles

This data loads before the browser shows any content.

Here is the main tag:

<head><!-- This is the hidden part--></head>

All elements inside define how the page loads and works.

The page may lose its styles or scripts without a <head> and it can also show incorrect symbols.

You can place it before the <body> so the browser reads the rules first.

Here is an example:

<head>
  <title>My Page</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/path/css/style.css">
  <script src="/file/path/js/main.js"></script>
</head>

Start with the title. Then use meta tags for encoding and layout. After that, link styles or scripts.

Elements Inside <head> Tag in HTML

The <title> Element

The title shows on the browser tab. It also tells search engines what the page covers. It appears inside the <head> tag.

Here is an example:

<head>
  <title>The web page title</title>
</head>

The <meta> Element

Meta tags set the text format and page description. Some control how bots read the site. You can also tell browsers what not to show.

Here is an example of how you can write them inside the <head> tag:

<head>
    <!-- Sets the character encoding (text format) -->
    <meta charset="UTF-8">
    
    <!-- Provides the page description -->
    <meta name="description" content="This is a tutorial on HTML.">
    
    <!-- Controls how search engines index the page -->
    <meta name="robots" content="noindex, nofollow">
    
    <!-- Prevents browsers from displaying the page in a frame -->
    <meta http-equiv="X-Frame-Options" content="deny">
</head>

The <link> Element

This tag loads styles from an outside file. You can keep your CSS rules in a separate file and call it here.

Here is an example:

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

The <style> Element

Write CSS rules inside the head with this tag in HTML. This helps when the page only needs a few small rules.

For example:

<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    p {
      color: #333;
    }
  </style>
</head>

The <script> Element

Use this to load a JavaScript file or write one in the head. You can control when it runs with async or defer.

Load external script with defer:

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

Write script inline:

<script>
  console.log('Hello, world!');
</script>

Viewport Meta Tag for Responsive Design

Phones and tablets need the page to fit their screens. You can add a viewport tag to control this.

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

This tag tells the browser to match the screen size. It also sets the zoom. The mobile users may see the full site zoomed out without it.

Examples

Simple Head with Title and Charset

<head>
  <title>Start Page</title>
  <meta charset="UTF-8">
</head>

This sets the page title and tells the browser to read text with UTF-8. You need both lines in almost every page.

Full Setup with Style and Script

<head>
  <title>Site Page</title>
  <link rel="stylesheet" href="style.css">
  <script src="/main/path/site.js" defer></script>
</head>

This head loads an outside style and a script. The script runs after the page loads so nothing breaks.

Head with SEO Tags and Icon

<head>
  <title>Head Guide</title>
  <meta name="description" content="This page shows the HTML head tag.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/icons/icon.png" type="image/png">
  <link rel="stylesheet" href="/css/layout.css">
</head>

This example shows a full head with the following:

• Title
• A short page description
• Mobile screen rules
• A tab icon
• Style rules.

Each line helps the browser read and show the page the right way.

Wrapping Up

This guide showed how the <head> tag works. It helps browsers load styles and set the page name. You also saw how meta tags control layout and search. The viewport and icon help on phones and tabs.

Here is a quick recap:

• Use <head> to set up the page
• Add <title> to label the browser tab
• Use <meta> to give the layout and SEO rules
• Load CSS with <link> or write it inside <style>

FAQs

<head>
  <title>My Page</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

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

<style>
  body { background: #f0f0f0; }
</style>

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

Similar Reads