Open In App

HTML head Tag

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
18 Likes
Like
Report

The <head> tag in HTML is an essential element used to define the head section of an HTML document. It is placed inside the <html> tag, and used to store information that doesn't appear directly on the webpage itself.

  • It contains metadata that helps the browser and search engines to understand the content of the page.
  • In HTML 4, the <head> element was mandatory but in HTML5, the <head> element can be omitted.
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document Title</title>
    <meta charset="UTF-8">
    <meta name="description" content="An example webpage.">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Hello, World!</h1>
</body>

</html>

Common Element Inside head tag

HTML <head> tag is a type of container which has the following tags called <title>, <meta>, <link>,<style>,<script> and <noscript>.

1. The <title> Tag

The <title> tag is one of the most important parts of your <head> tag. It tells search engines and users what your page is about.

Syntax:

<head>
      <title>Title of the document</title>
</head>

2. The <meta> Tag

The <meta> tag provides metadata about the document, such as the character set, description, and keywords. It also includes information for search engines, social media platforms, and browsers.

Common types of meta tags:

  • Character Set: This tells the browser to use the UTF-8 character encoding, which supports most characters used worldwide.
<meta charset="UTF-8">
  • Meta Description: Search engines use meta description in search results. A well-crafted description can increase the likelihood of users clicking through to your page.
<meta name="description" content="This is a article for understanding the HTML head tag.">
  • Viewport Meta Tag: This tag ensures the webpage is responsive, meaning it will display correctly on devices with different screen sizes, such as mobile phones and tablets.
<meta name="viewport" content="width=device-width, initial-scale=1">

The <link> tag is used to link external resources to the document, most commonly stylesheets or icons like favicons.

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

4. The <style> Tag

The <style> tag allows you to write CSS directly within the HTML document, though external stylesheets are generally preferred for larger projects.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
</style>

5. The <script> Tag

The <script> tag is used to include or reference JavaScript files that add interactivity and dynamic functionality to the webpage.

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

6. The <noscript> Tag

The <noscript> tag defines alternative content for users whose browsers do not support or have disabled JavaScript.

<noscript>
    Your browser does not support JavaScript or it is disabled.
</noscript>

S

Shubrodeep Banerjee
Improve
Article Tags :

Explore

Lightbox